为多个租户创建登录页面

本文档介绍如何使用 FirebaseUI（一组开源的预建界面组件）和 Client SDK 为 Identity Platform 构建特定于租户的登录页面。

GitHub 上提供了本教程介绍的步骤的示例代码。

准备工作

  1. 启用多租户并创建至少两个租户。
  2. 为每个租户配置身份提供商。

获取组件

您可以直接从 CDN 提取界面脚本、Client SDK 和 CSS 文件，只需将其添加到页面的 <head> 元素即可：

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

构建租户选择界面

FirebaseUI 仅处理登录流程；您需要构建自己的界面，供用户选择要登录的租户。以下步骤展示如何构建包含两个按钮的简单租户选择页面。

  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 渲染登录组件。请注意，在渲染界面组件之前，您需要在 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 对象上进行设置。

后续步骤