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 open source predefiniti dell'interfaccia utente e l'SDK client.

Il codice di esempio che mostra i passaggi trattati in questo tutorial è disponibile su GitHub.

Prima di iniziare

  1. Abilita l'architettura multi-tenancy e crea almeno due tenant.
  2. Configura i provider di identità per ogni tenant.

Recupero dei componenti

Puoi recuperare lo script dell'interfaccia utente, l'SDK del 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, quindi 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 una UI di selezione dei tenant

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

  1. Crea 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 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, devi 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.

Sebbene questo esempio utilizzi due semplici pulsanti e una singola pagina, sono possibili molti flussi UX diversi. Ad esempio, potresti chiedere agli utenti di inserire il proprio indirizzo email in una pagina e poi presentare una schermata di selezione del tenant. Potresti anche ospitare pagine di accesso separate per ogni tenant; in questo caso, dovrai analizzare l'ID tenant dall'URL e poi impostarlo sull'oggetto Auth.

Passaggi successivi