外部 ID を使用してユーザーを認証する

外部 ID を使用してユーザーを認証する

このクイックスタートでは、Identity-Aware Proxy（IAP）と外部 ID でアプリを保護する方法について説明します。IAP と Identity Platform を組み合わせることで、Google アカウントだけでなく、OAuth、SAML、OIDC など、さまざまな ID プロバイダを使用してユーザーの認証を行うことができます。

このクイックスタートでは、Facebook 認証を使用して App Engine のサンプルアプリを保護します。

始める前に

1. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

2. Make sure that billing is enabled for your Google Cloud project.

3. Install the Google Cloud CLI, then initialize it by running the following command:

   gcloud init

4. プロジェクト用に App Engine を初期化します。

   gcloud app create --project=project-id
   

5. Git をインストールします。

6. Node.js の最新バージョンをインストールします。

7. Firebase コマンドライン ツールをインストールします。

   npm install -g firebase-tools
   

API を有効にする

まず、Identity Platform を有効にします。

1. Google Cloud コンソールで Identity Platform の Marketplace ページに移動します。

   Identity Platform の Marketplace ページに移動

2. [Identity Platform を有効化] をクリックします。Google Cloud コンソールに ID プラットフォームのページが表示されます。

次に、IAP を有効にします。

1. Google Cloud コンソールで [IAP] ページに移動します。

   IAP ページに移動

2. Identity Platform で使用したものと同じプロジェクトを選択します。別のプロジェクトを使用することはできません。

3. [API を有効にする] をクリックします。

サンプルコードをダウンロードしてデプロイする

このクイックスタートのコードには、クライアント アプリと認証アプリの 2 つのコンポーネントがあります。

クライアント アプリは IAP で保護されています。認証されていないユーザーからリクエストを受信すると、認証アプリにリクエストをリダイレクトし、ユーザーの本人確認を行います。ユーザーがログインに成功すると、認証アプリが JSON Web Token（JWT）を返します。デモ用のため、ここではクライアント アプリに JWT が表示されます。

まず、コードをダウンロードして、クライアント アプリをデプロイします。

1. サンプルコードをダウンロードします。

   git clone https://github.com/GoogleCloudPlatform/iap-gcip-web-toolkit.git
   

2. クライアント アプリのディレクトリに移動します。

   cd iap-gcip-web-toolkit/sample/app
   

3. 依存関係をインストールします。

   npm install
   

4. クライアント アプリを App Engine にデプロイします。

   npm run deploy
   

   クライアント アプリが次の URL で起動します。

   https://[PROJECT-ID].appspot.com
   

次に、認証アプリをデプロイします。

1. 認証アプリのディレクトリに移動します。

   cd ../authui-firebaseui
   

2. 依存関係をインストールします。

   npm install
   

3. Firebase Hosting を使用するように認証アプリを構成します。IAP で保護されたクライアント アプリを含む Google Cloud プロジェクトの Google Cloud プロジェクト ID を指定します。

   firebase use project-id
   

4. アプリをデプロイします。

   npm run deploy
   

   認証アプリが次の URL で起動します。

   https://[PROJECT-ID].firebaseapp.com
   

これで、クライアント アプリと認証アプリがデプロイされました。次に、Identity Platform と IAP を構成します。

Identity Platform を設定する

IAP は Identity Platform を使用して外部 ID の認証を行います。このクイックスタートでは Facebook を例にしていますが、Identity Platform はさまざまな ID プロバイダに対応しています。

Facebook アプリを作成する

Facebook の認証情報でユーザーの認証を行うには、アプリ ID とアプリのシークレットが必要です。

1. Facebook for Developers にログインします。Facebook アカウントがない場合は、アカウントを作成します。

2. Facebook の Apps ページに移動します。

3. [Add a New App] をクリックします。

4. 左側のメニューで、[Settings] > [Basic] の順に選択します。

5. [Privacy Policy URL] ボックスに、有効な URL を入力します。アプリをあとで本番環境にデプロイする場合は、独自のプライバシー ポリシーを参照するように URL を更新できます。

6. アプリ ID とアプリ シークレットをメモします。これらは次のセクションで必要になります。

Facebook を ID プロバイダとして追加する

