OAuthを実装してみました

こんにちは。サイオステクノロジー技術部 武井です。前回は、OAuthの概要についてご説明しました。今回は実際にOAuthのサービスプロバイダー、コンシューマーを構築してみたいと思います。実装しながら、OAuthの動きを追ってみることによって、OAuthに対する理解が深まればよいなと考えております。

最初から実装するのは大変なので、OAuthサービスプロバイダーについては、ありものを使うことにしました。以下のライブラリがよさそうでしたので、今回使うことにしました。

https://github.com/bshaffer/oauth2-server-php

構成

今回実装する構成は以下のとおりです。「多分わかりやすいOAuth」で紹介した構成と同じです。Twitter(コンシューマー)に発言すると、その発言がFacebook(サービスプロバイダー)にも反映される仕組みです。

Screen Shot 2018-03-06 at 22.15.50

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

環境構築

先程ご紹介したOAuthサービスプロバイダーを使うためには、PHPやMariaDBをインストールするなど、ちょっとした環境構築が必要になります。ここでは、その方法を記載致します。

OAuthサービスプロバイダー(Facebook)

まずは、OAuthサービスプロバイダー側からやってみましょう。

Apache、PHP、mod_ssl(ApacheでSSLを使うためのモジュール)をインストールします。

MariaDBをインストールします。

OAuthサービスプロバイダーのライブラリをインストールするために、composer(PHPのパッケージ管理システム)が必要になります。

OAuthサービスプロバイダーのライブラリをインストールします。

OAuthサービスプロバイダーのライブラリを動作させるためには所定のスキーマを持ったデータベースが、MariaDBに必要になります。それをこれから作成します。

MariaDBにログインします。

データベースを作成します。

以下のDDLをペーストします。

PHPでデータベースにアクセスするためのライブラリをインストールします。

以上で、OAuthサービスプロバイダー側の環境構築は終了です。

OAuthコンシューマー(Twitter)

次は、OAuthコンシューマー側です。

Apache、PHP、mod_ssl(ApacheでSSLを使うためのモジュール)をインストールします。

MariaDBをインストールします。

OAuthサービスプロバイダーのライブラリを動作させるためには所定のスキーマを持ったデータベースが、MariaDBに必要になります。それをこれから作成します。

MariaDBにログインします。

データベースを作成します。

OAuthコンシューマー側のユーザー情報とメッセージを格納するデータベースが必要になります。以下のDDLをペーストします。

PHPでデータベースにアクセスするためのライブラリをインストールします。

以上で、OAuthコンシューマー側の環境構築は終了です。

ソースコード一覧

今回作成するソースコードの一覧は以下のとおりとなります。

Screen Shot 2018-04-03 at 0.27.24

詳細な解説

では、「多分わかりやすいOAuth」で紹介したシーケンスをもとに、ソースコードの解説をしてきたいと思います。

■ 手順その1:Facebookへの申請
Screen Shot 2018-03-04 at 16.49.11

Tiwtterを運営するシステム管理者は、Facebookに対して、OAuthで接続させてくださいみたいな事前の申請をします。これは、Twitterシステム管理者とFacebookの間で最初の一度だけ行われるやり取りです。

■ 手順その2:クライアントID・クライアントシークレットの保存
Screen Shot 2018-04-03 at 6.50.20

この処理を実現するためには、OAuthプロバイダー側に作成したスキーマ「oauth_clients」に以下のSQLを発行してOAuthコンシューマー情報を登録します。

■ 手順その3:TwitterにFacebook連携の要求
Screen Shot 2018-04-03 at 6.53.12
利用者であるAさんがTiwitter→Facebook連携を行います。まず、Aさんは、Twitterにアクセスして、Tiwitter→Facebook連携処理を開始します。

この処理を実現するためには、Aさんに以下のURLにアクセスしてもらいます。

クエリパラメーターの詳細は下記の通りになります。

response_type 取得したいレスポンスの種別を指定します。ここでは認可コードを取得したいので、「code」と指定します。
client_id クライアントIDを指定します。
state CSRF対策です。任意の文字列を指定します。詳細を説明すると長くなりますので、別の機会にさせて頂きます。今はセキュリティ対策のために必要だと認識しておいて下さい。

■ 手順その4:Facebookログイン画面の表示

Screen Shot 2018-04-03 at 8.09.47

認可画面を表示する前に、未認証なのでログイン画面が表示されます。

今回の処理で使われているソースコードです。server.phpは、データベースの接続や必要なインスタンスの作成など、共通処理を実装します。全てのソースコードからrequireされます。

ログイン画面の表示及びログイン処理を行うlogin.phpです。

■ 手順その5:認可画面の表示
Screen Shot 2018-04-03 at 8.15.51

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

認可確認画面の表示及び認可コード発行の処理を行うauthorize.phpのソースコードです。

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

■ 手順その7:アクセストークンの取得
Screen Shot 2018-04-03 at 10.04.49
TwitterはFacebookにアクセストークンを取得しに行きます。その際、先程発行された認可コードを渡します。しかし、その前に、未認証なので、ログイン画面が表示されます。ログイン後、アクセストークンを取得する処理が走ります。

OAuthコンシューマー(Twitter)へのログイン画面表示及びログイン処理を行うlogin.phpです。

認可コードを受け取り、アクセストークンを取得するスクリプトcb.phpになります。

アクセストークンを発行するスクリプトtoken.phpになります。

■ 手順その8:アクセストークンの返却
Screen Shot 2018-04-03 at 9.47.17

「手順その7:アクセストークンの取得」の実行結果は上記のようになります。アクセストークンを発行したFacebook、アクセストークンを受け取ったTwitterの両方は、ユーザーIDとアクセストークンが紐付いた情報をデータベースに登録します。

■ 手順その9:Aさんのつぶやき
Screen Shot 2018-04-03 at 10.39.46

AさんがTwitterにつぶやきます。

■ 手順その10:Facebookへの接続
Screen Shot 2018-04-03 at 11.32.16

OAuthコンシューマー(Twitter)側の投稿画面(messages.php)から「白金なう」を投稿すると同時にOAuthプロバイダー(Facebook)側の投稿API(post_message.php)をリクエストして、OAuthコンシューマー(Facebook)側にも同じメッセージを投稿します。

OAuthコンシューマー(Twitter)側の投稿画面(messages.php)のソースコードは下記のとおりです。

OAuthコンシューマー(Twitter)側から呼ばれるOAuthプロバイダー(Facebook)側の投稿API(post_message.php)のソースコードは下記のとおりです。

■ 手順その11:連携完了!!

Screen Shot 2018-04-03 at 11.41.38

上記のようになれば連携は完了です。OAuthプロバイダー(Facebook側)の投稿一覧画面(messages.php)にアクセスして、投稿の内容を見てみると、OAuthコンシューマー(Twitter)側で投稿された内容が反映されているのがわかります。

OAuthプロバイダー(Facebook側)の投稿一覧画面(messages.php)のソースコードは下記のとおりです。

最後に

いかがでしたでしょうか?OAuthはすごい複雑な認証処理ですので、こういうのはやっぱり実際に実装してみて初めて理解が深まるものだと思います。この記事が皆様の助けになれば幸いです。

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

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

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

コメント投稿

メールアドレスは表示されません。


*