Criar uma página de início de sessão para vários inquilinos

Este documento mostra como criar uma página de início de sessão específica do inquilino para a Identity Platform através da FirebaseUI, uma coleção de componentes de IU pré-criados de código aberto e do SDK do cliente.

O código de exemplo que demonstra os passos abordados neste tutorial está disponível no GitHub.

Antes de começar

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

Obter 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'

Criar uma IU de seleção de 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. Os passos seguintes mostram como criar uma página de seleção de inquilinos simples com dois botões.

  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. Adicione controladores de cliques de seleção de inquilinos para renderizar o componente de início de sessão com o FirebaseUI. Tenha em atenção que, antes de renderizar o componente da IU, tem de definir 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.

Embora este exemplo use dois botões simples e uma única página, são possíveis muitos fluxos de UX diferentes. Por exemplo, pode pedir aos utilizadores que introduzam o respetivo email numa página e, em seguida, apresentar um ecrã de seleção de inquilinos. Também pode alojar páginas de início de sessão separadas para cada inquilino. Neste caso, tem de analisar o ID do inquilino a partir do URL e, em seguida, defini-lo no objeto Auth.

O que se segue?