Anmeldeseite für mehrere Mandanten erstellen

In diesem Artikel erfahren Sie, wie Sie mit FirebaseUI, einer Sammlung aus Open-Source-Komponenten mit vordefinierten UI-Komponenten, und dem Client SDK eine mandantenspezifische Anmeldeseite für Identity Platform erstellen.

Beispielcode, der die in dieser Anleitung beschriebenen Schritte veranschaulicht, ist auf GitHub verfügbar.

Hinweis

  1. Aktivieren Sie die Mandantenfähigkeit und erstellen Sie mindestens zwei Mandanten.
  2. Konfigurieren Sie Identitätsanbieter für jeden Mandanten.

Komponenten abrufen

Sie können das UI-Skript, das Client SDK und die CSS-Dateien direkt aus dem CDN abrufen, indem Sie sie dem <head>-Element Ihrer Seite hinzufügen:

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

Alternativ können Sie die Module mit npm installieren und dann als ES6-Importe darauf verweisen:

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'

Benutzeroberfläche zur Mandantenauswahl erstellen

FirebaseUI ist nur für Anmeldevorgänge zuständig; Sie müssen eine eigene UI erstellen, damit Nutzer einen Mandanten auswählen können, bei dem sie sich anmelden wollen. In den folgenden Schritten wird gezeigt, wie Sie eine einfache Seite zur ManadantenAuswahl mit zwei Schaltflächen erstellen.

  1. Erstellen Sie zwei Elemente zur MandantenAuswahl.

    <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. Erstellen Sie ein Containerelement für FirebaseUI.

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

  3. Erstellen Sie eine Konfiguration für jeden Mandanten.

    <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. Fügen Sie Klick-Handler für die Mandanten hinzu, um die Anmeldekomponente mit FirebaseUI zu rendern. Bevor Sie die UI-Komponente rendern, müssen Sie die Mandanten-ID auf der Auth-Instanz festlegen.

    <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. Starten Sie die App. Ein Anmeldebildschirm mit zwei Mandanten-Schaltflächen wird angezeigt.

Während dieses Beispiel zwei einfache Schaltflächen und eine einzelne Seite verwendet, sind viele verschiedene UX-Abläufe möglich. Sie können Nutzer beispielsweise auffordern, ihre E-Mail-Adresse auf einer Seite einzugeben und dann einen Bildschirm zur Mandantenauswahl anzuzeigen. Außerdem können Sie separate Anmeldeseiten für jeden Mandanten hosten. In diesem Fall müssen Sie die Mandanten-ID aus der URL parsen und sie anschließend für das Objekt Auth festlegen.

Nächste Schritte