Crie uma página de início de sessão para vários inquilinos com a Identity Platform

Esta página mostra-lhe como criar uma página de início de sessão para vários inquilinos na Identity Platform através do FirebaseUI, que é uma coleção de componentes de IU pré-criados e de código aberto, e do SDK do cliente.

Antes de começar

  1. Ative a multilocação e crie, pelo menos, dois inquilinos.
  2. Configure fornecedores de identidade para cada inquilino.

Obtenha os componentes

Pode obter o script da IU, o SDK de cliente e os ficheiros CSS diretamente da RFC adicionando-os ao elemento <head> da sua página:

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

Em alternativa, pode instalar os módulos através de npm e, em seguida, referenciá-los como importações 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'

Crie uma IU para selecionar inquilinos

A FirebaseUI apenas processa fluxos de início de sessão. Tem de criar a sua própria IU para os utilizadores selecionarem um inquilino com o qual iniciar sessão.

Para criar uma página de seleção de inquilinos básica com dois botões, faça o seguinte:

  1. Crie dois elementos de seleção de inquilinos.

    <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. Crie um elemento de contentor para o FirebaseUI.

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

  3. Crie uma configuração para cada inquilino.

    <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. Para renderizar o componente de início de sessão com o FirebaseUI, adicione controladores de cliques de seleção de inquilinos. Antes de renderizar o componente da IU, defina o ID do inquilino na instância 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. Inicie a app. É apresentado um ecrã de início de sessão com dois botões de inquilino.

Também pode criar fluxos de trabalho de várias páginas. Por exemplo, pode criar um fluxo de trabalho em que a primeira página pede aos utilizadores o respetivo email e a página seguinte permite-lhes selecionar um inquilino. Além disso, pode alojar páginas de início de sessão separadas para cada inquilino. Para o fazer, tem de analisar o ID do inquilino a partir do URL e, em seguida, defini-lo no objeto Auth.

O que se segue?