Zenn
📚

Apidogで簡単！Facebook OAuth 2.0認証手順

2024/11/13に公開
Facebook
OAuth 2.0
アクセストークン
apidog
認証プロセス
tech

はじめに

Facebook で使用される OAuth 2.0認証プロセスは「Authorization Code Grant」です。本文では、Apidogという便利なAPI管理ツールを使って、FacebookのOAuth 2.0認証プロセスを実装する方法を皆さんに紹介します。

OAuth 2.0 とは?

OAuth 2.0 は、ユーザー認証情報を要求することなく、サードパーティのアプリケーションが保護されたリソースにアクセスできるようにする広く使われている認可プロトコルです。以下の 4 つの主要な役割が関係します。

  • 1.リソース所有者: 通常は保護されたリソースを所有するユーザー
  • 2.クライアント: リソース所有者のデータへのアクセスを求めるサードパーティのアプリケーション
  • 3.認可サーバー: リソース所有者を検証し、クライアントに認可を付与します
  • 4.リソースサーバー: 保護されたリソースを格納・管理し、アクセス用の API を提供します

OAuth 2.0-1.png

一般的な認可フロー

OAuth 2.0プロトコルでは、さまざまな認可フローを使って認可を実装します。

http://apidog.com/jp/blog/oauth-2-flows/

一般的な認可フローは次のとおり:

  • Authorization Code Grant: クライアントはユーザーを認可サーバーにリダイレクトします。ユーザーがログインして許可を与えると、認可サーバーはクライアントに認可コードを返します。その後クライアントは認可コードと自身の資格情報を交換してアクセストークンを取得します
  • Authorization Code Grant with PKCE (Proof Key for Code Exchange): 標準の認可コードフローと似ていますが、クライアントが PKCE (Proof Key for Code Exchange) を使ってセキュリティを強化します
  • Resource Owner Password Credentials Grant: リソース所有者がクライアントに直接ユーザー名とパスワードを提供します。クライアントはこれらの資格情報を使って認可サーバーからアクセストークンを要求します
  • Client Credentials Grant: クライアント自身がリソースへのアクセスを必要とする場合に、自身の資格情報を使って直接認可サーバーからアクセストークンを要求します
  • Implicit Grant: クライアントがブラウザベースのアプリケーションから直接アクセストークンを取得するために使われます。一般にウェブフロントエンドアプリケーションで使われます

FacebookのOAuth 2.0認証を実装する方法

それでは、FacebookのOAuth 2.0認証プロセスを実装するには、どうしたらいいですか？

ステップ 1: アプリを作成してクライアント ID とクライアントシークレットを取得する

まず、https://developers.facebook.com で Facebook 開発者アカウントを開設する必要があります。開設後、その中でアプリケーションを作成します。

OAuth 2.0-2.png

アプリケーションが作成できたら、[App Settings -> Basic] オプションをクリックします。ここにあるApp IDにクライアント ID (Client ID)、App secretにクライアントシークレット (Client Secret) になります。

OAuth 2.0-3.png

ステップ 2: コールバックURLを設定する

アプリケーションを作成した後、コントロールパネルで「Callback URL」も設定する必要があります。「Dashboard -> Customize this app」の順にクリックし、次に「Customize adding a Facebook Login button」をクリックして設定画面に入ります。

OAuth 2.0-4.png

設定画面の「Vaild OAuth Redirect URIs」項目に、コールバックアドレス (Callback URL) としてリダイレクト先のアドレスを入力します (Facebook では https から始まる必要があります)。

まだコールバックアドレス (Callback URL)を持っていない場合は、一旦入力しておけば構いません。ただし、そのドメイン名にアクセスできることを確認する必要があります。設定が完了したら保存します。

OAuth 2.0-5.png

ご案内：「コールバックアドレス」が必要な理由は、そのアドレスバーから認可コード (code) を取得するためです。一般に、OAuth 2.0 のログインページでユーザー名とパスワードを入力すると、「コールバックアドレス」にリダイレクトされ、アドレスバーに認可コードが表示されます。

また、手動で認可コード (code) の値を取得することもできます。以下のアドレスバーから code の値を取得しています。

OAuth 2.0-6.png

以上の情報を設定したら、OAuth 2.0 認可の主要プロセスに入ります。

ステップ 3: アクセストークンを取得する

上記のステップ 1 と 2 の準備ができたら、アクセストークン (Token) を申請できます。この手順を Apidog を使ってデモします。

apidog-client-1.png

Apidog は非常に使いやすいAPIテスト用ツールとして、OAuth 2.0のアクセストークンを直接取得して、APIをテストすることができます。まだ Apidog をインストールしていない場合は、ダウンロード してください!

HTTP リクエストを作成する
Apidog で HTTP プロジェクトを作成し、開いたら、そのプロジェクト内にリクエストを作成します。[編集 -> Auth -> OAuth 2.0] オプションを選択します。

Apidog-OAuth2.0-setting-1.png

