S'authentifier avec OpenID Connect dans les applications Web

Si vous êtes passé à Firebase Authentication with Identity Platform, vous pouvez authentifier vos utilisateurs avec Firebase à l'aide du fournisseur conforme à OpenID Connect (OIDC) de votre choix. Cela permet d'utiliser des fournisseurs d'identité qui ne sont pas compatibles avec Firebase de manière native.

Avant de commencer

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

  • ID client : chaîne unique au fournisseur qui identifie votre application. Votre fournisseur peut vous attribuer un ID client différent pour chaque plate-forme que vous prenez en charge. Il s'agit de l'une des valeurs de la revendication aud dans les jetons d'identité émis par votre fournisseur.

  • Code secret du client : chaîne secrète que le fournisseur utilise pour confirmer la propriété d'un ID client. Pour chaque ID client, vous aurez besoin d'un code secret client correspondant. (Cette valeur n'est requise que si vous utilisez le flux de code d'autorisation, qui est fortement recommandé.)

  • Émetteur : chaîne qui identifie votre fournisseur. Cette valeur doit être une URL qui, lorsqu'elle est ajoutée à /.well-known/openid-configuration, correspond à l'emplacement du document de découverte OIDC du fournisseur. Par exemple, si l'émetteur est https://auth.example.com, le document de découverte doit être disponible à l'adresse https://auth.example.com/.well-known/openid-configuration.

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

  1. Ajoutez Firebase à votre projet JavaScript.

  2. Si vous n'êtes pas encore passé à Firebase Authentication with Identity Platform, faites-le. L'authentification OpenID Connect 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 OpenID Connect.

  4. Indiquez si vous utiliserez le flux avec code d'autorisation ou le flux d'attribution implicite.

    Vous devez toujours utiliser le flux de code si votre fournisseur le prend en charge. Le flux implicite est moins sécurisé et son utilisation est fortement déconseillée.

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

  6. Spécifiez votre ID client, votre code secret client et la chaîne d'émetteur de votre fournisseur. Ces valeurs doivent correspondre exactement à celles que votre fournisseur vous a attribuées.

  7. Enregistrez les modifications.

Gérer le flux de connexion avec le SDK Firebase

Le moyen le plus simple d'authentifier vos utilisateurs avec Firebase à l'aide de votre fournisseur OIDC consiste à gérer l'intégralité du processus 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'OAuthProvider à l'aide de l'ID de fournisseur que vous avez obtenu dans la console Firebase.

    Web 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web 

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. Facultatif : Spécifiez des paramètres OAuth personnalisés supplémentaires que vous souhaitez envoyer avec la requête OAuth.

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Contactez votre fournisseur pour connaître les paramètres qu'il accepte. Notez que vous ne pouvez pas transmettre les paramètres requis par Firebase avec setCustomParameters. Ces paramètres sont client_id, response_type, redirect_uri, state, scope et response_mode.

  3. Facultatif : Spécifiez des niveaux d'accès OAuth 2.0 supplémentaires au-delà du profil de base que vous souhaitez demander au fournisseur d'authentification.

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Contactez votre fournisseur pour connaître les niveaux d'accès qu'il prend en charge.

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

    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, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .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.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

  5. 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 OIDC à un utilisateur existant à l'aide de linkWithRedirect() et linkWithPopup(), et pour 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.

Gérer manuellement le flux de connexion

Si vous avez déjà implémenté le flux de connexion OpenID Connect dans votre application, vous pouvez utiliser le jeton d'ID directement pour vous authentifier auprès de Firebase :

Web 

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

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Web 

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });