Crea una página de acceso para usuarios múltiples con Identity Platform

En esta página, se muestra cómo compilar una página de acceso para varios usuarios en Identity Platform con FirebaseUI, que es una colección de componentes de IU compilados previamente de código abierto, y el SDK de cliente.

Antes de comenzar

  1. Habilita los grupos de usuarios múltiples y crea al menos dos grupos de usuarios.
  2. Configura los proveedores de identidad para cada grupo de usuarios.

Obtén los componentes

Para recuperar la secuencia de comandos de la IU, el SDK cliente y los archivos CSS directamente desde la CDN, agrégalos al elemento <head> de tu 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" />

Como alternativa, puedes instalar los módulos mediante npm y, luego, hacer referencia a ellos como importaciones 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'

Compila una IU para seleccionar usuarios

FirebaseUI solo controla los flujos de acceso, por lo que debes crear tu propia IU para que los usuarios seleccionen un grupo de usuarios con el que acceder.

Para compilar una página de selección de grupo de usuarios básica con dos botones, haz lo siguiente:

  1. Crea dos elementos de selección de grupo de usuarios.

    <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. Crea un elemento contenedor para FirebaseUI.

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

  3. Crea una configuración para cada grupo de usuarios.

    <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 el componente de acceso con FirebaseUI, agrega controladores de clics de selección de grupos de usuarios. Antes de renderizar el componente de IU, establece el ID del grupo de usuarios en la instancia 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. Inicia tu app. Aparecerá una pantalla de acceso con dos botones de grupo de usuarios.

También puedes crear flujos de trabajo de varias páginas. Por ejemplo, puedes crear un flujo de trabajo en el que la primera página les solicite a los usuarios su correo electrónico y la siguiente les permita seleccionar un inquilino. Además, puedes alojar páginas de acceso separadas para cada usuario. Para ello, debes analizar el ID del usuario de la URL y, luego, configurarlo en el objeto Auth.

¿Qué sigue?