為多個用戶群建立登入網頁

本文說明如何使用 FirebaseUI (一組開放原始碼的預先建構 UI 元件) 和 Client SDK，為 Identity Platform 建構租用戶專屬的登入頁面。

您可以在 GitHub 上找到範例程式碼，用於示範本教學課程涵蓋的步驟。

事前準備

  1. 啟用多用戶群架構，並建立至少兩個用戶群。
  2. 為每個租用戶設定識別資訊提供者。

取得元件

您可以將 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。以下步驟說明如何建立含有兩個按鈕的簡易租戶選取頁面。

  1. 建立兩個租戶選取元素。

    <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. 啟動應用程式。畫面上會顯示登入畫面，其中包含兩個租用戶按鈕。

雖然這個範例使用了兩個簡單的按鈕和單一頁面，但您可以使用許多不同的使用者體驗流程。舉例來說，您可以請使用者在一個頁面上輸入電子郵件地址，然後顯示租戶選取畫面。您也可以為每個租用戶代管個別的登入頁面。在這種情況下，您需要從網址解析租用戶 ID，然後在 Auth 物件上設定該 ID。

後續步驟