Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Authentification à l'aide d'OpenID Connect dans les applications Web

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Si vous êtes passé à Firebase Authentication with 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 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 fournisseur.

  • Client secret : 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 n'est requise que si vous utilisez le flux de code d'authentification , ce qui est fortement recommandé.)

  • Issuer : Une chaîne qui identifie votre fournisseur. Cette valeur doit être une URL qui, lorsqu'elle est ajoutée avec /.well-known/openid-configuration , est 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'autorisation 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 qui est généré : quelque chose comme oidc.example-provider . Vous aurez besoin de cet ID 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 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 version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('oidc.example-provider');
    

    Web version 8

    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 version 9

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

    Web version 8

    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.

    Web version 9

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

    Web version 8

    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 de navigateur contextuelle.

    Rediriger le flux

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

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    

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

    Web version 9

    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 version 8

    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 contextuel

    Web version 9

    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 version 8

    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 :

Web version 9

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 version 8

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