SlideShare una empresa de Scribd logo
1 de 23
Hybrid Onboardingとは何か〜省ステップのユーザ登録と安全なユーザ認証の実現〜 KousukeEbihara  <ebihara@tejimaya.com>
 本日は世界中で大注目を浴びている新技術、「Hybrid Onboarding」について解説します。  今更聞けない Hybrid Onboardingのキホンから、技術的な基盤、OpenPNEではどうするかということについてお話しします。
Hybrid Onboardingとは Google 先生に聞いてみた (2009/11/09 現在) !?
Hybrid Onboardingとは Google が 2009/11/03 に発表したユーザ登録・認証の仕様http://googlecode.blogspot.com/2009/11/hybrid-onboarding.html OpenID, OAuth, Portable Contacts API を組み合わせて活用することで実現される Plaxo, Facebook, Yahoo! でも利用されている
Hybrid Onboardingを使うとどうなるか ユーザの登録率を改善することができる 登録のために必要なプロセスが減る 登録率を 90 % まで上昇させることができたらしい メールアドレスの存在チェックのための確認メールが不要になる サイトの実装によっては登録後、最初にユーザを捜し回ってフレンド関係になる手間が省ける OpenIDなど活用している技術の恩恵をそのまま受けられる(パスワード入力が不要になりセキュリティ上好ましくなるなど)
Hybrid Onboardingを体感してみる OpenPNE3 で実現してみようと頑張ったけど 5 時間近くOAuthの署名周りでハマってしまった 普通にライブラリ経由で署名付きのリクエストをしているだけなのだが…… http://oauth.googlecode.com/svn/code/php/のライブラリが更新止まってるのでバグ抱えてる可能性もあるかもしれない もしくは Google のOAuth周りでなにかあるのか ※素のOAuthとほとんど変わらないので特に難しいことはないはずなのだが
Hybrid Onboardingを体感してみる ということで…… http://www.plaxo.com/signinで試してみてください(まずは「Google アカウントでサインイン」を選んで登録してみよう!)
Hybrid Onboardingを体感してみる ということで…… http://www.plaxo.com/signinで試してみてください(まずは「Google アカウントでサインイン」を選んで登録してみよう!)
Hybrid Onboardingを体感してみる tejimaya.net (Google Apps) の Gmail を使っているユーザ専用の SNS を作った OpenPNE 3.1.5-dev ベース ログイン・ユーザ登録周りはopAuthOpenIDPluginを魔改造したものを使用 OAuthのサポートを追加 コンタクト情報周りの追加 プロフィール情報交換周りは OpenPNE3 のプロフィール交換の仕組みを Google 向けに魔改造したものを使用 http://hybrid-onboarding.ebihara.dazai.pne.jp/ ※手嶋屋の IP からしかアクセスできません
Hybrid Onboardingを体感してみる メニューから Connection を選択
Hybrid Onboardingを体感してみる なにがどうなったか ボタンをクリックするだけでログインできるようになった OpenIDのおかげ メールアドレスを入力したり確認メールを受け取らなくても、サイトにメールアドレスが登録された OpenID AX のおかげ メールアドレスに紐付いた連絡先リストが自動的にサイトに登録された OAuth (OpenIDOAuth Extension) と Portable Contacts API のおかげ
OpenIDについて復習 一つのサイトのOpenIDを使って、他サイトの認証をおこなうことができる技術 OpenID 2.0 から Discovery がサポートされるなどOpenIDを意識せずに利用できるようになっている 拡張プロトコルを用いることで、認証技術に付随したサービスなどを提供することができる 属性交換 OpenID Simple Registration Extension (SREG) OpenID Attribute Exchange (AX) OP の信頼度の明示 OpenIDProvider Authentication Policy Extension (PAPE)
OAuthについて復習 認証が必要とされるサイトの API を外部アプリケーションから安全に利用するための技術 「ある利用者」から許可された外部アプリケーションが、アクセス用のトークンを使って API にアクセスする 外部アプリケーションはあらかじめサイトに申請などの手続きを経て登録する必要がある ID/パスワードの情報を信頼できないアプリケーションに預ける必要がない 外部アプリケーションが不正に情報を使用した場合にも、トークンを無効にすることで被害の拡大を防ぐことができる
OAuthについて復習 http://www.openpne.jp/wp-content/uploads/2009/09/oauth_flow_ja.png
Portable Contacts API http://code.google.com/intl/ja/apis/contacts/ 連絡先リストのためのオープンな仕様 Gmail の連絡先リストはこの API を介して入手できる Open Social でも活用する方向で進んでる? データを入手するためにはOAuthによる認証が必要
Hybrid Onboardingのフロー ユーザはOpenIDと Contacts API を提供するメールプロバイダに対してOpenID経由でログインするためのボタンをクリック OpenIDプロトコル経由でメールアドレスをサイトに伝達する 連絡先リストにアクセスするためにOpenIDのOAuth Extension を使ってアクセストークンを入手し、 Portable Contacts API を叩く OpenIDやOAuthを活用して入手できた情報に基づいてユーザ登録 連絡先リストに基づいてソーシャルグラフの構築(もしくはソーシャルグラフの構築を促す情報の構築) ->OpenIDとOAuthが同時に使えることによるメリットが大きい(登録後もアクティビティの共有などに活用できる)
OpenIDOAuth Extension http://step2.googlecode.com/svn/spec/openid_oauth_extension/latest/openid_oauth_extension.html OpenIDの認証とOAuthの認可のユーザ体験は似ている -> OpenIDの認証画面にOAuthの認可画面を統合 ユーザにはOpenIDの認証画面のなかで、サービスがOAuthを利用して特定の API にアクセスすることを承諾してもらう(Plaxoで Google のOpenIDを使う場合、属性交換(メールアドレス)とOAuth経由の API アクセス(連絡先リスト)の許可を同時に得る UI になっている)
OpenIDOAuth Extension
OpenIDOAuth Extension OpenIDの認証画面で許可を得た場合、OAuthでの認可と同等の権限を得たと見なし、OP から RP に戻ってきたときにいきなり認可済みのリクエストトークンを渡す OP から渡されたリクエストトークンからアクセストークンを入手し、 API にアクセスできるようになる
OpenIDOAuth Extension 不要 OpenID認証で代替
OpenIDOAuth Extension 対応方法 (OpenID認証時) http://specs.openid.net/extensions/oauth/1.0というネームスペースを指定する openid.oauth.consumerにコンシューマーキーを指定する openid.oauth.scopeにOAuthでアクセスしたい API の識別子を指定
OpenIDOAuth Extension 対応方法 (OpenID認証後) openid.oauth.request_tokenとコンシューマキー、コンシューマシークレットを元に署名を生成し、アクセストークン取得用URLにリクエスト 取得できたアクセストークンを使って API にアクセス
Hybrid OnboardingとOpenPNE OpenPNEで作られた複数の SNS 間の連携が実現しやすくなる これだけでもかなりのメリットでは? 最低限の対応はすぐにできそう OpenIDもOAuthも対応済み WebAPIの仕組みを使って連絡先リストの API を実装すればよい OAuth Extension はすごく簡単だった Hybrid Onboardingを生かす機能を実装しないと面白くない フォロー アクティビティ OpenIDのログイン時にOpenIDを入力させないようにしたりとか、フィッシング対策を今以上にやるとか、連携を使ってもらいやすくするための対応はもちろんやらなければいけない 対応可能な時期は……来年春頃かな……

