Creazione di una pagina di accesso per più tenant

Questo documento mostra come creare una pagina di accesso specifica per il tenant per Identity Platform utilizzando FirebaseUI, una raccolta di componenti UI predefiniti e open source, e l'SDK client.

È disponibile un codice campione che mostra i passaggi descritti in questo tutorial su GitHub.

Prima di iniziare

  1. Abilita la multitenancy e crea almeno due tenant.
  2. Configura i provider di identità per ogni tenant.

Ottenere i componenti

Puoi recuperare lo script UI, l'SDK client e i file CSS direttamente dalla CDN aggiungendoli all'elemento <head> della pagina:

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

In alternativa, puoi installare i moduli utilizzando npm e farvi riferimento per le importazioni 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'

Creazione di un'interfaccia utente per la selezione del tenant

FirebaseUI gestisce solo i flussi di accesso; dovrai creare una tua UI per consentire agli utenti di selezionare un tenant con cui accedere. I passaggi seguenti ti mostrano come per creare una semplice pagina di selezione dei tenant con due pulsanti.

  1. Creare due elementi di selezione dei tenant.

    <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. Crea un elemento contenitore per FirebaseUI.

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

  3. Crea una configurazione per ogni tenant.

    <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. Aggiungi gestori dei clic per la selezione dei tenant per eseguire il rendering del componente di accesso con FirebaseUI. Tieni presente che prima di eseguire il rendering del componente dell'interfaccia utente, dovrai Impostare l'ID tenant sull'istanza Auth.

    <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. Avvia l'app. Viene visualizzata una schermata di accesso con due pulsanti tenant.

Anche se in questo esempio vengono utilizzati due semplici pulsanti e una singola pagina, molti sono possibili i flussi UX. Ad esempio, potresti chiedere agli utenti di inserire il proprio indirizzo email su una pagina, quindi presentare una schermata di selezione dell'account cliente. Puoi anche ospitare pagine di accesso separate per ogni tenant. In questo caso, devi analizzare l'ID tenant dall'URL e impostarlo sull'oggetto Auth.

Passaggi successivi