Authentifier à l'aide de SAML dans les applications Web

Si vous avez effectué une mise à niveau vers l'authentification Firebase avec 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.

L'authentification Firebase prend uniquement en charge 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'ID d'entité du fournisseur : un URI qui identifie le fournisseur d'identité.
  • URL SSO SAML 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é.
  • L'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 du fournisseur généré : quelque chose comme saml.example-provider . Vous aurez besoin de cet identifiant lorsque vous ajouterez un code de connexion à votre application.

  5. Spécifiez l'ID d'entité de votre fournisseur d'identité, l'URL SSO et le certificat de clé publique. 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 JavaScript Firebase, procédez comme suit :

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

    API modulaire Web

    import { SAMLAuthProvider } from "firebase/auth";

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

    API avec 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 contextuelle du navigateur.

    Rediriger le flux

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

    API modulaire Web

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

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

    API avec espace de noms Web

    firebase.auth().signInWithRedirect(provider);

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

    API modulaire Web

    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 avec 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 pop-up

    API modulaire Web

    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 avec 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.
  });

    Le jeton d'ID et l'objet UserInfo contiennent l'adresse e-mail de l'utilisateur uniquement si elle est fournie dans l'attribut NameID de l'assertion SAML du fournisseur d'identité :

    <Subject>
  <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">test@email.com</NameID>
</Subject>

  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 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.