IP-UrlはIdPを利用してログインするためのURL。このパターンは今回は実装しません。あればサインアップ画面にユーザーをリダイレクトさせます。loginUrlおよびsignupUrlでは従来通りのログイン・アカウント作成処理を行います。ログインが完了したら、ac.jsを含んだコンテンツを返します。ac.jsによりaccountchooser.comにリダイレクトが行われ、既にaccountchooser.comに存在しているアカウントであればhomeUrlにリダイレクトされ、存在していなければstoreするかどうかの確認がaccountchooser.comで行われます。確認後、homeUrlにリダイレクトされます。今回はデフォルトのパスで実装しました。それぞれのパスのhtml・JavaScriptは以下のようになります。実際のサインアップ、ログイン処理は別途実装するか既存の実装を利用することになりますが、そのあたりは省略してます。fieldのidは各endpointのパスと同様に設定で変更可能です。homeUrlhomeUrlのコンテンツはなんでも構いませんが、こんな感じで。ユーザーがログインしていなかったらloginUrlに飛ばす、もしくはloginUrlのリンクを貼ることになると思います。</body></html>loginUrlac.jsを読み込むことと、formを設置する必要があります。fieldを設置します。accountchooser.comにアカウントが存在していない場合、リダイレクトが発生しないので、アカウント作成画面へのリンクでも貼っておきます(そのまま従来のログインをしても構いません)。ログインが成功したらアカウントの情報をscriptタグ内に記述することで、アカウントの情報をaccountchooser.comにstoreする処理が行われます。accountchooser.comにstoreした後はhomeUrlにリダイレクトされます。</body></html>userStatusUrlこのエンドポイントはaccountchooser.comからPOSTされてくるユーザーのアカウント情報を見て、すでにアカウントが自サイトに存在していれば{"registered":true}を、存在していなければ{"regisitered":false}を、IdPにリダイレクトする場合は、{"registered":"IP-uri"}としてIdPを利用してログインするためのURLを返します。loginなので最後のパターンはありません。fieldに自動でfillしてくれます。アカウント作成が成功したらアカウントの情報をscriptタグ内に記述します。このアカウントの情報をaccountchooser.comにstoreします。accountchooser.comにstore後はhomeUrlにリダイレクトされます。loginUrlでaccountchooser.comにアカウントが存在していない場合はaccountchooser.comにリダイレクトがされないので、従来通りアカウント作成用の画面を表示する必要があります。loginなどを実装している場合は、以下のように記述することでサポートしているIdPのアカウントをaccountchooser.com上で表示させることができます。];</script>まとめ今回のように、ac.jsを単純に組み込むだけだとそんなに良いUXにはなりませんが、ac.jsは他にもいろいろとできるのでもっとUXの良いフローの実装もできます。Connectなりの実装はRPがすることになります。Filteringの仕様が変わってました)、時折見ていこうかなと思います。移行してみました月別アーカイブはてなブログをはじめよう!bang_yyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。