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

俺が考えた最強のID連携
デザインパターン
2014/08/23
OpenIDファウンデーション・ジャパン
倉林雅

Copyright 2014 OpenID Foundation Japan - All Rights Reserved.
倉林雅（通称: kura）
!
OpenID ファウンデーション・ジャパン
エバンジェリスト
!
ヤフー株式会社 IDサービス
エンジニア
!
ID厨
@kura_lab

ユーザーにとって 
わかりやすいID連携してますか？
click click by Tim Franklin Photography

まずはトップページでFacebookログイン

あとで使うかもしれないから
Permissionはとれるだけ取っておこう

本当にこのID連携でいいのでしょうか？

そもそもID連携って何？
Question Mark Block by Jared Cherup

(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/

認証 API認可
ID連携

アプリケーション
Webサイトネイティブアプリ

連携パターン
新規登録
既存IDへのひもづけ
シェア・いいね

認証 API認可
Webサイトネイティブアプリ
新規登録既存IDへのひもづけ
シェア
いいね

ネイティブアプリ
シェア
いいね
認証 API認可
Webサイト
新規登録既存IDへのひもづけ

ID連携のトレンド
Web Trend Map 4 (Detail) / 20090914.10D.53870.P1 / SML by See-ming Lee

♥
OpenID Connect
OAuth 2.0 + Identity Layer

2014.2.26

OpenID Connect 1.0

Launch!!
Nate and Birthday Cake (2 of 5) by Chris Pencis

OpenID Connectをつかった
ユーザーにとって 
よりよいID連携の 
UI/UXを考えてみました

属性情報のプリセット
シングルサインオン
新規登録
Day 207: I've Contracted An Agreement by Juli

属性情報のプリセット

ID連携前
新規登録
トップ
ログイン
登録
氏名
メールアドレス
登録フォームコンテンツ

ID連携後
新規登録
トップ
ログイン
登録
氏名
登録フォームコンテンツ
入力補助
同意ログイン
ID
パスワード
属性情報 
提供
Y!ログイン Y!同意画面

ポイント
• フォーム入力の補助であることを明示的に
すること
• Permissionは必要な属性情報だけとること

クライアントサイド
Implicit フロー

JavaScriptでUserInfo
APIにリクエストして 
結果をプリセット

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=proﬁle+email

AuthZ レスポンスサンプル
HTTP/1.1 200 OK
Content-Type: application/json
!
{
access_token": 2OBRckZjTT5a3aKD…(中略)…
mT1oULUNOuUlw3 ,
token_type": "bearer",
expire_in": 3600,
"state": "abc",
}

UserInfo API リクエストサンプル
GET /yconnect/v1/attribute?schema=openid HTTP/1.1
Host: userinfo.yahooapis.jp
Authorization: Bearer 2OBRckZjTT5a3aKD…(中略)…
mT1oULUNOuUlw3

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_veriﬁed": true,
}

シングルサインオン

ID連携前
トップ
ログイン
コンテンツ
パスワード

ID連携後
ログイン
ID
パスワード
ログイン
パスワード
Y!ログイン
同意
ユーザー識別子
提供
トップ Y!ログインコンテンツ
Y!同意画面

ポイント
• コンテキストにそっていれば説明は不要
• コンテキストが伝わりにくい場合には
• チュートリアルや説明をいれること

サーバーサイド
Authorization Code フロー

IDトークンを取得して
認証を検証

UserInfo APIでユーザー
識別子を取得して
DBにひもづける

実装上の注意
メールアドレスをキーにアカウントを管理
する場合、UserInfo APIで取得したメール
アドレスが変更される場合があるためログ
インできなくなる可能性あり

ID連携によるアカウントの管理

一意な識別子（user_id）を使うべき

シングルサインオンへの移行
複数のSNSへ投稿
既存IDへのひもづけ

シングルサインオンへの移行

ID連携前
アカウント設定コンテンツ
プロフィール
パスワード変更
設定

ID連携後
アカウント設定コンテンツ
プロフィール
設定
Y!SSOへ移行
ログイン
ID
パスワード
Y!ログイン
同意
ユーザー識別子
提供
Y!同意画面

ポイント
• 設定画面等で移行について説明し移行後
の既存のID、パスワードの方針を明確に
するとよい

Y!同意画面
UserInfo APIでユーザー
識別子を取得して
DBにひもづける

実装上のポイント・注意
既存のアカウントにユーザー識別子を
ひもづけ、シングルサインオン時に
ユーザー識別子をひいてくる
新規SSO同様メールアドレスの
ひもづけには注意

複数のSNSへ投稿

ID連携前
投稿機能
投稿
質問

ID連携後
アカウント設定
プロフィール
連携解除
Y!ログイン
同意
投稿API
提供
Y!同意画面投稿機能
投稿
質問
Y!知恵袋連携
ログイン
ID
パスワード

ポイント
• 投稿時など本当に連携が必要になったタ
イミングで同意をとる
• 複数アカウントを使っている可能性があ
るときには切り換え機能があるとよい
• 連携解除ができること

必要に応じてprompt=login（強制ログイン）
またはselect_account（ID切り換え）を指定して
ユーザーが好きなIDを連携できるようにする

Y!知恵袋投稿APIに
リクエスト

ポイントのおさらい
• Permissionは必要な属性情報だけとること
• コンテキストが伝わりにくい場合にはチュー
トリアルや説明をいれること
• 連携が必要になったタイミングで同意をと
ること
• 複数アカウントを使っている可能性がある
ときには切り換え機能があるとよい
• 連携解除ができるとよい

ぜひユーザーの視点にたって 
よりよいID連携の方法を 
考えてみてはいかかでしょうか
254/365: X marks the spot by Addison Berry

ご清聴ありがとう
ございました

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

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

Similar to 俺が考えた最強のID連携デザインパターン (20)

More from Masaru Kurahayashi

More from Masaru Kurahayashi (6)

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