Créer une page de connexion pour plusieurs locataires avec Identity Platform

Cette page explique comment créer une page de connexion pour plusieurs locataires dans Identity Platform à l'aide de FirebaseUI, qui est un ensemble de composants d'interface utilisateur prédéfinis Open Source, et le SDK client.

Avant de commencer

  1. Activez l'architecture mutualisée et créez au moins deux locataires.
  2. Configurez des fournisseurs d'identité pour chaque locataire.

Obtenir les composants

Vous pouvez récupérer le script d'interface utilisateur, le SDK client et les fichiers CSS directement à partir du CDN en les ajoutant à l'élément <head> de votre page :

<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" />

Vous pouvez également installer les modules à l'aide de npm, puis les référencer sous forme d'importations 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'

Créer une UI pour sélectionner des locataires

FirebaseUI ne gère que les flux de connexion. Vous devez créer votre propre interface utilisateur pour que les utilisateurs puissent sélectionner un locataire avec lequel se connecter.

Pour créer une page de sélection de locataire simple avec deux boutons, procédez comme suit :

  1. Créez deux éléments de sélection de locataire.

    <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. Créer un élément de conteneur pour FirebaseUI.

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

  3. Créez une configuration pour chaque locataire.

    <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. Pour afficher le composant de connexion avec FirebaseUI, ajoutez des gestionnaires de clic de sélection de locataire. Avant d'afficher le composant d'interface utilisateur, définissez l'ID de locataire sur l'instance 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. Lancez votre application. Un écran de connexion avec deux boutons "locataires" s'affiche.

Vous pouvez également créer des workflows multipages. Par exemple, vous pouvez créer un workflow dans lequel la première page demande aux utilisateurs leur adresse e-mail et la page suivante leur permet de sélectionner un locataire. Vous pouvez également héberger des pages de connexion distinctes pour chaque locataire. Pour ce faire, vous devez analyser l'ID de locataire à partir de l'URL, puis le définir sur l'objet Auth.

Étapes suivantes