Facebook ログインの仕組み
Facebook ログインとは？
WEB サービスを利用する際、氏名やメールアドレスを毎回入力するのはなかなか手間がかかるものですが、「 Facebook ログイン」がこの問題を解決しました。
たとえば、Kickstarter の「新規登録」をポチると以下の画面に移動します。
ひと昔前までは画面左側のように氏名と連絡先（時には好きな食べ物や趣味など）を入力させられていたのですが、現在では、画面右側にある Facebook ログインボタンひとつで新規登録できるようになりました。
※「Facebook ログイン」ではなく「 Facebook のOAuth 認証」と呼んだ方が正確です。OAuth 認証に関してはこちらの記事にわかりやすくまとめられています。
Facebook ログインの仕組み
さて、ログインボタンを押すと最近よく見かける「 Facebook でログイン」画面が登場します。
この画面いわく、Facebook の登録情報のうち、公開プロフィール、友達リスト、メールアドレス、出身地、居住地、いいね！が Kickstarter に送られるとのことですが、これだけではどのように情報をやりとりしているのかはいまいちわかりません。Kickstarter を例に少し掘り下げてみたいと思います。
先に結論をまとめると、以下のようになります。
詳細は以下の通りです。
- ユーザーがログインボタンを押します。
- Kickstarter が Facebook に
- Kickstarter が Facebook Developer で取得した ID
- リダイレクトさせる URL
- セッション（＝セキュリティを確保するための任意の文字列）
- ユーザーから得たい情報
を送ります。
- Facebook がユーザーにログイン画面を提示します。
- ユーザーは「 Facebook ログイン画面」で OK ボタンを押します。
- Facebook は Kickstarter に許可コードを返します。ここで、セキュリティ対策のため、②で Facebook に送信したセッション値と Facebook から返されたセッション値が同じであることを確認します（参考：CSRF対策）。
- Kickstarter は
- Kickstarter が Facebook Developer で取得した ID と暗証番号
- リダイレクトさせる URL
- 許可コード
を Facebook に送ります。
- Facebook は Kickstarter にアクセストークンを返します。
- Kickstarter は Facebook にユーザー情報（氏名、画像、友達リストなど）を要求します。
- Facebook は Kickstarter にユーザー情報を返します。Kickstarter はユーザー情報をデータベースに登録して、以下のようなログイン状態となります。
おわりに
Facebook のログイン認証についてザックリまとめてみました。細部を知らなくても使える便利なサービスが増えてきた昨今ではありますが、ブラックボックスで利用している物ほど根本的な原理の理解を目指す精神を忘れずにいたいものです。
参考資料
- facebook developers「The Login Flow for Web (without JavaScript SDK) 」
- ドットインストール「Facebook でログインするWebサービスを作ろう」
