Creare una pagina di accesso per più tenant con Identity Platform

Questa pagina mostra come creare una pagina di accesso per più tenant in Identity Platform utilizzando FirebaseUI, una raccolta di componenti UI open source predefiniti, e l'SDK client.

Prima di iniziare

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

Recuperare i componenti

Puoi recuperare lo script UI, l'SDK client e i file CSS direttamente dalla 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'

Crea un'interfaccia utente per la selezione dei tenant

FirebaseUI gestisce solo i flussi di accesso; devi creare la tua UI per consentire agli utenti di selezionare un tenant con cui accedere.

Per creare una pagina di selezione di base 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. Per eseguire il rendering del componente di accesso con FirebaseUI, aggiungi i gestori di clic per la selezione del tenant. Prima di eseguire il rendering del componente UI, imposta 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.

Puoi anche creare flussi di lavoro di più pagine. Ad esempio, puoi creare un flusso di lavoro in cui la prima pagina chiede agli utenti il loro indirizzo email e la pagina successiva consente loro di selezionare un tenant. Inoltre, puoi ospitare pagine di accesso separate per ogni tenant. Per farlo, devi analizzare l'ID tenant dall'URL e impostarlo sull'oggetto Auth.

Passaggi successivi