認証に Facebook を使用するように Identity Platform を構成します。

1. Google Cloud コンソールで [ID プロバイダ] ページに移動します。

   [ID プロバイダ] ページに移動

2. [プロバイダを追加] をクリックします。

3. プロバイダのリストから Facebook を選択します。

4. 前のセクションで取得したアプリ ID とアプリ シークレットを入力します。

5. [保存] をクリックします。

OAuth リダイレクト URI を構成する

Facebook が認証アプリからのリクエストの処理を完了したときに、リダイレクト先の URI が必要になります。

1. Facebook の Apps ページに戻り、アプリを選択します。

2. 左側のメニューで [Products] をクリックします。

3. Facebook Login を選択して、[Set Up] をクリックします。

4. 左側のナビゲーション メニューで [Settings] を選択します（ガイド付きのクイックスタート フローを完了する必要はありません）。

5. [Valid OAuth Redirect URIs] ボックスに、リダイレクト先の URI を入力します。

   https://project-id.firebaseapp.com/__/auth/handler
   

   この URI は、Identity Platform プロバイダの構成ページでも確認できます。

6. [Save Change] をクリックします。

これで、Identity Platform の設定が完了しました。認証に IAP を使用するように構成されました。

IAP を有効にして外部 ID を使用する

1. Google Cloud コンソールで [IAP] ページに移動します。

   IAP ページに移動

2. [アプリケーション] タブをクリックします。

3. 以前にデプロイした App Engine サンプルアプリを選択します。[公開済み] カテゴリに、次のような URL が表示されます。

   https://project-id.appspot.com
   

4. [IAP] 列で、スイッチをオンに切り替えます。

5. サイドパネルで、[承認には外部 ID を使用します] の下にある [開始] をクリックします。

6. [ログインページ] で、[自分で提供する] を選択します。

   注: IAP でログインページを作成することもできます。このクイックスタートでは、サンプル クライアントと認証アプリを提供していますが、アプリをゼロから作成する場合は、IAP でログインページを作成すると、作業をより迅速に開始できます。

7. 次のように、[認証 URL] フィールドに認証アプリの URL を入力します。

   https://project-id.firebaseapp.com/
   

   URL を入力すると、Google Cloud コンソールに API キーが自動的に追加されます。

8. プロジェクト名のチェックボックスをオンにします。ID プロバイダとして Facebook が表示されるはずです。

9. [保存] をクリックします。

これで IAP の設定が完了しました。

ユーザー認証をテストする

IAP がアプリを保護し、Facebook でユーザーを認証していることをテストするには:

1. ブラウザで、App Engine クライアント アプリに移動します。

   https://project-id.appspot.com
   

   読み込み画面が表示された後、Identity Platform のログインページにリダイレクトされます。

2. 画面の手順に従って Facebook で認証を行います。

3. クライアント アプリにリダイレクトされ、Identity Platform から返された JWT が表示されます。

完全にログアウトするには、作成したサンプルアプリと Facebook からログアウトする必要があります。Firebase は 1 時間有効な Facebook とのセッションを確立するため、両方のアプリからログアウトする必要があります。詳細については、ユーザー セッションを管理するをご覧ください。

これで完了です。App Engine にアプリがデプロイされ、IAP と外部 ID で保護されました。

クリーンアップ

このページで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順を行います。

注意: プロジェクトを削除すると、次のような影響があります。

• プロジェクト内のすべてのものが削除されます。このドキュメントのタスクで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
• カスタム プロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタム プロジェクト ID を作成した可能性があります。そのプロジェクト ID を使用した URL（たとえば、appspot.com）を保持するには、プロジェクト全体ではなくプロジェクト内の選択したリソースだけを削除します。

複数のアーキテクチャ、チュートリアル、クイックスタートを実施する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにすることができます。

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the project.

作成した Facebook アプリを削除することもできます。

次のステップ

• FirebaseUI で認証 UI をカスタマイズするか、カスタム UI をゼロから作成する。
• Identity Platform で ID プロバイダを構成する方法を学習する。
• Identity Platform マルチテナンシーを使用して、ユーザーと構成からなる独自のサイロの作成方法を学習する。