Créer une page de connexion pour plusieurs locataires

Ce document explique comment créer une page de connexion spécifique au locataire pour Identity Platform à l'aide de FirebaseUI, un ensemble de composants d'interface utilisateur prédéfinis Open Source, et le SDK client.

Un exemple de code illustrant les étapes décrites dans ce tutoriel est disponible sur GitHub.

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 interface utilisateur de sélection de locataire

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. Les étapes suivantes vous expliquent comment créer une page de sélection de locataire simple avec deux boutons.

  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. Ajoutez des gestionnaires de clic de sélection de locataire afin d'afficher le composant de connexion avec FirebaseUI. Notez qu'avant d'afficher le composant d'interface utilisateur, vous devez définir 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.

Bien que cet exemple utilise deux boutons simples et une seule page, de nombreux flux d'expérience utilisateur sont possibles. Par exemple, vous pouvez demander aux utilisateurs de saisir leur adresse e-mail sur une page, puis présenter un écran de sélection de locataire. Vous pouvez également héberger des pages de connexion distinctes pour chaque locataire. Dans ce cas, vous devez analyser l'ID de locataire à partir de l'URL, puis le définir sur l'objet Auth.

Étape suivante