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 direttamente lo script dell'interfaccia utente, l'SDK client e i file CSS dalla rete CDN aggiungendoli all'elemento <head> della tua 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 poi farvi riferimento come 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. Creare 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 del tenant per visualizzare il 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, puoi chiedere agli utenti di inserire il proprio indirizzo email una pagina, quindi presenta una schermata di selezione del tenant. Puoi anche ospitare eventi le pagine di accesso di ciascun tenant; in questo caso, dovrai analizzare l'ID tenant dall'URL, per poi impostarla sull'oggetto Auth.

Passaggi successivi