【図解】ややこしいOAuth2.0を分かりやすく解説してみた

自分で作ったアプリにTwitterやGoogleでのログイン機能を加えたい時や、外部とのサービスと連携させたい時があります。

そんな時に必要となるのが『OAuth』に関する知識です。しかしOAuthについて解説した記事を読んでも、どういう流れで処理が進んでいるのか理解しづらい場合が多いです。

そこで今回はOAuthの処理の流れを、できる限り文章を省き、図解で解説していきます。ぜひ最後まで読んでいただけると幸いです。

OAuth2.0の登場人物は6人

OAuth2.0には6人の登場人物がいます。実際のサービスなどに置き換えると理解が進むかと思います。

  • エンドユーザー:サービスを利用するユーザー
  • Webブラウザ:Google ChromeやSafariなどのブラウザ
  • クライアントアプリ:外部サービスを利用するアプリ。
    例えばRuby on RailsやReactなどを指します。
  • 認可サービス:サービスを提供するアプリ。例えばTwitterやInstagramを指します。
  • 認可エンドポイントの受付嬢:ブラウザからの認可リクエストを受け付ける場所。認可サービスのなかに存在。
  • トークンエンドポイントの受付嬢:クライアントアプリからのトークンリクエストを受け付ける場所。認可サービスのなかに存在。

認可サービスについてもう少し詳しく見てみましょう。例えば皆さんがRailsであるアプリを作成して、Twitterによる認証機能を付けたいとします。

Rails(クライアントアプリ)は、各ユーザーのTwitter情報(ID名やアカウント名)など自力で入手することができません。そのため、情報を持っているTwitterから情報を入手する必要があります。

このようにクライアントアプリに情報を与える外部のサービスを、認可サービスと呼びます。(今回は分かりやすく、認可サービスとリソースサービスを同じと考えます。)

さて話を戻します。
エンドユーザーがあるサービスを見つけた場合を想像してください。

最近のアプリケーションなら、メールアドレス以外にGoogleやTwitterアカウントでログインできるようになっていますよね。さて、ユーザーがTwitterでログインをクリックしたとしましょう。

Webブラウザが認可リクエスト画面を表示

ユーザーがボタンをクリックすると、クライアントアプリがWebブラウザに「認可リクエスト」を表示するように命令します。

これによりWebブラウザで表示されるのが、「認可リクエスト画面」です。例えばTwitterアカウントでログインすると、下画像のようにユーザーに許可を求める画面が表示されますよね。

僕たちは無意識のうちにOAuthと触れ合っていたんですね。

ちなみに認可リクエスト(認可リクエスト画面表示時のURL)は下記のようになっています。Twitterでのログインをする際に、URLをチェックしてみるとイメージがわくと思います。

Webブラウザが認可レスポンスを入手

で、ユーザーが認可を許可したとします。

そうするとWebブラウザは認可サーバーに、「認可レスポンス」を求めます。認可レスポンスの受付は、認可サーバーの「認可エンドポイント」で行います。

認可エンドポイントってなんなん?ってなる方もいるかと思うので、実例をみてみましょう。下画像は、サイボウズ社のKintoneを利用するための情報です。

このように外部サービスが認可エンドポイントを提供してくれます。ほとんどのサービスでも、同じような画面が用意されてるかと思います。

この認可エンドポイントにアクセスすることで、Webブラウザが認可レスポンスを受け取ることができるわけです。

さてWebブラウザが、認可サーバーから「認可レスポンス」を受け取ったら、それをクライアントアプリに渡します。

クライアントアプリがトークンリクエストを投げる

認可レスポンスを受け取ったクライアントは、それをもとに認可サーバーにリクエストを投げます。その場合の受付は、「トークンエンドポイント」となります。

クライアントは、認可レスポンスと引き換えに、アクセストークンを手に入れます。

クライアントは、トークンエンドポイントに下記の情報を含んだリクエストを投げます。

トークンエンドポイントから、クライアントは下記のような情報を入手します。レスポンスの形式がJSONの場合、下記のような形になります。

このアクセストークンをもとに外部サーバーにアクセスできます。

これでようやく外部サービスを利用できるようになったわけです。
長かったですね。

参考文献

サイボウズ公式ページ OAuthクライアントの使用

サイボウズ公式ページ Rails x Oauth2.0でkintone APIを利用する

OAuth 2.0 の認可レスポンスとリダイレクトに関する説明

OAuth 2.0 全フローの図解と動画