Más contenido relacionado

Destacado

OAuthで気持ちのいい アクセス制御を
OAuthで気持ちのいいアクセス制御をOAuthで気持ちのいいアクセス制御を
OAuthで気持ちのいい アクセス制御をKousuke Ebihara
 
お前は PHP の歴史的な理由の数を覚えているのか
お前は PHP の歴史的な理由の数を覚えているのかお前は PHP の歴史的な理由の数を覚えているのか
お前は PHP の歴史的な理由の数を覚えているのかKousuke Ebihara
 
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...Kousuke Ebihara
 
This is England powerpoint
This is England powerpointThis is England powerpoint
This is England powerpointAngela Pearson
 
Lock stock presentation
Lock stock presentationLock stock presentation
Lock stock presentationAngela Pearson
 

Destacado (8)

OAuthで気持ちのいい アクセス制御を
OAuthで気持ちのいいアクセス制御をOAuthで気持ちのいいアクセス制御を
OAuthで気持ちのいい アクセス制御を
 
お前は PHP の歴史的な理由の数を覚えているのか
お前は PHP の歴史的な理由の数を覚えているのかお前は PHP の歴史的な理由の数を覚えているのか
お前は PHP の歴史的な理由の数を覚えているのか
 
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
XML と PHP のイケナイ関係 (セキュリティ的な意味で) -Introduction of XXE attack and XML Bomb with...
 
