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 バージョンに適したインポートを使用してください。

// 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';

// 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: