Facebookアプリ開発に挑戦(その10・OAuth 2.0認証の概要)

  • 投稿日:
  • by
  • カテゴリ:

昨日、「ブログに記事を書いたことをFacebookに投稿するプラグイン」を公開しました。
このプラグインの内部の動作では、OAuth 2.0による認証と、ウォールへの投稿の2つのテクニックが、重要なポイントです。
今日は、OAuth 2.0での認証について概要を紹介します。

1.OAuth 2.0の概要

Facebookなど、最近のWebサービスでは、APIを介して外部のプログラムから様々な処理を行うことができます。
外部のプログラムからWebサービスの情報を操作する際には、ユーザーに代わってプログラムが操作を行うことになりますので、ユーザーに許可を求める仕組みが必要です。
その仕組みとして、「OAuth」がよく使われています。

Facebookは「OAuth 2.0」に対応していて、認証の手順は比較的簡単になっています。
Facebookでは、OAuth 2.0での認証として、「Server-side flow」と「Client-side flow」の2つの方法を提供しています。
Server-side flowは、サーバー側にPHP等で認証のプログラムを設置する場合に使います。
一方のClient-side flowは、クライアント側にJavaScriptで認証のプログラムを設置する場合に使います。
今回のプラグインでは、Client-side flowを使いました。

2.Client-side flowの流れ

Client-side flowでは、まず以下のようなアドレスにアクセスします。

https://www.facebook.com/dialog/oauth?
     client_id=アプリケーションのID&redirect_uri=認証後のリダイレクト先&response_type=token

「アプリケーションのID」には、ご自分のアプリケーションのIDを指定します。
また、「認証後のリダイレクト先」には、ユーザーがアプリケーションを認証した後にリダイレクトする先のアドレスを指定します。
リダイレクト先はご自分のサーバーに用意しておきます。

これで、Facebookの「アプリの許可」のページが開き、ユーザーにアプリケーションの許可を求める状態になります。
ユーザーがアプリケーションを許可すると、以下のようなアドレスにリダイレクトされます。

認証後のリダイレクト先#access_token=アクセストークン&expire=有効期限

上記のURLの「#」の後を「&」で区切った後、「access_token=」の間の部分を切り出せば、アクセストークンを得ることができます。
このアクセストークンを使って、FacebookのAPIにアクセスします。

なお、有効期限は、アクセストークンの有効期限が切れるまでの秒数を表します。

3.追加のPermissionを得る

アプリケーションの処理内容によっては、追加のPermissionが必要な場合があります。
例えば、今回のプラグインのように、アプリケーションからユーザーのウォールに投稿する処理をしたい場合、「publish_stream」というPermissionが必要です。
この場合は、認証のページにアクセスする際のアドレスに、「&scope=必要なPermission」のようなパラメータを付加します。

4.例

以下のような例を考えてみます。

  • アプリケーションのIDが「1234567890」です。
  • ユーザーがアプリケーションを認証したときに、「http://www.sample.com/facebook/oauth.php」にリダイレクトします。
  • 「publish_stream」のPermissionが必要です。

この場合、以下のようなアドレスにアクセスします。

https://www.facebook.com/dialog/oauth?
     client_id=1234567890&redirect_uri=http%3A%2F%2Fwww%2Esample%2Ecom%2Ffacebook%2Foauth%2Ephp&response_type=token&scope=publish_stream

すると、以下のようなページが開きます。

「アプリの許可」のページの例

上記のページでユーザーが「許可する」のボタンをクリックすると、以下のアドレスにリダイレクトされます。

http://www.sample.com/facebook/oauth.php#access_token=アクセストークン&expire=有効期限

5.詳細について

Client-side flowを含めて、Facebookでの認証の手順については、Facebook Developersの「Authentication」のページで解説されています。