Google OAuth 2.0認証でサードパーティサイトのログインに連携

Webサイトへのログインに連携したいと思いますか？本文では、Google OAuth 2.0を使ってサードパーティWebサイトのログイン機能に簡単に連携する手順を紹介します。

💡 Apidogいは非常に使いやすいAPI管理ツールとして、1クリックだけでトークン取得、自動トークン管理を行うことができます。Apidogを使うことで、Google OAuth 2.0認証の実装効率が大幅に向上するため、非常に便利なツールになります。

button

OAuth 2.0とは？

OAuth 2.0は、インターネット上のサービス間で安全にリソースへのアクセス権を委譲するための業界標準の認可フレームワークです。OAuth 2.0は現在、Google、Facebook、Microsoft、Twitterなど、多くのプロバイダーによってサポートされており、API認証の業界標準として広く利用されています。適切な実装と運用を行えば、ユーザーのプライバシー保護とセキュアなリソースアクセスを実現できるフレームワークです。

OAuth 2.0プロトコルには以下のような役割の相互作業によって構成されています：

リソース所有者: 通常はユーザーであり、写真、個人プロフィールなどの保護されたリソースを所有しています。
クライアント: リソース所有者の保護されたリソースにアクセスしたいサードパーティアプリケーション。
認証サーバー: リソース所有者の認証と、クライアントのリソースアクセスを承認する責任を持つサーバー。
リソースサーバー: 保護されたリソースを保存し、それらにアクセスするためのAPIを提供するサーバー。

OAuth 2.0認証フロー

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

一般的な認可フローは次のとおりです。

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: クライアントがブラウザベースのアプリケーションから直接アクセストークンを取得するために使われます。一般にウェブフロントエンドアプリケーションで使われます。

Google OAuth 2.0 Implicit Grant: 実装とApidogでのデバッグ

Googleでは、WebにおけるOAuth 2.0の認証にImplicit Grantフローを使用しているので、その実装方法とApidogでのデバッグ方法を見ていきましょう。

ステップ1: クライアントIDとリダイレクトURLの設定

まずはGoogle API Consoleにアクセスし、OAuth 2.0の資格情報を取得する必要があります。左側のサイドバーにある「資格情報」オプションをクリックし、OAuthクライアントIDを作成します。

次に、Webサイト、Android、iOSアプリなど、ビジネスに応じたアプリケーションタイプを選択します。次に、「認可済みJavaScriptオリジン」フィールドにWebサイトのドメインを入力します。

ローカルでデバッグする場合は、通常 http://localhost または http://localhost:8000 (ポート番号がある場合)を設定します。これはGoogleにWebサイトがホストされているHTTPソースを知らせる目的があります。次に、「認可済みリダイレクトURI」フィールドにリダイレクト先のアドレス、通常はログインパスやアクセスできるその他のドメインを入力します。

関連するオプションをすべて設定したら、「作成」ボタンをクリックして保存します。これでクライアントIDとクライアントシークレットが生成され、後で使用する必要があります。

ステップ2: OAuthアクセス許可リクエストページの設定

左側のサイドバーにある「OAuthコンセントスクリーン」オプションをクリックしてアプリケーションを作成します。

OAuthコンセントスクリーンの設定

このページでは、アプリケーションの名前、メールアドレス、ドメインなどの基本情報を入力します。このページの情報は、ポップアップの認証ログインボックスに表示されるため、エンドユーザーに誰あなたなのか、連絡先などを理解してもらえます。

次に、スコープ(アクセス許可範囲)を設定します。次のステップに進み、アクセスを許可する権限を選択して保存します。

公式リリース前にOAuth 2.0のログインをテストできるテストアカウント(最大100人まで許可)を追加することもできます。

上記の設定が終わると、本格的なOAuth 2.0認証フローに入ることができると思います。

ステップ3: アクセストークンの取得

上記の手順1と2が完了したら、本格的にアクセストークンを要求できるようになります。この手順を実演するため、優れたAPIデバッグ・管理ツールであるApidogを使用します。Apidogでは直接トークンを取得することができます。

Apidogが提供するGoogle OAuth 2.0ログインフローの実装における主な機能は以下の通りです:

