Authentification à l'aide de SAML dans les applications Web

Si vous êtes passé à Firebase Authentication with Identity Platform, vous pouvez authentifier vos utilisateurs avec Firebase à l'aide du fournisseur d'identité SAML de votre choix. Cela permet d'utiliser votre solution SSO basée sur SAML pour connecter les utilisateurs à votre application Firebase.

Firebase Authentication ne prend en charge que le flux SAML initié par le fournisseur de services.

Avant que tu commences

Pour connecter des utilisateurs à l'aide d'un fournisseur d'identité SAML, vous devez d'abord collecter certaines informations auprès du fournisseur :

  • L'identifiant d'entité du fournisseur : un URI qui identifie le fournisseur d'identité.
  • URL SAML SSO du fournisseur : URL de la page de connexion du fournisseur d'identité.
  • Le certificat de clé publique du fournisseur : Le certificat utilisé pour valider les jetons signés par le fournisseur d'identité.
  • ID d'entité de votre application : un URI qui identifie votre application, le "fournisseur de services".

Une fois que vous disposez des informations ci-dessus, activez SAML en tant que fournisseur de connexion pour votre projet Firebase :

  1. Ajoutez Firebase à votre projet JavaScript .

  2. Si vous n'avez pas effectué la mise à niveau vers Firebase Authentication avec Identity Platform, faites-le. L'authentification SAML n'est disponible que dans les projets mis à niveau.

  3. Sur la page Fournisseurs de connexion de la console Firebase, cliquez sur Ajouter un nouveau fournisseur , puis cliquez sur SAML .

  4. Donnez un nom à ce fournisseur. Notez l'ID de fournisseur qui est généré : quelque chose comme saml.example-provider . Vous aurez besoin de cet ID lorsque vous ajouterez un code de connexion à votre application.

  5. Spécifiez l'ID d'entité, l'URL SSO et le certificat de clé publique de votre fournisseur d'identité. Spécifiez également l'ID d'entité de votre application (le fournisseur de services). Ces valeurs doivent correspondre exactement aux valeurs que votre fournisseur vous a attribuées.

  6. Enregistrez vos modifications.

  7. Si vous n'avez pas encore autorisé le domaine de votre application, ajoutez-le à la liste verte sur la page Authentification > Paramètres de la console Firebase.

Gérer le flux de connexion avec le SDK Firebase

Pour gérer le flux de connexion avec le SDK Firebase JavaScript, procédez comme suit :

  1. Créez une instance d'un SAMLAuthProvider à l'aide de l'ID de fournisseur que vous avez obtenu dans la console Firebase.

    API Web modulaire

    import { SAMLAuthProvider } from "firebase/auth";

const provider = new SAMLAuthProvider('saml.example-provider');

    API d'espace de noms Web

    var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
``

  1. Authentifiez-vous auprès de Firebase à l'aide de l'objet fournisseur SAML.

    Vous pouvez soit rediriger l'utilisateur vers la page de connexion du fournisseur, soit ouvrir la page de connexion dans une fenêtre de navigateur contextuelle.

    Rediriger le flux

    Redirigez vers la page de connexion du fournisseur en appelant signInWithRedirect() :

    API Web modulaire

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    API d'espace de noms Web

    firebase.auth().signInWithRedirect(provider);

    Une fois que l'utilisateur s'est connecté et revient à votre application, vous pouvez obtenir le résultat de la connexion en appelant getRedirectResult() .

    API Web modulaire

    import { getAuth, getRedirectResult, SAMLAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.

    // Provider data available using getAdditionalUserInfo()
  })
  .catch((error) => {
    // Handle error.
  });

    API d'espace de noms Web

    firebase.auth().getRedirectResult()
  .then((result) => {
    // User is signed in.

    // Provider data available in result.additionalUserInfo.profile,
    // or from the user's ID token obtained from result.user.getIdToken()
    // as an object in the firebase.sign_in_attributes custom claim.
  })
  .catch((error) => {
    // Handle error.
  });

    Flux contextuel

    API Web modulaire

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.

    // Provider data available in result.additionalUserInfo.profile,
    // or from the user's ID token obtained from result.user.getIdToken()
    // as an object in the firebase.sign_in_attributes custom claim.
  })
  .catch((error) => {
    // Handle error.
  });

    API d'espace de noms Web

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // User is signed in.

    // Provider data available in result.additionalUserInfo.profile,
    // or from the user's ID token obtained from result.user.getIdToken()
    // as an object in the firebase.sign_in_attributes custom claim.
  })
  .catch((error) => {
    // Handle error.
  });

  2. Bien que les exemples ci-dessus se concentrent sur les flux de connexion, vous pouvez utiliser le même modèle pour lier un fournisseur SAML à un utilisateur existant à l'aide de linkWithRedirect() et linkWithPopup() , et ré-authentifier un utilisateur avec reauthenticateWithRedirect() et reauthenticateWithPopup() , qui peut être utilisé pour récupérer de nouvelles informations d'identification pour les opérations sensibles qui nécessitent une connexion récente.