Google Sign-In gère le flux OAuth 2.0 et le cycle de vie des jetons, ce qui simplifie votre intégration aux API Google. Un utilisateur a toujours la possibilité de révoquer l'accès à une application à tout moment.
Ce document explique comment effectuer une intégration Google Sign-In de base.
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.
- Go to the Clients page.
- Cliquez sur Créer un client.
- Sélectionnez le type d'application Application Web.
- Nommez 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 en aurez besoin pour effectuer les étapes suivantes. (Un code secret client est également créé, mais vous n'en avez besoin que pour les opérations côté serveur.)
Charger la bibliothèque de la plate-forme Google
Vous devez inclure la bibliothèque Google Platform sur les 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
Spécifiez l'ID client que vous avez créé pour votre application dans la Google Developers Console avec l'élément meta 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 Se connecter avec Google à votre site consiste à utiliser un bouton de connexion rendu automatiquement. En quelques lignes de code, vous pouvez ajouter un bouton qui se configure automatiquement pour afficher le texte, le logo et les couleurs appropriés en fonction de l'état de connexion de l'utilisateur et des autorisations que vous demandez.
Pour créer un bouton Google Sign-In qui utilise les paramètres par défaut, ajoutez un élément div avec la classe g-signin2 à votre page de connexion :
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Obtenir des informations sur un profil
Une fois que vous avez connecté un utilisateur avec Google à l'aide des identifiants par défaut, vous pouvez accéder à son ID Google, son nom, l'URL de son profil et son adresse e-mail.
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 ajoutant un bouton ou un lien de déconnexion à votre site. Pour créer un lien de déconnexion, associez une fonction qui appelle la méthode 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>