Bullet boy
Bullet boy Bullet boy
Bullet boy
 
Bullet boy
Bullet boyBullet boy
Bullet boy
 
Bullet boy slide
Bullet boy slideBullet boy slide
Bullet boy slide
 
This is England powerpoint
This is England powerpointThis is England powerpoint
This is England powerpoint
 
Lock stock presentation
Lock stock presentationLock stock presentation
Lock stock presentation
 

Similar a Hybrid Onboarding

Google+APIをさわってみる。
Google+APIをさわってみる。Google+APIをさわってみる。
Google+APIをさわってみる。Hiroyuki Nozaki
 
Cloud Identity Summit 2012 TOI
Cloud Identity Summit 2012 TOICloud Identity Summit 2012 TOI
Cloud Identity Summit 2012 TOITatsuo Kudo
 
初めてのAuth0ハンズオン
初めてのAuth0ハンズオン初めてのAuth0ハンズオン
初めてのAuth0ハンズオンHisashi Yamaguchi
 
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかたオフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかたShumpei Shiraishi
 
2014年 日本のコンバージョンニュース
2014年 日本のコンバージョンニュース2014年 日本のコンバージョンニュース
2014年 日本のコンバージョンニュースSatoru Yamamoto
 
Hybrid appmeetssecurity kdl20171017-20
Hybrid appmeetssecurity kdl20171017-20Hybrid appmeetssecurity kdl20171017-20
Hybrid appmeetssecurity kdl20171017-20龍弘 岡
 
[Service worker] プッシュ通知の使い方
[Service worker] プッシュ通知の使い方[Service worker] プッシュ通知の使い方
[Service worker] プッシュ通知の使い方Van Trung Phan
 
DroidKaigi 2018 - Dialogflow for Android
DroidKaigi 2018 - Dialogflow for AndroidDroidKaigi 2018 - Dialogflow for Android
DroidKaigi 2018 - Dialogflow for AndroidSENSY Inc
 
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモhtml5とcss3実例紹介とデモ
html5とcss3実例紹介とデモAkihiro Sugiyama
 
私の考える Startup Geeks
私の考える Startup Geeks私の考える Startup Geeks
私の考える Startup GeeksKiminari Homma
 
Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809Ryu Shindo
 
Algolia introduction in Kanazawa - July 2019
Algolia introduction in Kanazawa - July 2019Algolia introduction in Kanazawa - July 2019
Algolia introduction in Kanazawa - July 2019Eiji Shinohara
 
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろうMitsuo Kawashima
 

Similar a Hybrid Onboarding (17)

Google+APIをさわってみる。
Google+APIをさわってみる。Google+APIをさわってみる。
Google+APIをさわってみる。
 
20141111 明日の認証会議資料(寺田)
20141111 明日の認証会議資料(寺田)20141111 明日の認証会議資料(寺田)
20141111 明日の認証会議資料(寺田)
 
Cloud Identity Summit 2012 TOI
Cloud Identity Summit 2012 TOICloud Identity Summit 2012 TOI
Cloud Identity Summit 2012 TOI
 
HTML5 のお話
HTML5 のお話HTML5 のお話
HTML5 のお話
 
11.9 bkclt
11.9 bkclt11.9 bkclt
11.9 bkclt
 
初めてのAuth0ハンズオン
初めてのAuth0ハンズオン初めてのAuth0ハンズオン
初めてのAuth0ハンズオン
 
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかたオフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
 
20141002 明日の認証会議資料(寺田)(配布用)
20141002 明日の認証会議資料(寺田)(配布用)20141002 明日の認証会議資料(寺田)(配布用)
20141002 明日の認証会議資料(寺田)(配布用)
 
2014年 日本のコンバージョンニュース
2014年 日本のコンバージョンニュース2014年 日本のコンバージョンニュース
2014年 日本のコンバージョンニュース
 
