Crear una página de acceso para usuarios múltiples

En este documento, se muestra cómo compilar una página de acceso de usuarios específica de la instancia para Identity Platform con FirebaseUI, una colección de componentes de IU compilados previamente de código abierto, y el SDK de cliente.

El código de muestra con el que se ilustran los pasos que se analizan en este instructivo está disponible en GitHub.

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 de selección de usuarios

FirebaseUI solo maneja los flujos de acceso, por lo que deberás crear tu propia IU para que los usuarios seleccionen un grupo de usuarios con el que acceder. En los siguientes pasos, se muestra cómo compilar una página de selección de grupo de usuarios simple con dos botones.

  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. Agrega controladores de clics de selección de grupos de usuarios para procesar el componente de acceso con FirebaseUI. Ten en cuenta que antes de procesar el componente de IU, deberás establecer 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.

Si bien en este ejemplo se usan dos botones simples y una sola página, es posible que se usen muchos flujos de UX diferentes. Por ejemplo, puedes pedirles a los usuarios que ingresen su correo electrónico en una página y, luego, presenten una pantalla de selección de grupos de usuarios. También puedes alojar páginas de acceso separadas para cada usuario; en este caso, deberías analizar el ID de usuario de la URL y, luego, configurarlo en el objeto Auth.

¿Qué sigue?