Client ID、Client Secret、Callback URL を設定する
Apidog の OAuth 2.0 ページで、デフォルトで選択されている認証モードは Authorization Code です。Facebookの OAuth 2.0でもAuthorization Code を使うので、ここでは切り替える必要はありません。

Apidog-OAuth2.0-setting-2.png

次に、ページの下部にあるClient ID、Callback URLを探し、先ほどFacebook OAuth 2.0 サービスで取得したClient ID、Client Secret、設定したCallback URLを入力します。具体的な値は「ステップ1、ステップ2」で説明した設定値です。

Apidog-OAuth2.0-setting-3.png

Auth URLを設定する
Facebookの公式ドキュメントによると、OAuth 2.0 認証時の認可コード要求URLはhttps://www.facebook.com/v19.0/dialog/oauth です。このURLをApidogのAuth URLに入力します。

初めてログインする場合、身分認証のために、このページが自動的に開かれ、ユーザー名とパスワードの入力が求められています。

Apidog-OAuth2.0-setting-4.png

通常、手動でログイン認可ページを構築する場合は、Auth URLに追加のパラメータが必要です。
例:

https://www.facebook.com/v19.0/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &state={state-param}

注: 実際の作業では、パラメータは通常は改行しません。

しかし、Apidog では、疑問符"?"以降の追加パラメータは基本的に不要です。他の必須パラメータは別のオプションで個別に設定されるからです。もちろん、クエリパラメータを含めたい場合は、入力ボックスの横にあるアイコンをクリックして追加することも可能です。

Apidog-OAuth2.0-setting-5.png

また、「詳細設定」を展開し、権限のスコープ（範囲）を設定することも可能です。

例えば、必要な権限"public_profile"をScopeに入力すると、アプリに公開プロファイルフィールドを読み取る権限を付与します。

Stateオプションには"state"を入力します。これはクロスサイトリクエストフォージェリを防ぐための機能として、サードパーティプラットフォームでは通常求められるものとなるので、入力しない場合はアクセストークン取得時にエラーが発生する可能性があります。

Apidog-OAuth2.0-setting-6.png

アクセストークンURLを設定する
Facebookの公式ドキュメントによると、アクセストークンを取得するためのURLは https://graph.facebook.com/v19.0/oauth/access_token です。

このアドレスをAccess Token URLの入力フィールドに入力します。同様に、他のパラメータは別の入力フィールドで個別に設定されているため、URLに含める必要はありません。

Apidog-OAuth2.0-setting-7.png

アクセストークンを取得する
上記で説明した全ての設定項目が設定できたら、「トークンの取得」ボタンをクリックしてアクセストークンを取得できます。

初めてのログインの場合、身分認証のウィンドウがポップアップし、Facebookのアカウント名とパスワードの入力が必要になります。

Apidog-OAuth2.0-setting-8.png

ここで、ユーザー名とパスワードを入力して認証を行います。にんしょが通った場合、アクセストークンが自動的に取得され、Apidogのページに表示されます。その同時に、Facebookから返された他の情報も解析されます。

Apidog-OAuth2.0-setting-9.png

ステップ 4: トークンに基づいてオープンリソースにアクセスする

アクセストークン(Token)を取得できたら、これを使ってFacebookのオープンリソースにアクセスできます。Facebook Graph APIで利用可能なオープンリソースの種類を確認できます。

例えば、次のAPIはユーザーのIDと名前を取得します。インターフェースで何も返されない場合は、「ステップ3」で説明したように、必要な権限を持っているかを確認する必要があるかもしれません。その場合はScopeで設定すれば良いのでしょう。
https://graph.facebook.com/v12.0/me?fields=id,name

Apidog-OAuth2.0-setting-10.png

このようにリクエストを送信する際、Apidog は自動的にトークンを Authorization ヘッダーに "Bearer" とともに付加して送信します。

ご案内：アクセストークンをURLに追加してリクエストを送信したい場合、Authで「トークンの追加場所」を「Query Params」に変更することも可能ですね。

まとめ

この記事では、Apidogを使ってFacebookの OAuth 2.0 認証プロセスを実装する手順を詳しく説明しました。

主なポイントは次：

  • OAuth 2.0の概要と主要な役割についての解説
  • 一般的なOAuth 2.0の認可フロー(Authorization Code Grant、Implicit Grantなど)の紹介
  • FacebookアプリをセットアップしてClient ID、Client Secretを取得する方法の説明
  • コールバックURLをFacebookアプリで設定する手順
  • Apidogを使って、アクセストークンを取得するプロセスを詳細に説明
  • 取得したアクセストークンを使って、Facebookのオープンリソースにアクセスする方法の説明

Apidogは便利なAPI管理ツールで、OAuth 2.0認証の実装をスムーズに行えることが分かりました。この記事を参考に、Facebookの OAuth 2.0認証を適切に実装できるようになったことでしょう。セキュリティを保ちながら、サードパーティアプリからFacebookのリソースにアクセスできるようになります。

最後まで読んでくださり、ありがとうございました！
この記事を読んで少しでも理解を深めていただければ幸いです！

Discussion