Identity Platform で複数のテナント向けのログインページを作成する

このページでは、オープンソースのコレクションである FirebaseUI と Client SDK を使用して、Identity Platform の複数のテナントのログイン ページを作成する方法について説明します。

始める前に

  1. マルチテナンシーを有効にして、2 つ以上のテナントを作成します。
  2. テナントごとに ID プロバイダを構成する。

コンポーネントを取得する

UI スクリプト、Client SDK、CSS ファイルをページの <head> 要素に追加すると、CDN から直接取得できます。

<script src="https://www.gstatic.com/firebasejs/x.x.x/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/x.x.x/firebase-auth.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.js"></script>
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.css" />

または、npm を使用してモジュールをインストールし、ES6 インポートとして参照することもできます:

npm install firebase --save && \
npm install firebaseui --save

// Import Firebase JS SDK.
import * as firebase from "firebase/app";
import "firebase/auth";
import * as firebaseui from 'firebaseui'

テナントを選択するための UI を作成する

FirebaseUI はログインフローのみを処理します。ユーザーがログインに使用するテナントを選択できるように、独自の UI を構築する必要があります。

2 つのボタンがある基本的なテナント選択ページを作成する手順は次のとおりです。

  1. 2 つのテナント選択要素を作成します。

    <div id="tenant-selection-buttons">
  <button id="tenant1-select-button" data-val="tenantId1">Display name of Tenant 1</button>
  <button id="tenant2-select-button" data-val="tenantId2">Display name of Tenant 2</button>
</div>

  2. FirebaseUI のコンテナ要素を作成します。

    <div id="firebaseui-auth-container"></div>

  3. テナントごとに構成を作成します。

    <script>
  var uiConfigs = {
  'TENANT_ID1': {
    'signInOptions': [firebase.auth.EmailAuthProvider.PROVIDER_ID],
    'credentialHelper': 'none',
    'signInFlow': 'popup',
    'callbacks': {
      'signInSuccessWithAuthResult': function(authResult, redirectUrl) {
        // The sign in success callback.
        return false;
       }
    },
    // tosUrl and privacyPolicyUrl accept either url string or a callback
    // function.
    // Terms of service url/callback.
    tosUrl: '[YOUR_TOS_URL]',
    // Privacy policy url/callback.
    privacyPolicyUrl: function() {
      window.location.assign('[YOUR_PRIVACY_POLICY_URL]');
    }
  },
  'TENANT_ID2': {
    'signInOptions': [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
    'credentialHelper': 'none',
    'signInFlow': 'popup',
    'callbacks': {
      'signInSuccessWithAuthResult': function(authResult, redirectUrl) {
        // The sign in success callback.
        return false;
       }
    },
    // tosUrl and privacyPolicyUrl accept either url string or a callback
    // function.
    // Terms of service url/callback.
    tosUrl: '[YOUR_TOS_URL]',
    // Privacy policy url/callback.
    privacyPolicyUrl: function() {
      window.location.assign('[YOUR_PRIVACY_POLICY_URL]');
    }
  }
};
</script>

  4. FirebaseUI でログイン コンポーネントをレンダリングするには、テナント選択クリック ハンドラを追加します。UI コンポーネントをレンダリングする前に、Auth インスタンスにテナント ID を設定します。

    <script>
  var ui = new firebaseui.auth.AuthUI(firebase.auth());
  tenantSelectionButton.addEventListener('click', (e) => {
  var tenantId = e.target.getAttribute('data-val');
  firebase.auth().tenantId = tenantId;
  ui.reset();
  ui.start('#firebaseui-auth-container', uiConfigs[tenantId]);
  });
</script>

  5. アプリを起動します。2 つのテナント ボタンがあるログイン画面が表示されます。

複数ページのワークフローを構築することもできます。たとえば、最初のページでユーザーにメールアドレスを尋ね、次のページでテナントを選択できるようにするワークフローを作成できます。また、テナントごとに個別のログインページをホストすることもできます。これを行うには、URL からテナント ID を解析して、Auth オブジェクトに設定する必要があります。

次のステップ