Intégrer Google Sign-In à votre application Web

Google Sign-In gère le flux OAuth 2.0 et le cycle de vie des jetons, en simplifiant votre intégration aux API Google. Un utilisateur a toujours la possibilité de révoquer l'accès à un application à tout moment.

Ce document explique comment effectuer une intégration de base de Google Sign-In.

Créer des identifiants d'autorisation

Toute application qui utilise OAuth 2.0 pour accéder aux API Google doit disposer d'identifiants d'autorisation. qui identifient l'application auprès du serveur OAuth 2.0 de Google. Les étapes suivantes expliquent comment créer des identifiants pour votre projet. Vos applications peuvent ensuite utiliser les identifiants pour accéder aux API que vous avez activées pour ce projet.

1. Go to the Credentials page.
2. Cliquez sur Créer des identifiants > ID client OAuth.
3. Sélectionnez le type d'application Application Web.
4. Attribuez un nom à votre client OAuth 2.0, puis cliquez sur Créer.

Une fois la configuration terminée, notez l'ID client qui a été créé. Vous aurez besoin de l'ID client pour effectuer les étapes suivantes. (Un code secret de client est également mais vous n'en avez besoin que pour les opérations côté serveur.)

Charger la bibliothèque Google Platform

Vous devez inclure la bibliothèque de la plate-forme Google sur vos pages Web qui intègrent Google Sign-In.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Spécifier l'ID client de votre application

Indiquez l'ID client que vous avez créé pour votre application dans la Google Developers Console. avec l'élément méta google-signin-client_id.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Ajouter un bouton Google Sign-In

Le moyen le plus simple d'ajouter un bouton Google Sign-In à votre site consiste à utiliser un qui s'affiche automatiquement. Avec seulement quelques lignes de code, ajouter un bouton qui se configure automatiquement pour avoir le texte approprié, le logo et les couleurs correspondant à l'état de connexion de l'utilisateur, ainsi que les champs d'application que vous demandez.

Pour créer un bouton Google Sign-In avec les paramètres par défaut, ajoutez un div avec la classe g-signin2 à votre page de connexion:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Obtenir des informations de profil

Après avoir connecté un utilisateur avec Google à l'aide des champs d'application par défaut, vous pouvez accéder à l'ID Google, au nom, à l'URL du profil et à l'adresse e-mail de l'utilisateur.

Pour récupérer les informations de profil d'un utilisateur, utilisez la méthode getBasicProfile() .

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

Déconnecter un utilisateur

Vous pouvez permettre aux utilisateurs de se déconnecter de votre application sans se déconnecter de Google en en ajoutant un bouton de déconnexion ou un lien vers votre site. Pour créer un lien de déconnexion, joignez une fonction qui appelle GoogleAuth.signOut() à l'événement onclick du lien.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>