Criar uma página de login para vários locatários com o Identity Platform

Nesta página, mostramos como criar uma página de login para vários locatários no Identity Platform usando a FirebaseUI, que é uma coleção de componentes UI pré-criados de código aberto, e o SDK do cliente.

Antes de começar

  1. Ative a multilocação e crie pelo menos dois locatários.
  2. Configure provedores de identidade para cada locatário.

Receber os componentes

É possível buscar o script da IU, o SDK do cliente e os arquivos CSS diretamente na CDN, 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" />

Se preferir, instale os módulos usando npm e, em seguida, referencie-os 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 UI para selecionar locatários

A FirebaseUI só processa fluxos de login. Você precisa criar sua própria UI para que os usuários selecionem um locatário para fazer login.

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

  1. Crie dois elementos de seleção de locatário.

    <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 contêiner para a FirebaseUI.

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

  3. Crie uma configuração para cada locatário.

    <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 login com o FirebaseUI, adicione gerenciadores de clique de seleção de locatário. Antes de renderizar o componente da UI, defina o ID do locatário 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 seu app. Uma tela de login com dois botões de locatário será exibida.

Também é possível criar fluxos de trabalho de várias páginas. Por exemplo, você pode criar um fluxo de trabalho em que a primeira página pede o e-mail dos usuários, e a próxima permite que eles selecionem um locatário. Além disso, você pode hospedar páginas de login separadas para cada locatário. Para fazer isso, analise o ID do locatário no URL e defina-o no objeto Auth.

A seguir