S'authentifier avec 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. Vous pouvez ainsi utiliser votre solution d'authentification unique (SSO) basée sur SAML pour connecter les utilisateurs à votre application Firebase.

Firebase Authentication n'est compatible qu'avec le flux SAML initié par le fournisseur de services.

Avant de commencer

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

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

Une fois que vous avez obtenu les informations ci-dessus, activez SAML comme fournisseur de connexion pour votre projet Firebase :

  1. Ajoutez Firebase à votre projet JavaScript.

  2. Si vous n'êtes pas passé à Firebase Authentication with 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 fournisseur, puis sur SAML.

  4. Attribuez un nom à ce fournisseur. Notez l'ID de fournisseur généré, par exemple saml.example-provider. Vous aurez besoin de cet ID lorsque vous ajouterez le code de connexion à votre application.

  5. Spécifiez l'ID d'entité, l'URL d'authentification unique 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 à celles que votre fournisseur vous a attribuées.

  6. Enregistrez les modifications.

  7. Si vous n'avez pas encore autorisé le domaine de votre application, ajoutez-le à la liste des autorisations 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'SAMLAuthProvider à l'aide de l'ID de fournisseur que vous avez obtenu dans la console Firebase.

    Web 

    import { SAMLAuthProvider } from "firebase/auth";

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

    Web 

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

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

    Vous pouvez rediriger l'utilisateur vers la page de connexion du fournisseur ou ouvrir la page de connexion dans une fenêtre pop-up du navigateur.

    Flux de redirection

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

    Web 

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

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

    Web 

    firebase.auth().signInWithRedirect(provider);

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

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

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

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

    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'identité 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 associer un fournisseur SAML à un utilisateur existant à l'aide de linkWithRedirect() et linkWithPopup(), et réauthentifier un utilisateur avec reauthenticateWithRedirect() et reauthenticateWithPopup(), qui peuvent être utilisés pour récupérer des identifiants récents pour les opérations sensibles nécessitant une connexion récente.