Como criar uma página de login para vários locatários

Neste documento, você aprenderá como criar uma página de login específica do locatário para o Identity Platform usando o FirebaseUI, uma coleção de componentes de IU pré-criados de código aberto, e o SDK do cliente.

O código de amostra que demonstra as etapas abordadas neste tutorial está disponível no GitHub.

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.

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

Como criar uma IU de seleção de locatários

A FirebaseUI só processa fluxos de login. Você precisará criar sua própria IU para que os usuários selecionem um locatário para fazer login. As etapas a seguir mostram como criar uma página de seleção de locatário simples com dois botões.

  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. Adicione gerenciadores de clique de seleção de locatário para renderizar o componente de login com o FirebaseUI. Antes de renderizar o componente da IU, você precisará definir 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.

Mesmo que esse exemplo use dois botões simples e uma única página, muitos fluxos de UX diferentes são possíveis. Por exemplo, você pode pedir que os usuários insiram e-mails em uma página e exibir uma tela de seleção de locatário. Você também pode hospedar páginas de login separadas para cada locatário. Nesse caso, você precisaria analisar o ID do locatário a partir do URL e defini-lo no objeto Auth.

A seguir