Crear una página de inicio de sesión para varios clientes con Identity Platform

En esta página se explica cómo crear una página de inicio de sesión para varios clientes en Identity Platform mediante FirebaseUI, que es una colección de componentes de interfaz de usuario prediseñados de código abierto, y el SDK de cliente.

Antes de empezar

  1. Habilita la arquitectura multiempresa y crea al menos dos empresas.
  2. Configura proveedores de identidades para cada arrendatario.

Obtener los componentes

Puedes obtener el script de la interfaz de usuario, el SDK de cliente y los archivos CSS directamente desde la CDN añadiéndolos 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" />

También puedes instalar los módulos con npm y, a continuación, hacer referencia a ellos como importaciones de 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'

Crear una interfaz de usuario para seleccionar inquilinos

FirebaseUI solo gestiona los flujos de inicio de sesión. Debes crear tu propia interfaz de usuario para que los usuarios seleccionen un arrendatario con el que iniciar sesión.

Para crear una página de selección de inquilino básica con dos botones, siga estos pasos:

  1. Crea dos elementos de selección de arrendatario.

    <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 arrendatario.

    <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 inicio de sesión con FirebaseUI, añade controladores de clics de selección de tenant. Antes de renderizar el componente de interfaz de usuario, define el ID de arrendatario 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. Abre la aplicación. Aparecerá una pantalla de inicio de sesión con dos botones de inquilino.

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 pida a los usuarios su correo y la siguiente les permita seleccionar un arrendatario. Además, puede alojar páginas de inicio de sesión independientes para cada cliente. Para ello, debe analizar el ID de cliente de la URL y, a continuación, definirlo en el objeto Auth.

Siguientes pasos