Esta página foi traduzida pela API Cloud Translation.
Switch to English

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