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.

Il codice di esempio che mostra i passaggi descritti in questo tutorial è disponibile 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 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 la tua interfaccia utente per consentire agli utenti di selezionare un tenant con cui accedere. I passaggi riportati di seguito mostrano come creare una semplice pagina di selezione del tenant con due pulsanti.

  1. Crea due elementi di selezione del 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 del tenant per visualizzare il componente di accesso con FirebaseUI. Tieni presente che prima di eseguire il rendering del componente dell'interfaccia utente, devi impostare l'ID tenant nell'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 diversiflussi 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