多分わかりやすいOAuth

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

こんにちは、サイオステクノロジー技術部 武井です。今回は、OAuthをなるべくわかりやすく書きたいと思います。私自身が非常に理解に苦しんだので、誰かのお役に立てれば幸いかなと・・・。

OAuthとは?

OAuthの仕組みは非常に複雑です。私も最初は何がなんだかわかりませんでした。平たく言ってしまえば、「あるサーバーの認可を他のサーバーで行う」ということなのですが、この説明でもさっぱりわけがわかりませんでした。

なので、まず、ここではなるべくわかりやすくOAuthの仕組みを説明させて頂きます。

説明を円滑に行うために、1つのシステムを例にあげます。Twitterにつぶやくと、自動的にそのつぶやきがFacebookにも反映される仕組みです。
Screen Shot 2018-03-04 at 14.41.09

※説明の中で出ているFacebookやTwitterのURLは適当です。また、実際にFacebookやTwitterにこのような仕組みがあるかもわかりません。説明をわかりやすくするための例として上げたことをご理解ください。

OAuthのない世界

まず、この仕組を、もしOAuthを使わない場合にどのようになるかを説明します。まずAさんは、TwitterのシステムにFacebookに接続するためのユーザーIDとパスワードを登録します。
Screen Shot 2018-04-11 at 22.46.01

 

AさんがTwitterにつぶやきます。
Screen Shot 2018-04-11 at 22.46.45

 

Twitterは、AさんのつぶやきをFacebookに反映するために、あらかじめTwitterのシステム内に登録されているAさんのユーザーIDとパスワードでFacebookに接続します。
Screen Shot 2018-04-11 at 22.47.29

 

Facebookへの認証が完了すると、AさんのつぶやきをTwitterがFacebookに投稿します。これでTwitterとFacebookの連携は完了です。
Screen Shot 2018-04-11 at 22.48.10

 

しかし、このしくみは、大きな弱点があります。TwitterにはAさんのFacebookのユーザーID・パスワードが登録されています。仮に、もし仮にですが、Twitterを運営している人に悪い人がいて、その人がAさんのFacebookのID・パスワードで勝手にFacebookに接続できてしまいます。投稿の削除や退会ができてしまいます。
Screen Shot 2018-04-11 at 22.48.49

OAuthのある世界

これを解決するのがOAuthです。まずTiwtterを運営するシステム管理者は、Facebookに対して、OAuthで接続させてくださいみたいな事前の申請をします。これは、Twitterシステム管理者とFacebookの間で最初の一度だけ行われるやり取りです。そのときに必ず、Facebookに対して行いたい作業(閲覧や投稿)も合わせて申請します。
Screen Shot 2018-03-04 at 16.49.11

 

申請が終わると、Facebookは「クライアントID」「クライアントシークレット」をTwitterシステム管理者に発行します。またTwitterから申請があった作業(投稿や閲覧、以下利用サービスと呼びます)を独自の文字列に変換します。Facebook、Twitterは、そのクライアントID、クライアントシークレット、利用サービスを自身のデータベースに保存します。ここまででTwitterシステム管理者の仕事は終わりです。この作業はOAuth利用時にシステム管理者が最初の一度だけ行えばよい作業です。
Screen Shot 2018-04-11 at 22.49.27

 

ここからは、利用者であるAさんがTiwitter→Facebook連携を行います。まず、Aさんは、Twitterにアクセスして、Tiwitter→Facebook連携の設定画面にアクセスします。
Screen Shot 2018-04-11 at 22.50.05

 

すると、Aさんは、Facebookにリダイレクトされて、Facebookのログイン画面が表示されます。このリダイレクトの際、URLのクエリパラメータにclient_idを付与します。次の工程でこれを使います。
Screen Shot 2018-04-11 at 22.50.45

 

ログインすると、Facebookは、Twitterと連携してもよいかどうかの確認画面を表示します。Facebookは、多分、いろんなサービスとの連携を許可していると思いますが、その多数あるサービスの中から、Twitterとの連携がOKかどうかの画面を表示できたのは、先程リダイレクトの際にクエリパラメータに渡されたクライアントIDから判断しています。
Screen Shot 2018-04-11 at 22.52.26

 

Aさんが先程の画面で「OK」をクリックすると、Twitterにリダイレクトされます。この際、認可コードというものが発行されます。リダイレクトされたときのURLのクエリパラメータにcode=…と言うかたちで、Twitterに渡されます。これは、後にTwitterがFacebookにアクセストークンを要求するための、非常に有効期限の短い通行手形のようなものです。Facebookは認可コード発行と同時に、認可コードを自身のデータベースに保存します。
Screen Shot 2018-04-11 at 22.53.13

 

TwitterはFacebookにアクセストークンを取得しに行きます。その際、先程発行された認可コードを渡します。
Screen Shot 2018-04-11 at 22.54.16

 

認可コードを要求されたFacebookは、自身が発行してデータベースに登録した認可コードとその有効期限を確認し、問題がなければ、Twitterにアクセストークンを返します。アクセストークンを発行したFacebook、アクセストークンを受け取ったTwitterの両方は、ユーザーIDとアクセストークンが紐付いた情報をデータベースに登録します。
Screen Shot 2018-04-11 at 22.55.02

 

Aさんは、Twitterにつぶやきます。
Screen Shot 2018-04-11 at 22.55.52

 

TwitterはAさんのつぶやきを画面に表示します。それと同時に、Facebookにも同様の投稿を行います。この際、Facebookには、投稿の内容と同時に、アクセストークンを渡します。アクセストークンは、Twitterへのログインユーザーをキーにデータベースから取得します。
Screen Shot 2018-04-11 at 22.58.49

 

アクセストークンを受け取ったFacebookは、データベースからアクセストークンを検索して、もし見つかったら、それに紐づくユーザーIDで、Facebookに投稿します。これで、連携完了です。
Screen Shot 2018-04-11 at 22.59.38

 

ところで、ここで、先程の悪い人が再登場したとします。でもアクセストークンには、利用サービスにあるように、投稿と閲覧の権限しかありません。アクセストークンは、FacebookのユーザーIDとパスワード違って、全ての権限を持ちません。当然ながら、アカウントの削除など出来ません。つまり、FacebookのユーザーIDとパスワードをTwitterに渡すのではなく、ごく限られた権限した持たないアクセストークンしか渡さないことにより、セキュリティを保っているわけです。
Screen Shot 2018-04-11 at 23.02.50

 

OAuthは、上記のようなサービス間の連携をする場合、サーバー内に保存されたアカウント情報を悪用する悪い人から、善良なユーザーを守るために作られた仕組みなのです。
Screen Shot 2018-03-04 at 17.46.42

最後に

なるべくOAuthの説明をわかりやすくしたつもりですが、いかがでしたでしょうか?次は、このフローに従って実際にOAuthクライアント、OAuthサービスプロバイダーを実装してみようと思います。

アバター画像
About 武井 宜行 269 Articles
Microsoft MVP for Azure🌟「最新の技術を楽しくわかりやすく」をモットーにブログtech-lab.sios.jp)で情報を発信🎤得意分野はAzureによるクラウドネイティブな開発(Javaなど)💻「世界一わかりみの深いクラウドネイティブ on Azure」の動画を配信中📹 https://t.co/OMaJYb3pRN
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

14人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる