FirebaseUI を使用したログインページの作成

Identity-Aware Proxy（IAP）で外部 ID を使用するには、ログインページをアプリ側で用意する必要があります。IAP は、ユーザーがセキュリティで保護されたリソースにアクセスする前に、このページにリダイレクトして認証します。

この記事では、オープンソースの JavaScript ライブラリである FirebaseUI で認証ページを作成する方法について説明します。FirebaseUI には、ボイラープレート コードを減らせるような、カスタマイズ可能な要素が用意されています。また、さまざまな ID プロバイダでユーザーのログイン フローを処理します。

すぐに開始できるように、IAP で UI をホストしましょう。これにより、追加のコードを記述することなく、外部 ID を試すことができます。より高度なシナリオでは、独自のログインページをゼロから作成することもできます。このオプションはより複雑ですが、認証フローとユーザー エクスペリエンスを完全に制御できます。

始める前に

外部 ID を有効化し、設定時に [独自に UI を用意する] オプションを選択します。

ライブラリのインストール

gcip-iap、firebase、firebaseui ライブラリをインストールします。gcip-iap モジュールは、アプリ、IAP、Identity Platform 間の通信を抽象化します。firebase ライブラリと firebaseui ライブラリは、認証 UI の構成要素を提供します。

npm install firebase --save
npm install firebaseui --save
npm install gcip-iap --save

CDN では gcip-iap モジュールを使用できません。

次に、ソースファイルで import を使用して、モジュールをインポートします。SDK バージョンに適したインポートを使用してください。

gcip-iap v0.1.4 以前

// Import firebase modules.
import * as firebase from "firebase/app";
import "firebase/auth";
// Import firebaseui module.
import * as firebaseui from 'firebaseui'
// Import gcip-iap module.
import * as ciap from 'gcip-iap';

gcip-iap v1.0.0 以降

バージョン v1.0.0 以降、gcip-iap には firebase v9 以降とのピア依存関係が必要です。gcip-iap v1.0.0 以降に移行する場合は、次の手順を実行します。

  • package.json ファイルの firebase バージョンと firebaseui バージョンをそれぞれ v9.6.0 以降と v6.0.0 以降に更新します。
  • firebase の import ステートメントを次のように更新します。
// Import firebase modules.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
// Import firebaseui module.
import * as firebaseui from 'firebaseui'
// Import gcip-iap module.

追加のコード変更は必要ありません。

ローカライズされたライブラリの使用など、その他のインストール オプションについては、GitHub にある手順をご覧ください。

アプリケーションの構成

FirebaseUI では、構成オブジェクトを使用して、認証に使用するテナントとプロバイダを指定します。構成全体は非常に長く、次のようになります。

// The project configuration.
const configs = {
  // Configuration for project identified by API key API_KEY1.
  API_KEY1: {
    authDomain: 'project-id1.firebaseapp.com',
    // Decide whether to ask user for identifier to figure out
    // what tenant to select or whether to present all the tenants to select from.
    displayMode: 'optionFirst', // Or identifierFirst
    // The terms of service URL and privacy policy URL for the page
    // where the user select tenant or enter email for tenant/provider
    // matching.
    tosUrl: 'http://localhost/tos',
    privacyPolicyUrl: 'http://localhost/privacypolicy',
    callbacks: {
      // The callback to trigger when the selection tenant page
      // or enter email for tenant matching page is shown.
      selectTenantUiShown: () => {
        // Show title and additional display info.
      },
      // The callback to trigger when the sign-in page
      // is shown.
      signInUiShown: (tenantId) => {
        // Show tenant title and additional display info.
      },
      beforeSignInSuccess: (user) =>