外部 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.

    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. [ログインページ] で、[自分で提供する] を選択します。

  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 は Facebook とのセッションを 1 時間有効にするため、両方のアプリからログアウトする必要があります。詳細については、ユーザー セッションを管理するをご覧ください。

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

クリーンアップ

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

  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 アプリを削除することもできます。

次のステップ