ソーシャルログイン機能について、Googleログインを例に解説しているスライドです。 ソーシャルログインの仕組みを知りたい、OAuthの技術を知りたい人向けのスライドとなっています。

1. Google
ログインから学ぶ
Oauth

2. はじめに
❏ ソーシャルログインを実装したことが
ない人向け
❏ Oauth知らない人向け

3. 自己紹介
❏ Kazuma Kimura
2匹のねこ様と暮らす、システムエン
ジニア
❏ Twitter：K_Makazu

4. 目的
❏ ソーシャルログインの仕組みや、ど
んな技術が使われているのかを知っ
てもらう

5. Agenda
ソーシャルログインって何？
効果
Googleログインの仕組み

6. ソーシャルログ
インって何？
ソーシャルログインって何？
効果
Googleログインの仕組み

7. こんなボタン見たことな
いですか？

9. SNSアカウントを使って
ログイン
→ソーシャルログイン

10. 何ができるのか

11. SNSアカウント情報を
使ってユーザ登録

12. SNSアカウント情報を
使ってユーザ登録
→①クリックで登録ができ
る

13. どんなソーシャルログイ
ンボタンを設置している
かはサイトによる

14. こんなソーシャルボタン
がある

16. ソーシャルボタンを設置
してるサイト

18. 効果
ソーシャルログインって何？
効果
Googleログインの仕組み

19. 効果
・離脱率の改善＝コンバーションアップ
・ログイン頻度を高める
・パスワード再発行などの問い合わせ削減
・アカウントに紐づく個人情報の取得

20. 分析
・アカウント
・デバイス

25. 導入するには？
❏ ASPサービスを展開しているソフト
ウェアを利用
❏ SNSが展開しているSDKなどを使っ
てスクラッチ開発

26. ソーシャルログインASP
https://socialplus.jp/
https://oauth.io/

27. 仕組み
ソーシャルログインって何？
効果
Googleログインの仕組み

28. OAuthのフロー

30. とりあえず作る！
Googleアカウント情報
を取得してみる

31. まずはGoogleさんにプ
ロジェクト登録

33. 認証情報を設定

35. OAuth同意画面の設
定

37. 準備は終了

38. リクエストの流れ

39. 認証
https://accounts.google.com/o/oauth2/v2/auth?
->scope=https://www.googleapis.com/auth/userin
fo.profile&
->redirect_uri={承認済みのリダイレクトURI}&
->response_type=code&
->client_id={クライアントID}

40. トークン取得
POST /oauth2/v4/token HTTP/1.1
Host: www.googleapis.com
Content-Type: application/x-www-form-urlencoded
->code={認証で返却されたCode}&
->client_id={クライアントID}&
->client_secret={クライアント シークレット}&
->redirect_uri={承認済みのリダイレクトURI}&
->grant_type=authorization_code

41. APIのCall
https://www.googleapis.com/oauth2/v3/userinfo?
->access_token={取得したトークン}

42. 取得できる情報
Google 氏名、ニックネーム、メールアドレス、プロフィール写真、住所 etc...
Facebook
氏名、性別、血液型、誕生日、メールアドレス、住所、写真、 興味・関心、職歴、
学歴、地域、友達リスト etc...
Twitter
氏名、ニックネーム、メールアドレス、プロフィール写真、フォローリスト、フォロ
ワーリスト etc...
他のSNSだとこんなのが取れる

43. OAuthは分かったので
実際にサイトで使われて
いるソーシャルログイン
のフローを見ていく

44. Oauth

45. ポイント
❏ 新規ユーザの場合は自サイトのユーザ登録
の入力補完として使う
❏ ユーザ登録している場合はSNSアカウントと
の紐づけをする
❏ 上記が網羅されていたらワンクリックログイン
する事ができる

46. 紐づけする理由
❏ 結局のところサイト側のユーザIDを使ったシ
ステム制御(パーソナライズとか)したいとか、
ユーザの情報として足りなかったりする

47. まとめ

48. SNSをやっているのが
当たり前の時代になって
いるのでソーシャルログ
インはつけたほうがいい
と思う

49. ソーシャルログインだけ
でなく、SNS情報を扱う
上でOAuthは使う事に
なると思うので覚えとくと
いいかも

50. ご静聴ありがとうございました