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

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

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

始める前に

  1. Google Cloud Console の [プロジェクト セレクタ] ページで、Google Cloud プロジェクトを選択または作成します。

    プロジェクト セレクタに移動

  2. Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。

  3. Google Cloud CLI をインストールして初期化します。

  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. Cloud Console で Identity Platform の Marketplace ページに移動します。

    Identity Platform の Marketplace ページに移動

  2. [Identity Platform を有効化] をクリックします。Cloud Console に Identity Platform のページが表示されます。

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

  1. Cloud Console で 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 を使用するように認証アプリを構成します。クライアント アプリで使用したものと同じプロジェクト 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. Cloud Console で [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. Cloud Console で IAP ページに移動します。

    IAP ページに移動

  2. [HTTP Resources] タブをクリックします。

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

    https://project-id.appspot.com
    
  4. [IAP] 列で、スイッチをオンに切り替えます。

    IAP を有効にする

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

    外部 ID に切り替える

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

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

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

    URL を入力すると、Cloud Console に API キーが自動的に追加されます。

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

    外部 ID を構成する

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

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

アクセスをテストする

IAP がアプリを保護していることをテストするには:

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

    https://project-id.appspot.com
    

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

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

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

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

クリーンアップ

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

  1. Cloud Console で [リソースの管理] ページに移動します。

    [リソースの管理] に移動

  2. プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
  3. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

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

次のステップ