Account Chooser
@ritou
2012/11/29
idcon mini Vol.1

今日の内容
 概要
 ac.js vs プロダクト
 ac.jsの実装方法
idcon mini Vol.1 - Account Chooser 2

Account Chooserの機能
 アカウント保存
 アカウント選択
 アカウント切り替え / ログアウト
idcon mini Vol.1 - Account Chooser 3

Account Chooserのメリット
 ログイン/新規登録率向上
 レガシーなログインからの ID プロバイダのサポートが容易
 サイトへの変更が少ない
idcon mini Vol.1 - Account Chooser 4

Account Chooser対応プロダクト
 レガシーログイン(自前のEmail/PW認証)
 accountchooser.com/ac.js
 Google Identity Toolkit / JanRain Engage / OpenCart Extension Directory
 外部IdPアカウントをサポート
 accountchooser.com/ac.js
 Google Identity Toolkit / JanRain Engage
 gigya Social Login
 Ping Identity
 Microsoft Azure ACS
idcon mini Vol.1 - Account Chooser 5

Account Chooser対応プロダクト
 レガシーログイン(自前のEmail/PW認証)
 accountchooser.com/ac.js
 Google Identity Toolkit / JanRain Engage / OpenCart Extension Directory
 外部IdPアカウントをサポート
 accountchooser.com/ac.js
 Google Identity Toolkit / JanRain Engage
 gigya Social Login
 Ping Identity
 Microsoft Azure ACS
idcon mini Vol.1 - Account Chooser 6

ac.js vs 他社プロダクト
 ac.js
 アカウント保存 / アカウント選択
 外部IdPへのリダイレクト
 認証処理には関与しない
 クロスドメイン
 他社プロダクト （例 : Google Identity Toolkit）
 アカウント保存 / アカウント選択 / アカウント切り替え / ログアウト
 外部IdPサポート / 認証結果検証
 検証処理をGoogleに丸投げ
 導入するドメイン単位
idcon mini Vol.1 - Account Chooser 7

ac.js実装 : レガシーログイン
ログイン/新規登録フロー例
(1) ログインリンククリック
(2) ログイン画面
 アカウントをお持ちでない方はこ
ちらリンク
(3) 新規登録
(4) ログイン状態
idcon mini Vol.1 - Account Chooser 8

ac.js実装 : レガシーログイン
idcon mini Vol.1 - Account Chooser 9

ac.js実装 : レガシーログイン
idcon mini Vol.1 - Account Chooser 10

ac.js実装 : レガシーログイン
 ログイン後/新規登録後にアカウント保存
 accountchooser.comドメインのLocalStrage
 email/displayName/photoUrl
 ログイン時にアカウント選択画面が表示される
 選択したアカウントのemailはuserStatusURLにPOSTされ、登録済みかどうか
を受け取る
 登録済み : ログイン画面＋email補完
 未登録（他のサービスで別のemail使ってたときなど） :
新規登録画面＋email,displayName,photoUrl補完
idcon mini Vol.1 - Account Chooser 11

ac.js実装 : 外部IdPの利用
 外部IdPを利用するサイトの例
(1) Google/Twitter/Facebookなど
のIdP選択
(2) IdPで認証
(3) 初回は連絡用のemailを登録
(4) ログイン状態へ
idcon mini Vol.1 - Account Chooser 12

ac.js実装 : 外部IdPの利用
idcon mini Vol.1 - Account Chooser 13

ac.js実装 : 外部IdPの利用
idcon mini Vol.1 - Account Chooser 14

ac.js実装 : 外部IdPの利用
 IdPからの結果を処理した後にアカウント保存
 email, providerId, displayName, photoUrl
 IdP選択時にアカウント選択画面が表示される
 選択したアカウントのemail, providerIdはuserStatusURLにPOSTされ、対応IdP
かどうかを判定
 対応IdP : IdPの認証(認可)エンドポイントに送られる
 非対応IdP : IdP選択画面から
 emailの扱いはちょっと気になる（あとで）
 選択画面に表示されるIdP指定（制限）も可能
idcon mini Vol.1 - Account Chooser 15

ac.jsを用いたレガシーログインからの移行
 ac.js導入する
 アカウント保存
 サービス上でユーザーを外部IdPに紐付ける
 アカウント設定→外部IdP連携設定みたいな
 アカウント選択時にauthUriを返す
 IdPのログインに切り替えられる
細かいこと気になるけど、こんな感じで移行できそう
idcon mini Vol.1 - Account Chooser 16

思ってること
 Google Identity Toolkitよりは安全だと思っている
 JSにemail/pw入力させない
 認証結果丸投げしない
 emailからIdPが特定できるのってリスク？気にしすぎかな
 HTML見ればuserStatusUrl丸見えなのでたたきまくれる
 IdP特定→フィッシング狙うとか
 IdPがアカウント保存する方がよくね？
 RPの普及待たなくても良い
 信頼できる情報が保存される
idcon mini Vol.1 - Account Chooser 17

参考URL/スライド
 http://www.slideshare.net/matake/account-chooser-idit2012
 おしゃれスライド
 http://d.hatena.ne.jp/ritou/20120925/1348573605
 長いブログエントリ
idcon mini Vol.1 - Account Chooser 18

意見交換タイム
idcon mini Vol.1 - Account Chooser 19