Ajoutez une invite en un clic à votre site pour permettre aux utilisateurs de s'inscrire ou de se connecter à votre application Web. Utilisez HTML et JavaScript pour afficher et personnaliser l'invite.
Prérequis
Suivez les étapes décrites dans la section Configuration pour configurer votre écran de consentement OAuth, obtenir un ID client et charger la bibliothèque cliente.
Ajoutez un bouton Se connecter avec Google à votre page de connexion.
Affichage de l'invite
Insérez un extrait de code sur toutes les pages où vous souhaitez que le paiement sans contact s'affiche.
HTML
Affichez l'invite "One Tap", qui renvoie les identifiants JWT à un point de terminaison de connexion.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
L'attribut data-login_uri est l'URI du point de terminaison de connexion de votre application Web. Vous pouvez ajouter des attributs de données personnalisés, qui sont envoyés à votre point de terminaison de connexion avec le jeton d'ID émis par Google.
Pour obtenir la liste complète des attributs acceptés, consultez la documentation de référence sur g_id_onload.
JavaScript
Affichez l'invite "One Tap", en renvoyant les identifiants JWT au gestionnaire de rappel JavaScript du navigateur.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
Pour configurer l'invite "One Tap" en JavaScript, vous devez d'abord appeler la méthode initialize(). Appelez ensuite la méthode prompt() pour afficher l'UI de l'invite.
Pour obtenir la liste complète des options de données, consultez la documentation de référence sur idConfiguration.
État de l'invite
Utilisez une fonction de rappel JavaScript pour écouter les notifications d'état de l'UI de requête.
Les notifications sont envoyées aux moments suivants:
Moment d'affichage:cette étape se produit après l'appel de la méthode
prompt(). La notification contient une valeur booléenne indiquant si l'UI est affichée ou non.Moment ignoré:cela se produit lorsque l'invite de connexion avec un seul geste est fermée par une résiliation automatique, une résiliation manuelle ou lorsque Google ne parvient pas à émettre d'identifiants, par exemple lorsque la session sélectionnée est déconnectée de Google.
Dans ce cas, nous vous recommandons de passer aux prochains fournisseurs d'identité, le cas échéant.
Moment de rejet:cela se produit lorsque Google récupère un identifiant ou qu'un utilisateur souhaite arrêter le flux de récupération des identifiants. Par exemple, lorsque l'utilisateur commence à saisir son nom d'utilisateur et son mot de passe dans la boîte de dialogue de connexion, vous pouvez appeler la méthode
google.accounts.id.cancel()pour fermer l'invite avec un seul geste et déclencher un moment de rejet.
HTML
Utilisez l'attribut data-moment_callback pour spécifier une fonction de rappel JavaScript. Un gestionnaire de rappel est nécessaire pour recevoir des notifications.
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
Pour faciliter la connexion ou l'inscription de vos utilisateurs, vous pouvez communiquer avec plusieurs fournisseurs d'identité pour trouver les identifiants disponibles. Vous pouvez connaître l'état de l'UI de l'invite afin d'appeler le prochain fournisseur d'identité.
JavaScript
Transmettez votre gestionnaire de rappel en tant que paramètre à google.accounts.id.prompt. Ici, une fonction flèche est utilisée pour gérer les mises à jour des notifications.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
Bouton et requête
Le bouton "Se connecter avec Google" et l'invite One Tap peuvent s'afficher ensemble sur une même page.
HTML
Affichez à la fois le bouton "Se connecter avec Google" et l'invite One Tap en incluant les éléments g_id_onload et g_id_signin.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
Affichez le bouton Se connecter avec Google et l'invite One Tap en appelant simultanément les fonctions renderButton() et prompt().
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
Ne pas masquer One Tap
Cette section ne s'applique que lorsque FedCM est désactivé. Lorsque FedCM est activé, le navigateur affiche des invites à l'utilisateur en haut du contenu de la page.
Pour que les utilisateurs finaux voient toutes les informations affichées, Google One Tap ne doit pas être recouvert par un autre contenu. Sinon, des fenêtres pop-up peuvent être déclenchées dans certains cas.
Vérifiez la mise en page de votre page et les propriétés d'indice z des éléments pour vous assurer que Google One Tap n'est jamais masqué par un autre contenu. Le changement de parcours UX peut être déclenché même si un seul pixel des bordures est recouvert.
Réponse des identifiants
La réponse d'identification inclut un jeton JWT signé par Google. La réponse est renvoyée au navigateur à l'aide d'une fonction de rappel JavaScript ou à votre plate-forme via une redirection vers un point de terminaison de connexion.
Rappel JS
Utilisez HTML ou JavaScript pour configurer un rappel.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
Par exemple, handleCredentialResponse décode le JWT et imprime certains des champs du jeton d'ID dans la console.
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
Redirection
Pour renvoyer des identifiants au point de terminaison de connexion de votre plate-forme, ajoutez l'URL aux paramètres de l'URI de redirection autorisé de votre client Web OAuth 2.0.
Utilisez HTML ou JavaScript pour configurer un URI de redirection.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});