Crear una página de inicio de sesión para varios propietarios

En este documento se explica cómo crear una página de inicio de sesión específica de un arrendatario para Identity Platform mediante FirebaseUI, una colección de componentes de interfaz de usuario prediseñados de código abierto, y el SDK de cliente.

El código de ejemplo que muestra los pasos descritos en este tutorial está disponible en GitHub.

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 un cliente

FirebaseUI solo gestiona los flujos de inicio de sesión. Tendrás que crear tu propia interfaz de usuario para que los usuarios seleccionen un arrendatario con el que iniciar sesión. En los siguientes pasos se muestra cómo crear una página de selección de arrendatario sencilla con dos botones.

  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. Añade controladores de clics de selección de inquilinos para renderizar el componente de inicio de sesión con FirebaseUI. Ten en cuenta que, antes de renderizar el componente de la interfaz de usuario, tendrás que definir 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.

Aunque en este ejemplo se usan dos botones sencillos y una sola página, se pueden crear muchos flujos de experiencia de usuario diferentes. Por ejemplo, puedes pedir a los usuarios que introduzcan su correo en una página y, a continuación, mostrar una pantalla de selección de inquilino. También puedes alojar páginas de inicio de sesión independientes para cada arrendatario. En este caso, tendrías que analizar el ID de arrendatario de la URL y, a continuación, definirlo en el objeto Auth.

Siguientes pasos