Authentifier à l'aide d'OpenID Connect 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 compatible OpenID Connect (OIDC) de votre choix. Cela permet d'utiliser des fournisseurs d'identité non pris en charge nativement par Firebase.

Avant que tu commences

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

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

  • Secret client : une 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 secret client correspondant. (Cette valeur est obligatoire uniquement si vous utilisez le flux de code d'authentification , ce qui est fortement recommandé.)

  • Émetteur : une 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 sur https://auth.example.com/.well-known/openid-configuration .

Une fois que vous disposez des informations ci-dessus, activez OpenID Connect 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 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 nouveau fournisseur , puis cliquez sur OpenID Connect .

  4. Sélectionnez si vous utiliserez le flux de code d'autorisation ou le flux d'octroi 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. Donnez un nom à ce fournisseur. Notez l'ID du fournisseur généré : quelque chose comme oidc.example-provider . Vous aurez besoin de cet identifiant lorsque vous ajouterez un code de connexion à votre application.

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

  7. Enregistrez vos modifications.

Gérer le flux de connexion avec le SDK Firebase

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

    API modulaire Web

    import { OAuthProvider } from "firebase/auth";

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

    API avec espace de noms Web

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

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

    API modulaire Web

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

    API avec espace de noms Web

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

    Vérifiez auprès de votre fournisseur les paramètres qu'il prend en charge. 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 étendues OAuth 2.0 supplémentaires au-delà du profil de base que vous souhaitez demander au fournisseur d'authentification.

    API modulaire Web

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

    API avec espace de noms Web

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

    Vérifiez auprès de votre fournisseur les étendues qu’il prend en charge.

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

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

    API avec espace de noms 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 pop-up

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

    API avec espace de noms 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 lier un fournisseur OIDC à 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.

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 :

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

API avec espace de noms 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.
    });