俺が考えた最強のID連携デザインパターン

5,124 views

Published on

DevLove現場甲子園2014東日本大会 on Aug. 23, 2014

Published in: Internet

俺が考えた最強のID連携デザインパターン

  1. 1. 俺が考えた最強のID連携 デザインパターン 2014/08/23 OpenIDファウンデーション・ジャパン 倉林雅
  2. 2. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. 倉林 雅(通称: kura) ! OpenID ファウンデーション・ジャパン エバンジェリスト ! ヤフー株式会社 IDサービス エンジニア ! ID厨 @kura_lab
  3. 3. Copyright 2013 OpenID Foundation Japan - All Rights Reserved. ユーザーにとって
 わかりやすいID連携してますか? click click by Tim Franklin Photography
  4. 4. click click by Tim Franklin Photography
  5. 5. click click by Tim Franklin Photography まずはトップページでFacebookログイン
  6. 6. click click by Tim Franklin Photography
  7. 7. click click by Tim Franklin Photography あとで使うかもしれないから Permissionはとれるだけ取っておこう
  8. 8. click click by Tim Franklin Photography 本当にこのID連携でいいのでしょうか?
  9. 9. そもそもID連携って何? Question Mark Block by Jared Cherup
  10. 10. (090/365) January 22, 2010: Can't stop the music by Jason Alley ID連携 異なる組織間でユーザのIDデータを連携し サービスの質の向上を図る仕組みのこと 経済産業省 ID連携トラストフレームワークより引用 http://www.meti.go.jp/policy/it_policy/id_renkei/
  11. 11. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. 認証 API認可 ID連携
  12. 12. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. アプリケーション Webサイト ネイティブアプリ
  13. 13. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. 連携パターン 新規登録 既存IDへのひもづけ シェア・いいね
  14. 14. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. 認証 API認可 Webサイト ネイティブアプリ 新規登録 既存IDへのひもづけ シェア いいね
  15. 15. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ネイティブアプリ シェア いいね 認証 API認可 Webサイト 新規登録 既存IDへのひもづけ
  16. 16. ID連携のトレンド Web Trend Map 4 (Detail) / 20090914.10D.53870.P1 / SML by See-ming Lee
  17. 17. OAuth?OpenID?
  18. 18. ♥ OpenID Connect OAuth 2.0 + Identity Layer
  19. 19. 2014.2.26 OpenID Connect 1.0 Launch!! Nate and Birthday Cake (2 of 5) by Chris Pencis
  20. 20. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. OpenID Connectをつかった ユーザーにとって
 よりよいID連携の
 UI/UXを考えてみました
  21. 21. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. 属性情報のプリセット シングルサインオン 新規登録 Day 207: I've Contracted An Agreement by Juli
  22. 22. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. 属性情報のプリセット Day 207: I've Contracted An Agreement by Juli
  23. 23. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ID連携前 新規登録 トップ ログイン 登録 氏名 メールアドレス 登録フォーム コンテンツ
  24. 24. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ID連携後 新規登録 トップ ログイン 登録 氏名 メールアドレス 登録フォーム コンテンツ 入力補助 同意ログイン ID パスワード 属性情報
 提供 Y!ログイン Y!同意画面
  25. 25. ポイント • フォーム入力の補助であることを明示的に すること • Permissionは必要な属性情報だけとること (090/365) January 22, 2010: Can't stop the music by Jason Alley
  26. 26. クライアントサイド Implicit フロー
  27. 27. 入力補助ボタン押下
  28. 28. JavaScriptでUserInfo APIにリクエストして
 結果をプリセット
  29. 29. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. AuthZ リクエストサンプル HTTP/1.1 302 Found Location: https://auth.login.yahoo.co.jp/yconnect/ v1/authorization? response_type=token& client_id=YOUR_APPLICATION_ID& redirect_uri=http%3A%2F%2Fexample.com%2Fcb& state=abc& scope=profile+email
  30. 30. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. AuthZ レスポンスサンプル HTTP/1.1 200 OK Content-Type: application/json ! { access_token": 2OBRckZjTT5a3aKD…(中略)… mT1oULUNOuUlw3 , token_type": "bearer", expire_in": 3600, "state": "abc", }
  31. 31. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. UserInfo API リクエストサンプル GET /yconnect/v1/attribute?schema=openid HTTP/1.1 Host: userinfo.yahooapis.jp Authorization: Bearer 2OBRckZjTT5a3aKD…(中略)… mT1oULUNOuUlw3
  32. 32. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. UserInfo API レスポンスサンプル HTTP/1.1 200 OK Content-Type: application/json ! { "user_id": "43M63NAGMHBAYMXRMY3WODOWS4", "name": "矢風太郎", "given_name": "太郎", "given_name#ja-Kana-JP": "タロウ", "given_name#ja-Hani-JP": "太郎", "family_name": "矢風", "family_name#ja-Kana-JP": "ヤフウ", "family_name#ja-Hani-JP": "矢風", "gender": "male", "birthday": "2000", "locale": "ja-JP", "email": "your_email@example.com", "email_verified": true, }
  33. 33. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. シングルサインオン Day 207: I've Contracted An Agreement by Juli
  34. 34. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ID連携前 トップ ログイン コンテンツ メールアドレス パスワード
  35. 35. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ID連携後 ログイン ID パスワード ログイン メールアドレス パスワード Y!ログイン 同意 ユーザー識別子 提供 トップ Y!ログイン コンテンツ Y!同意画面
  36. 36. ポイント • コンテキストにそっていれば説明は不要 • コンテキストが伝わりにくい場合には • チュートリアルや説明をいれること (090/365) January 22, 2010: Can't stop the music by Jason Alley
  37. 37. サーバーサイド Authorization Code フロー
  38. 38. Y!ログインボタン押下
  39. 39. IDトークンを取得して 認証を検証
  40. 40. UserInfo APIでユーザー 識別子を取得して DBにひもづける
  41. 41. 実装上の注意 メールアドレスをキーにアカウントを管理 する場合、UserInfo APIで取得したメール アドレスが変更される場合があるためログ インできなくなる可能性あり (090/365) January 22, 2010: Can't stop the music by Jason Alley
  42. 42. ID連携によるアカウントの管理 一意な識別子(user_id)を使うべき
  43. 43. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. シングルサインオンへの移行 複数のSNSへ投稿 既存IDへのひもづけ
  44. 44. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. シングルサインオンへの移行
  45. 45. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ID連携前 アカウント設定コンテンツ プロフィール パスワード変更 設定
  46. 46. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ID連携後 アカウント設定コンテンツ プロフィール パスワード変更 設定 Y!SSOへ移行 ログイン ID パスワード Y!ログイン 同意 ユーザー識別子 提供 Y!同意画面
  47. 47. ポイント • 設定画面等で移行について説明し移行後 の既存のID、パスワードの方針を明確に するとよい (090/365) January 22, 2010: Can't stop the music by Jason Alley
  48. 48. サーバーサイド Authorization Code フロー
  49. 49. Y!同意画面
  50. 50. Y!同意画面 UserInfo APIでユーザー 識別子を取得して DBにひもづける
  51. 51. 実装上のポイント・注意 既存のアカウントにユーザー識別子を ひもづけ、シングルサインオン時に ユーザー識別子をひいてくる 新規SSO同様メールアドレスの ひもづけには注意 (090/365) January 22, 2010: Can't stop the music by Jason Alley
  52. 52. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. 複数のSNSへ投稿
  53. 53. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ID連携前 投稿機能 投稿 質問
  54. 54. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ID連携後 アカウント設定 プロフィール パスワード変更 連携解除 Y!ログイン 同意 投稿API 提供 Y!同意画面投稿機能 投稿 質問 Y!知恵袋連携 ログイン ID パスワード
  55. 55. ポイント • 投稿時など本当に連携が必要になったタ イミングで同意をとる • 複数アカウントを使っている可能性があ るときには切り換え機能があるとよい • 連携解除ができること (090/365) January 22, 2010: Can't stop the music by Jason Alley
  56. 56. サーバーサイド Authorization Code フロー
  57. 57. Y!知恵袋ボタン押下
  58. 58. 必要に応じてprompt=login(強制ログイン) またはselect_account(ID切り換え)を指定して ユーザーが好きなIDを連携できるようにする
  59. 59. Y!知恵袋投稿APIに リクエスト
  60. 60. Copyright 2014 OpenID Foundation Japan - All Rights Reserved. ポイントのおさらい • Permissionは必要な属性情報だけとること • コンテキストが伝わりにくい場合にはチュー トリアルや説明をいれること • 連携が必要になったタイミングで同意をと ること • 複数アカウントを使っている可能性がある ときには切り換え機能があるとよい • 連携解除ができるとよい
  61. 61. ぜひユーザーの視点にたって
 よりよいID連携の方法を
 考えてみてはいかかでしょうか 254/365: X marks the spot by Addison Berry
  62. 62. ご清聴ありがとう ございました

×