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 OpenID Connect (OIDC) de votre choix. Ce permet d'utiliser des fournisseurs d'identité non compatibles de manière native avec Firebase.

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 propre 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'identification émis par votre d'un fournisseur de services agréé.

  • Code secret du client: chaîne secrète utilisée par le fournisseur 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, ce qui est fortement recommandé.)

  • Issuer (É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 disposez des 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 passé à Firebase Authentication with Identity Platform, faites-le. 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 de code d'autorisation ou le flux d'attribution implicite.

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

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

  6. Spécifiez votre ID client et votre code secret du client, ainsi que 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 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'un 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 les autres paramètres OAuth personnalisés que vous souhaitez 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 de 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 champs d'application OAuth 2.0 supplémentaires en plus du profil de base pour lequel 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');

    Renseignez-vous auprès de votre fournisseur pour connaître les niveaux d'accès compatibles.

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

    Flux de redirection

    Redirigez 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 de retour dans votre application, vous pouvez obtenir le résultat de 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.
  });

    Procédure dans les 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 réauthentifier un utilisateur avec reauthenticateWithRedirect() et reauthenticateWithPopup(), qui peuvent être utilisés pour récupérer de nouveaux identifiants pour les opérations sensibles qui nécessitent une connexion récente.

Gérer le flux de connexion manuellement

Si vous avez déjà implémenté la procédure de connexion OpenID Connect dans votre application, vous 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.
    });