OAuthの仕組み丸分かり体験サイト

ソーシャルログイン等に使用されているプロトコル「OAuth」の仕組みを体験してみよう

※はじめての方は説明をお読みください



・このサイトについて

このサイトでは,あなたのFacebookのアカウントを利用して,我々が用意したアプリ(=免許証作成サイト)上で,Facebookに登録されているあなたの名前と写真が貼られた特製の免許証(図1)を作成します.

図1 生成されたOAuth免許証(例)

あなたは,免許証作成サイトで自分の名前を入力したり写真を送信したりする代わりに, Facebook上に登録されたあなたのプロフィール情報(名前と写真)を,「許可証(=認証コード)」と引き換えで,免許証作成サイトに渡します.受け取ったプロフィール情報(名前と写真)を用いて,免許証作成サイトでは免許証を作成します(図2).

図2 OAuth体験サイトにおける3主体間の関係


このように,あなたのできること(=権限)を「許可証(=認証コード)」として第三者に提供すること(=委譲)を,「権限移譲」と言います.
OAuthによる権限委譲は,図3のような動作をします.このフローを見ただけでは実際に何が起きているのか,すぐには分かりませんよね.

図3 OAuthのフロー

OAuth体験サイトでは,OAuthのフローが操作を行う画面と連動しながら表示されるので,現在どの状態もしくは通信をしているのかを確認することができます(図4).

図4 OAuth体験中のページの例

※体験する前に

  • この体験サイトを利用するためには,Facebookのアカウントが必要になります.
  • 一度ブラウザでFacebookにログインすると,Facebookの認証が省略される可能性がありますので,シークレットブラウザでの利用をおすすめします.
  • OAuth免許証には,あなたのFacebook上の名前,ID,写真が使用されます.
  • Facebookから受け取ったあなたの情報やアクセストークン,認可コードはセッション終了後破棄いたします.ご安心ください.


それでは,下のボタンから,OAuthを体験してみましょう.



・おまけ:OAuthを利用したソーシャルログイン

ソーシャルログインとは...
例えば,ソーシャルログインに対応したWebサイト(ここでは免許証作成サイト)では,図5のようにログイン画面に「〇〇でログイン」というボタンが用意されているとします.ここであなたが「Facebookでログイン」というボタンをクリックしたとしましょう.

図5 ソーシャルログインができるサイトのログイン画面

そうすると,あなたはFacebookのログイン画面(図6)に移動します.そして,あなたは自分の持っているFacebookアカウントでログインを行うだけで,図5のWebサイトにログインすることができます.「許可証(=認可コード)」は,一種の入場券みたいなものですね. このようにSNSアカウントでその他複数のWebサイトにログインする方法を「ソーシャルログイン」と呼びます.「ソーシャルログイン」を採用する,Webサービス(アプリケーション)の管理側も,アカウント情報を不要に収集し管理しなくてよいというメリットがあります.

図6 Facebookのログイン画面

ソーシャルログインを実現する方法は複数存在しますが,OAuthを用いたものが一部でOAuth認証と呼ばれています.

免許証作成サイトにとって,「OAuth認証」が成立するための前提は以下となります:

  1. Facebookがきちんと「あなた」本人であることを確認(=認証)していて,Facebook上で「あなた」がプロフィール情報(名前と写真)を利用する「許可証(=認証コード)」を発行できること
  2. 最初にアクセスしたブラウザと「許可証(=認可コード)」を提示したブラウザが同じであること(これはクッキーを利用します)
  3. 「許可証(=認可コード)」は有効期限内あること

最初に「許可証(=認可コード)」を提示したら,Facebook上で認証された「あなた」以外は「許可証(=認可コード)」を提示できないので,登録後に同じものを提示できるのは「あなた」だけであると判断できます.これは,最初の登録後,「許可証(=認可コード)」を次回以降の接続時に提示できることにより,本人性の確認を実現しています.いわゆる,TOFU (Trust On First Use) と呼ばれる仕組みです.

しかしながら,OAuth認証における「許可証(=認可コード)」は,通信路が無防備なので,「許可証(=認可コード)」が盗まれたり,書き換えられたり,でっち上げられたりしてしまいます.OAuth認証は,安全性より,手軽さを優先する実現と言えるでしょう.