【Twitterログイン】OAuthログインの仕組みを図解してみた!クライアントとサーバーの関係は?

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情報で自分がどのユーザーかをサーバーに探してもらい、自分が利用するコンテンツを呼び出します。

 

まとめ

  1. twitterログインボタンを押す
  2. サーバーからtwitterにtwitterログインのお願いをする
  3. twitterからクライアントにtwitterアカウントを確認する
  4. クライアントはtwitterにログインする
  5. twitterがサーバーに対して、twitterアカウント情報を渡す
  6. twitterから受け取ったアカウント情報をサーバー内に保持
  7. クライアントにログイン成功したことを伝えるとともにSetCookieでアカウント情報のキーにする
  8. ログイン成功!
  9. Cookie情報をリクエストヘッダーに入れ、自分がどのユーザーかをサーバーに認識してもらう

という流れが、twitterのOAuthログインフローになっています。

もちろん、twitterだけではなく、Google+やFacebook、github、LinkdInなども同じようなOAuthフローが利用できます。

Webサービスやアプリを使うユーザーの9割以上がtwitterなりfacebookなりgithub等のSNSアカウントを持つ時代。OAuthログイン認証はサービスの必須機能と言っても過言ではありません。

是非、OAuth認証の内部で何が起こっているかを理解して、自分のサービスに組み込んでください!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。