使いやすさ: Apidogは集中された設定インターフェースを提供し、開発者がクライアントID、リダイレクトURLなどの主要なパラメーターを簡単に入力できるため、複雑な認証リクエストURLを手動で構築する必要がありません。

多数の認証モードに対応: Apidogは、Googleの認証モードを自動的に識別でき、Implicit Grantモードを選択する機能を提供することで、異なる認証モードを切り替えるための手間を省きます。

1クリックのアクセストークン取得: Apidogは開発者を認証フローの全てのステップに導き、自動的にアクセストークンを取得できるため、トークンの取得難易度を大幅に軽減します。

トークンの自動管理: Apidogは取得したアクセストークンをリクエストヘッダーやクエリパラメーターに自動的に追加するため、開発者がトークンの送信を手動で処理する必要がありません。

シームレスなリソースアクセス: Apidogによるアクセストークンがあれば、開発者は追加の複雑な認証処理なしに、直接Googleのオープンリソースにアクセスできます。

Apidogで新しいHTTPプロジェクトを作成し、新しいリクエストを作成して「編集 -> Auth -> OAuth 2.0」オプションを選択します。

GoogleのクライアントサイドWebアプリケーション用の「OAuth 2.0」は、Implicit Grantを使用しているため、「Implicit」認証モードを選択します。

クライアントIDとリダイレクトURLを入力します。ステップ1で設定したGoogleのOAuth 2.0サービスパラメーターです。

アクセストークンの取得

公式のGoogleドキュメントによると、アクセストークンを申請するためのURLは次のとおりです:

https://accounts.google.com/o/oauth2/v2/auth

この URLを「認証URL」の入力フィールドに入力できます。

Google公式ドキュメントでは、URLパスに追加のパラメーターを含める必要があるとされています:

https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
include_granted_scopes=true&
response_type=token&
state=state_parameter_passthrough_value&
redirect_uri=https%3A//oauth2.example.com/code&
client_id=client_id

注意: 実際の作業では、URLパラメータの改行は必要ありません。

しかしApidogでは、必要なパラメーターが他のオプションで個別に設定されているため、通常これは不要です。

設定したい場合は、「認証URL」の横にあるアイコンをクリックして設定するか、「その他」をクリックして他の設定項目を展開し、上のステップ2で選択した許可範囲に openid の値を追加することができます。

上記の設定項目がすべて設定されたら、「トークンを取得」ボタンをクリックしてトークンを取得できます。クリックすると、初回ログイン時にポップアップウィンドウが表示され、そこで承認情報を入力します。

ユーザー名とパスワードを入力すると、アカウントを確認するためのテキストメッセージ認証コードを受け取るか、またはアカウントを関連付けて直接アクセストークンを取得できます。

承認が完了すると、アクセストークンが自動的に取得され、ページに表示されます。また、GoogleからAapidogに返された他の情報も解析されて表示されます。

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

取得したアクセストークンを使って、Googleのオープンリソースにアクセスできるようになりました。OAuth 2.0 Playgroundで利用可能なGoogleのAPIとそのアクセス許可範囲をすべて確認することができます。

リクエストを送信する際、Apidogはトークンを自動的にBearerトークンとしてAuthorizationヘッダーに付加します。URLにトークンを含める場合は、Apidogの設定で「トークン追加位置」オプションを「Qurey Parmas」に変更できます。

まとめ

この記事では、Google OAuth 2.0を使ってサードパーティのWebサイトにログイン機能を連携する手順を紹介しました。OAuth 2.0は、インターネット上のサービス間で安全にリソースへのアクセス権を委譲するための業界標準の認可フレームワークです。

Google OAuth 2.0の実装では、Implicit Grantフローを使用しています。手順としては、

1)Google API ConsoleでクライアントIDとリダイレクトURLを設定
2)OAuthコンセントスクリーンでアプリ情報とスコープを設定
3)Apidogを使ってアクセストークンを取得
4)取得したトークンでGoogleのオープンリソースにアクセス

Apidogは、OAuth 2.0認証の実装をグレートに簡素化してくれるツールです。使いやすいインターフェースで認証設定ができ、1クリックでトークンを取得し、自動的にリクエストヘッダーに追加してくれるため、開発者は認証の実装に手間をかける必要がありません。Apidogを使うことで、Google OAuth 2.0認証の実装効率が大幅に向上します。