Anmeldeseite für mehrere Mandanten mit Identity Platform erstellen

Auf dieser Seite erfahren Sie, wie Sie mit FirebaseUI, einer Sammlung aus Open-Source-Komponenten mit vordefinierten UI-Komponenten, und dem Client SDK eine Anmeldeseite für mehrere Mandanten in Identity Platform erstellen.

Hinweise

  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 zum Auswählen von Mandanten 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.

So erstellen Sie eine einfache Seite zur Mandantenauswahl mit zwei Schaltflächen:

  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.

Sie können auch mehrseitige Workflows erstellen. Sie können beispielsweise einen Workflow erstellen, in dem Nutzer auf der ersten Seite nach ihrer E-Mail-Adresse gefragt werden und auf der nächsten Seite einen Mandanten auswählen können. Außerdem können Sie separate Anmeldeseiten für jeden Mandanten hosten. Dazu müssen Sie die Mandanten-ID aus der URL parsen und sie anschließend für das Objekt Auth festlegen.

Nächste Schritte