Hybrid appmeetssecurity kdl20171017-20
Hybrid appmeetssecurity kdl20171017-20Hybrid appmeetssecurity kdl20171017-20
Hybrid appmeetssecurity kdl20171017-20
 
[Service worker] プッシュ通知の使い方
[Service worker] プッシュ通知の使い方[Service worker] プッシュ通知の使い方
[Service worker] プッシュ通知の使い方
 
DroidKaigi 2018 - Dialogflow for Android
DroidKaigi 2018 - Dialogflow for AndroidDroidKaigi 2018 - Dialogflow for Android
DroidKaigi 2018 - Dialogflow for Android
 
html5とcss3実例紹介とデモ
html5とcss3実例紹介とデモhtml5とcss3実例紹介とデモ
html5とcss3実例紹介とデモ
 
私の考える Startup Geeks
私の考える Startup Geeks私の考える Startup Geeks
私の考える Startup Geeks
 
Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809
 
Algolia introduction in Kanazawa - July 2019
Algolia introduction in Kanazawa - July 2019Algolia introduction in Kanazawa - July 2019
Algolia introduction in Kanazawa - July 2019
 
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
 

Hybrid Onboarding

  • 2.  本日は世界中で大注目を浴びている新技術、「Hybrid Onboarding」について解説します。  今更聞けない Hybrid Onboardingのキホンから、技術的な基盤、OpenPNEではどうするかということについてお話しします。
  • 3. Hybrid Onboardingとは Google 先生に聞いてみた (2009/11/09 現在) !?
  • 4. Hybrid Onboardingとは Google が 2009/11/03 に発表したユーザ登録・認証の仕様http://googlecode.blogspot.com/2009/11/hybrid-onboarding.html OpenID, OAuth, Portable Contacts API を組み合わせて活用することで実現される Plaxo, Facebook, Yahoo! でも利用されている
  • 5. Hybrid Onboardingを使うとどうなるか ユーザの登録率を改善することができる 登録のために必要なプロセスが減る 登録率を 90 % まで上昇させることができたらしい メールアドレスの存在チェックのための確認メールが不要になる サイトの実装によっては登録後、最初にユーザを捜し回ってフレンド関係になる手間が省ける OpenIDなど活用している技術の恩恵をそのまま受けられる(パスワード入力が不要になりセキュリティ上好ましくなるなど)
  • 6. Hybrid Onboardingを体感してみる OpenPNE3 で実現してみようと頑張ったけど 5 時間近くOAuthの署名周りでハマってしまった 普通にライブラリ経由で署名付きのリクエストをしているだけなのだが…… http://oauth.googlecode.com/svn/code/php/のライブラリが更新止まってるのでバグ抱えてる可能性もあるかもしれない もしくは Google のOAuth周りでなにかあるのか ※素のOAuthとほとんど変わらないので特に難しいことはないはずなのだが
  • 7. Hybrid Onboardingを体感してみる ということで…… http://www.plaxo.com/signinで試してみてください(まずは「Google アカウントでサインイン」を選んで登録してみよう!)
  • 8. Hybrid Onboardingを体感してみる ということで…… http://www.plaxo.com/signinで試してみてください(まずは「Google アカウントでサインイン」を選んで登録してみよう!)
  • 9. Hybrid Onboardingを体感してみる tejimaya.net (Google Apps) の Gmail を使っているユーザ専用の SNS を作った OpenPNE 3.1.5-dev ベース ログイン・ユーザ登録周りはopAuthOpenIDPluginを魔改造したものを使用 OAuthのサポートを追加 コンタクト情報周りの追加 プロフィール情報交換周りは OpenPNE3 のプロフィール交換の仕組みを Google 向けに魔改造したものを使用 http://hybrid-onboarding.ebihara.dazai.pne.jp/ ※手嶋屋の IP からしかアクセスできません
  • 11. Hybrid Onboardingを体感してみる なにがどうなったか ボタンをクリックするだけでログインできるようになった OpenIDのおかげ メールアドレスを入力したり確認メールを受け取らなくても、サイトにメールアドレスが登録された OpenID AX のおかげ メールアドレスに紐付いた連絡先リストが自動的にサイトに登録された OAuth (OpenIDOAuth Extension) と Portable Contacts API のおかげ
  • 12. OpenIDについて復習 一つのサイトのOpenIDを使って、他サイトの認証をおこなうことができる技術 OpenID 2.0 から Discovery がサポートされるなどOpenIDを意識せずに利用できるようになっている 拡張プロトコルを用いることで、認証技術に付随したサービスなどを提供することができる 属性交換 OpenID Simple Registration Extension (SREG) OpenID Attribute Exchange (AX) OP の信頼度の明示 OpenIDProvider Authentication Policy Extension (PAPE)
  • 13. OAuthについて復習 認証が必要とされるサイトの API を外部アプリケーションから安全に利用するための技術 「ある利用者」から許可された外部アプリケーションが、アクセス用のトークンを使って API にアクセスする 外部アプリケーションはあらかじめサイトに申請などの手続きを経て登録する必要がある ID/パスワードの情報を信頼できないアプリケーションに預ける必要がない 外部アプリケーションが不正に情報を使用した場合にも、トークンを無効にすることで被害の拡大を防ぐことができる
  • 15. Portable Contacts API http://code.google.com/intl/ja/apis/contacts/ 連絡先リストのためのオープンな仕様 Gmail の連絡先リストはこの API を介して入手できる Open Social でも活用する方向で進んでる? データを入手するためにはOAuthによる認証が必要
  • 16. Hybrid Onboardingのフロー ユーザはOpenIDと Contacts API を提供するメールプロバイダに対してOpenID経由でログインするためのボタンをクリック OpenIDプロトコル経由でメールアドレスをサイトに伝達する 連絡先リストにアクセスするためにOpenIDのOAuth Extension を使ってアクセストークンを入手し、 Portable Contacts API を叩く OpenIDやOAuthを活用して入手できた情報に基づいてユーザ登録 連絡先リストに基づいてソーシャルグラフの構築(もしくはソーシャルグラフの構築を促す情報の構築) ->OpenIDとOAuthが同時に使えることによるメリットが大きい(登録後もアクティビティの共有などに活用できる)
  • 17. OpenIDOAuth Extension http://step2.googlecode.com/svn/spec/openid_oauth_extension/latest/openid_oauth_extension.html OpenIDの認証とOAuthの認可のユーザ体験は似ている -> OpenIDの認証画面にOAuthの認可画面を統合 ユーザにはOpenIDの認証画面のなかで、サービスがOAuthを利用して特定の API にアクセスすることを承諾してもらう(Plaxoで Google のOpenIDを使う場合、属性交換(メールアドレス)とOAuth経由の API アクセス(連絡先リスト)の許可を同時に得る UI になっている)
  • 19. OpenIDOAuth Extension OpenIDの認証画面で許可を得た場合、OAuthでの認可と同等の権限を得たと見なし、OP から RP に戻ってきたときにいきなり認可済みのリクエストトークンを渡す OP から渡されたリクエストトークンからアクセストークンを入手し、 API にアクセスできるようになる
  • 20. OpenIDOAuth Extension 不要 OpenID認証で代替
  • 21. OpenIDOAuth Extension 対応方法 (OpenID認証時) http://specs.openid.net/extensions/oauth/1.0というネームスペースを指定する openid.oauth.consumerにコンシューマーキーを指定する openid.oauth.scopeにOAuthでアクセスしたい API の識別子を指定
  • 22. OpenIDOAuth Extension 対応方法 (OpenID認証後) openid.oauth.request_tokenとコンシューマキー、コンシューマシークレットを元に署名を生成し、アクセストークン取得用URLにリクエスト 取得できたアクセストークンを使って API にアクセス
  • 23. Hybrid OnboardingとOpenPNE OpenPNEで作られた複数の SNS 間の連携が実現しやすくなる これだけでもかなりのメリットでは? 最低限の対応はすぐにできそう OpenIDもOAuthも対応済み WebAPIの仕組みを使って連絡先リストの API を実装すればよい OAuth Extension はすごく簡単だった Hybrid Onboardingを生かす機能を実装しないと面白くない フォロー アクティビティ OpenIDのログイン時にOpenIDを入力させないようにしたりとか、フィッシング対策を今以上にやるとか、連携を使ってもらいやすくするための対応はもちろんやらなければいけない 対応可能な時期は……来年春頃かな……