TwitterやFacebook,Google+を利用したログイン方法であるOAuth認証。
idとパスワードを設定する手間を省くことも出来て、その便利さから多くのwebサービスで実装されていますよね？
今回は、そんな世界中のWebサービスで使用されているOAuthログインの内部の仕組みについて、図解で解説しようと思います(もし、違っているフローがありましたら、twitterとかでメンション飛ばしてくれると嬉しいな・・・)
ワークフロー
非常に汚い字で申し訳ないです笑(Apple Pencilで書くの難しすぎて笑)
上から下に流れていく時間軸で、OAuthログインの仕組みを図解してみました。左がクライアント(ブラウザなど)、真ん中がログインしたいWebサービスが運用されているサーバー、右がtwitterです。
各フローに数字をふってありますので、その数字のフローで行われている処理を解説していきます。
1.twitterログインボタンを押す
ログイン画面にある「twitterでログイン」ボタンを押すフローです。
ボタンを押したら、サーバーに対して、
「わたし(クライアント)は、twitterアカウントを持っているので、そのアカウントでログインがしたい！」
と伝えます。
2.サーバーからtwitterにtwitterログインの準備をお願いする
2番のフローでは、サーバーからtwitterに対して、twitterログインをしたいと依頼します。
「うちのクライアントがtwitter様のアカウントを使って、ログインがしたいみたいです！」
とtwitterにサーバーから連絡します。
3.twitterアカウントを確認する
3番のフローでは、twitter側からクライアント(ユーザー)に対して、
「いま、ログインしようとしているサービスで使いたいあなたのtwitterアカウントはどれ？ id,passを入力してtwitterログインして！」
とユーザーにtwitterの認証を要求します。
4.twitterでのわたしはこの人です
twitterからtwitterのログインを求められたので、
「id: ○○, pass: ×× のユーザーです。」
とサービスログインに使用するtwitterアカウントを指定します。
5.twitterユーザー情報をサーバーに渡す
正式にtwitterアカウントとしてログインを出来たことを確認したtwitterは
「今回twitterログインしようとしているtwitterアカウントの情報はこれです」
と、ログインユーザーのtwitterアカウント情報をサーバーに渡します。
6.twitterアカウント情報をDBに格納
サーバーは、twitterからユーザー情報をもらったら
「よし、今ログインしようとしているユーザーのtwitterアカウント情報をtwitter本人からもらえた。正しい情報としてサーバー内に格納だ！」
と正しい情報として、twitterアカウント情報を内部に格納します。
7.通常のログインのようにSetCookie
サーバーはtwitterアカウント情報を内部に持つことができたので、
「twitterからいただいた情報とクライアント(ブラウザ)を結びつけるキーとしてCookieを渡すよ！」
と、普通のログイン処理のようにクライアント(ブラウザ等)にCookieを設置します。
8.ログイン成功！
「ログイン成功して、Webサービス内の機能を利用できるようになった！」
9.リクエストヘッダーにCookie情報を持たせて、サーバーにアクセス
ログイン後、Webサービス内の機能を使う場合、サーバーに再度アクセスが必要です。
「Cookie情報を渡すから、それと合致するサーバー内のtwitterアカウントを検索して！それが僕だよ！」
とCookie情報で自分がどのユーザーかをサーバーに探してもらい、自分が利用するコンテンツを呼び出します。
まとめ
- twitterログインボタンを押す
- サーバーからtwitterにtwitterログインのお願いをする
- twitterからクライアントにtwitterアカウントを確認する
- クライアントはtwitterにログインする
- twitterがサーバーに対して、twitterアカウント情報を渡す
- twitterから受け取ったアカウント情報をサーバー内に保持
- クライアントにログイン成功したことを伝えるとともにSetCookieでアカウント情報のキーにする
- ログイン成功！
- Cookie情報をリクエストヘッダーに入れ、自分がどのユーザーかをサーバーに認識してもらう
という流れが、twitterのOAuthログインフローになっています。
もちろん、twitterだけではなく、Google+やFacebook、github、LinkdInなども同じようなOAuthフローが利用できます。
Webサービスやアプリを使うユーザーの9割以上がtwitterなりfacebookなりgithub等のSNSアカウントを持つ時代。OAuthログイン認証はサービスの必須機能と言っても過言ではありません。
是非、OAuth認証の内部で何が起こっているかを理解して、自分のサービスに組み込んでください！
