Procéder à la connexion des utilisateurs avec Google

Ce document explique comment utiliser Identity Platform pour connecter des utilisateurs avec Google.

Avant de commencer

Ce tutoriel suppose que vous avez déjà activé Identity Platform et que vous disposez d'une application Web de base écrite en HTML et JavaScript. Pour savoir comment, consultez le guide de démarrage rapide.

Configurer Google en tant que fournisseur

Pour configurer Google en tant que fournisseur d'identité :

  1. Accédez à la page Fournisseurs d'identité dans la console Google Cloud.

    Accéder à la page Fournisseurs d'identité

  2. Cliquez sur Ajouter un fournisseur.

  3. Dans la liste, sélectionnez Google.

  4. Saisissez votre ID client Web et votre code secret Web Google. Si vous n'avez pas encore d'ID et de code secret, vous pouvez en obtenir à partir de la page API et services.

  5. Configurez l'URI répertorié sous Configurer Google en tant qu'URI de redirection OAuth valide pour votre application Google.

  6. Enregistrez les domaines de votre application en cliquant sur Ajouter un domaine sous Domaines autorisés. À des fins de développement, localhost est déjà activé par défaut.

  7. Sous Configurer votre application, cliquez sur Informations sur la configuration. Copiez l'extrait dans le code de votre application pour initialiser le SDK client Identity Platform.

  8. Cliquez sur Enregistrer.

Procéder à la connexion des utilisateurs avec le SDK client

  1. Créez une instance de l'objet de fournisseur Google :

    Web version 9

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Web version 8

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js

  1. Facultatif : Ajoutez des champs d'application OAuth. Les champs d'application spécifient les données que vous demandez à Google. Des données plus sensibles peuvent nécessiter des champs d'application spécifiques. Consultez la documentation du fournisseur pour déterminer les champs d'application dont votre application a besoin.

    Web version 9

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    auth_google_provider_scopes.js

    Web version 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js

  1. Facultatif : Localisez le flux d'authentification. Vous pouvez spécifier un langage ou utiliser le langage par défaut de l'appareil :

    Web version 9

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Web version 8

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js

  2. Facultatif : spécifiez des paramètres OAuth personnalisés supplémentaires. Ces paramètres sont spécifiques à Google et sont généralement utilisés pour personnaliser l'authentification. Vous ne pouvez pas transmettre des paramètres réservés par OAuth ou Identity Platform.

Web version 9

provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
auth_google_provider_params.js

Web version 8

provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
google-signin.js

  1. Utilisez l'objet du fournisseur Google pour vous connecter à l'utilisateur. Vous pouvez soit ouvrir une fenêtre pop-up, soit rediriger la page actuelle. La redirection est plus facile pour les utilisateurs d'appareils mobiles.

    Pour afficher une fenêtre pop-up, appelez signInWithPopup() :

    Web version 9

    import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
    auth_google_signin_popup.js

    Web version 8

    firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
    google-signin.js

    Pour rediriger la page, appelez d'abord signInWithRedirect().

    Suivez les bonnes pratiques lorsque vous utilisez signInWithRedirect, linkWithRedirect ou reauthenticateWithRedirect.

    Web version 9

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_signin_redirect.js

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    index.js

    Ensuite, récupérez le jeton Google en appelant getRedirectResult() lorsque votre page se charge :

    Web version 9

    import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access Google APIs.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
    auth_google_signin_redirect_result.js

    Web version 8

    firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Google Access Token. You can use it to access the Google API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
    google-signin.js

Une fois que vous disposez d'un jeton d'accès, vous pouvez l'utiliser pour appeler l'API Google. Exemple :

REST

curl -H "Authorization: Bearer [TOKEN]" https://www.googleapis.com/oauth2/v2/userinfo

Procéder à la connexion manuelle des utilisateurs

Si vous ne souhaitez pas utiliser le SDK Client, vous pouvez également gérer le flux de connexion manuellement :

  1. Intégrez l'authentification Google à votre application en suivant la procédure décrite dans sa documentation pour les développeurs.

  2. Connectez l'utilisateur avec Google à l'aide du flux que vous avez mis en œuvre à l'étape précédente.

  3. Remplacez le jeton reçu de Google par un identifiant Identity Platform :

    Web version 9

    import { GoogleAuthProvider } from "firebase/auth";

const credential = GoogleAuthProvider.credential(idToken);
    auth_google_provider_credential.js

    Web version 8

    var credential = firebase.auth.GoogleAuthProvider.credential(idToken);
    google-signin.js

  4. Utilisez l'identifiant pour connecter l'utilisateur avec Identity Platform :

    Web version 9

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

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // ...
  });
    auth_signin_credential.js

    Web version 8

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });
    index.js

Étapes suivantes