Google
ログインから学ぶ
Oauth
はじめに
❏ ソーシャルログインを実装したことが
ない人向け
❏ Oauth知らない人向け
自己紹介
❏ Kazuma Kimura
2匹のねこ様と暮らす、システムエン
ジニア
❏ Twitter:K_Makazu
目的
❏ ソーシャルログインの仕組みや、ど
んな技術が使われているのかを知っ
てもらう
Agenda
ソーシャルログインって何?
効果
Googleログインの仕組み
ソーシャルログ
インって何?
ソーシャルログインって何?
効果
Googleログインの仕組み
こんなボタン見たことな
いですか?
SNSアカウントを使って
ログイン
→ソーシャルログイン
何ができるのか
SNSアカウント情報を
使ってユーザ登録
SNSアカウント情報を
使ってユーザ登録
→①クリックで登録ができ
る
どんなソーシャルログイ
ンボタンを設置している
かはサイトによる
こんなソーシャルボタン
がある
ソーシャルボタンを設置
してるサイト
効果
ソーシャルログインって何?
効果
Googleログインの仕組み
効果
・離脱率の改善=コンバーションアップ
・ログイン頻度を高める
・パスワード再発行などの問い合わせ削減
・アカウントに紐づく個人情報の取得
分析
 ・アカウント
 ・デバイス
導入するには?
❏ ASPサービスを展開しているソフト
ウェアを利用
❏ SNSが展開しているSDKなどを使っ
てスクラッチ開発
ソーシャルログインASP
 https://socialplus.jp/
 https://oauth.io/
仕組み
ソーシャルログインって何?
効果
Googleログインの仕組み
OAuthのフロー
とりあえず作る!
Googleアカウント情報
を取得してみる
まずはGoogleさんにプ
ロジェクト登録
認証情報を設定
OAuth同意画面の設
定
準備は終了
リクエストの流れ
認証
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}
トークン取得
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
APIのCall
https://www.googleapis.com/oauth2/v3/userinfo?
->access_token={取得したトークン}
取得できる情報
Google 氏名、ニックネーム、メールアドレス、プロフィール写真、住所 etc...
Facebook
氏名、性別、血液型、誕生日、メールアドレス、住所、写真、 興味・関心、職歴、
学歴、地域、友達リスト etc...
Twitter
氏名、ニックネーム、メールアドレス、プロフィール写真、フォローリスト、フォロ
ワーリスト etc...
他のSNSだとこんなのが取れる
OAuthは分かったので
実際にサイトで使われて
いるソーシャルログイン
のフローを見ていく
Oauth
ポイント
❏ 新規ユーザの場合は自サイトのユーザ登録
の入力補完として使う
❏ ユーザ登録している場合はSNSアカウントと
の紐づけをする
❏ 上記が網羅されていたらワンクリックログイン
する事ができる
紐づけする理由
❏ 結局のところサイト側のユーザIDを使ったシ
ステム制御(パーソナライズとか)したいとか、
ユーザの情報として足りなかったりする
まとめ
SNSをやっているのが
当たり前の時代になって
いるのでソーシャルログ
インはつけたほうがいい
と思う
ソーシャルログインだけ
でなく、SNS情報を扱う
上でOAuthは使う事に
なると思うので覚えとくと
いいかも
ご静聴ありがとうございました

Googleログインから学ぶ OAuth