Cette page de référence décrit l'API Sign-In JavaScript. Vous pouvez utiliser cette API pour afficher l'invite One Tap ou le bouton Se connecter avec Google sur vos pages Web.
Méthode: google.accounts.id.Initialize
La méthode google.accounts.id.initialize initialise le client Se connecter avec Google en fonction de l'objet de configuration. Consultez l'exemple de code suivant pour la méthode:
google.accounts.id.initialize(IdConfiguration)
L'exemple de code suivant implémente la méthode google.accounts.id.initialize avec une fonction onload:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
La méthode google.accounts.id.initialize crée une instance de client Se connecter avec Google qui peut être utilisée implicitement par tous les modules de la même page Web.
- Vous n'avez besoin d'appeler la méthode
google.accounts.id.initializequ'une seule fois, même si vous utilisez plusieurs modules (comme One Tap, Personalized Button, Révocation, etc.) sur la même page Web. - Si vous appelez la méthode
google.accounts.id.initializeplusieurs fois, seules les configurations du dernier appel seront enregistrées et utilisées.
Vous réinitialisez les configurations chaque fois que vous appelez la méthode google.accounts.id.initialize. Toutes les méthodes suivantes de la même page Web utiliseront immédiatement les nouvelles configurations.
Type de données: IdConfiguration
Le tableau suivant répertorie les champs et les descriptions du type de données IdConfiguration:
| Champ | |
|---|---|
client_id |
ID client de votre application |
auto_select |
Active la sélection automatique. |
callback |
Fonction JavaScript qui gère les jetons d'ID. Google One Tap et le bouton "Se connecter avec Google" popup utilisent le mode UX. |
login_uri |
URL du point de terminaison de connexion. Le bouton Se connecter avec Google redirect utilise le mode UX. |
native_callback |
Fonction JavaScript qui gère les identifiants de mot de passe. |
cancel_on_tap_outside |
Annule l'invite si l'utilisateur clique en dehors de l'invite. |
prompt_parent_id |
ID DOM de l'élément de conteneur de l'invite One Tap |
nonce |
Chaîne aléatoire de jetons d'ID |
context |
Titre et mots dans l'invite One Tap |
state_cookie_domain |
Si vous devez appeler One Tap dans le domaine parent et ses sous-domaines, transmettez le domaine parent à ce champ afin qu'un seul cookie partagé soit utilisé. |
ux_mode |
Flux de l'expérience utilisateur du bouton "Se connecter avec Google" |
allowed_parent_origin |
Origines autorisées à intégrer l'iFrame intermédiaire One Tap s'exécutera en mode iFrame intermédiaire si ce champ s'affiche. |
intermediate_iframe_close_callback |
Remplace le comportement iFrame intermédiaire par défaut lorsque les utilisateurs ferment manuellement One Tap. |
itp_support |
Active l'expérience utilisateur One Tap améliorée sur les navigateurs ITP. |
client_id
Ce champ correspond à l'ID client de votre application. Il est trouvé et créé dans la Google Developers Console. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Oui | client_id: "CLIENT_ID.apps.googleusercontent.com" |
sélection_automatique
Ce champ détermine si un jeton d'ID est automatiquement renvoyé sans interaction de l'utilisateur lorsqu'une seule session Google a déjà approuvé votre application. La valeur par défaut est false. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| booléen | Facultatif | auto_select: true |
rappel
Ce champ correspond à la fonction JavaScript qui gère le jeton d'ID renvoyé par l'invite One Tap ou la fenêtre pop-up. Cet attribut est obligatoire si Google One Tap ou le bouton Se connecter avec Google popup est utilisé.
Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| fonction | Obligatoire pour One Tap et le mode UX popup |
callback: handleResponse |
URI de connexion
Cet attribut est l'URI de votre point de terminaison de connexion.
Cette valeur doit correspondre exactement à l'un des URI de redirection autorisés pour le client OAuth 2.0, que vous avez configuré dans la console API. Elle doit aussi respecter nos règles de validation de l'URI de redirection.
Cet attribut peut être omis si la page actuelle est votre page de connexion, auquel cas les identifiants y sont publiés par défaut.
La réponse des identifiants du jeton d'ID est publiée sur votre point de terminaison de connexion lorsqu'un utilisateur clique sur le bouton "Se connecter avec Google" et que le mode d'expérience utilisateur de redirection est utilisé.
Pour en savoir plus, consultez le tableau suivant:
| Type | Facultatif | Exemple |
|---|---|---|
| URL | Valeur par défaut : URI de la page actuelle ou valeur que vous spécifiez. Utilisée uniquement lorsque ux_mode: "redirect" est défini. |
login_uri="https://www.example.com/login" |
Votre point de terminaison de connexion doit gérer les requêtes POST contenant une clé credential dont le corps contient une valeur de jeton d'ID.
Voici un exemple de requête envoyée à votre point de terminaison de connexion:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
rappel_natif
Ce champ correspond au nom de la fonction JavaScript qui gère les identifiants du mot de passe renvoyés par le gestionnaire d'identifiants natif du navigateur. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| fonction | Facultatif | native_callback: handleResponse |
annuler_en_tap_plein_air
Ce champ indique si la requête One Tap doit être annulée ou non lorsqu'un utilisateur clique en dehors de l'invite. La valeur par défaut est true. Vous pouvez la désactiver si vous définissez la valeur sur false. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| booléen | Facultatif | cancel_on_tap_outside: false |
invite_id_parent
Cet attribut définit l'ID DOM de l'élément conteneur. Si cette option n'est pas définie, l'invite One Tap s'affiche en haut à droite de la fenêtre. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | prompt_parent_id: 'parent_id' |
nonce
Ce champ est une chaîne aléatoire utilisée par le jeton d'ID pour empêcher les attaques par relecture. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | nonce: "biaqbm70g23" |
La longueur du nonce est limitée à la taille JWT maximale acceptée par votre environnement et aux contraintes de taille HTTP du navigateur et du serveur individuelles.
context
Ce champ modifie le texte du titre et des messages de l'invite One Tap. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | context: "use" |
Le tableau suivant présente les contextes disponibles et leur description:
| Contexte | |
|---|---|
signin |
"Se connecter avec Google" |
signup |
"S'inscrire avec Google" |
use |
"Utiliser avec Google" |
domaine_cookie_état
Si vous devez afficher One Tap dans le domaine parent et ses sous-domaines, transmettez le domaine parent à ce champ afin qu'un seul cookie d'état partagé soit utilisé. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | state_cookie_domain: "example.com" |
mode_ux
Ce champ vous permet de définir le flux de l'expérience utilisateur utilisé par le bouton "Se connecter avec Google". La valeur par défaut est popup. Cet attribut n'a aucune incidence sur l'expérience utilisateur OneTap. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | ux_mode: "redirect" |
Le tableau suivant répertorie les modes d'expérience utilisateur disponibles et leur description.
| Mode expérience utilisateur | |
|---|---|
popup |
Effectue un flux d'expérience utilisateur de connexion dans une fenêtre pop-up. |
redirect |
Effectue un flux d'expérience utilisateur de connexion via une redirection complète sur la page. |
origine parente autorisée
Origines autorisées à intégrer l'iFrame intermédiaire One Tap s'exécutera en mode iFrame intermédiaire si ce champ s'affiche. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne ou tableau de chaînes | Facultatif | allowed_parent_origin: "https://example.com" |
Le tableau suivant répertorie les types de valeurs acceptés et leur description.
| Types de valeurs | ||
|---|---|---|
string |
Un URI de domaine unique. | "https://example.com" |
string array |
Tableau d'URI de domaines. | ["https://news.example.com", "https://local.example.com"] |
Les préfixes génériques sont également compatibles. Par exemple, "https://*.example.com" correspondra à example.com et à ses sous-domaines à tous les niveaux (ex. : news.example.com, login.news.example.com). Tenez compte des points suivants lors de l'utilisation des caractères génériques :
- Les chaînes de format ne peuvent pas être composées uniquement d'un caractère générique et d'un domaine de premier niveau. Par exemple,
https://*.comethttps://*.co.ukne sont pas valides. Comme indiqué ci-dessus,"https://*.example.com"correspondra àexample.comet ses sous-domaines. Vous pouvez également utiliser un tableau pour représenter deux domaines différents. Par exemple,["https://example1.com", "https://*.example2.com"]correspondra aux domainesexample1.com,example2.comet aux sous-domaines deexample2.com - Les domaines avec des caractères génériques doivent commencer par un schéma https:// sécurisé.
"*.example.com"sera considéré comme non valide.
Si la valeur du champ allowed_parent_origin n'est pas valide, l'initialisation One Tap du mode iFrame intermédiaire échoue et s'arrête.
rappel_close_iframe_close
Remplace le comportement iFrame intermédiaire par défaut lorsque les utilisateurs ferment manuellement One Tap en appuyant sur le bouton "X" dans l'interface utilisateur du One Tap. Le comportement par défaut consiste à supprimer immédiatement l'iFrame intermédiaire du DOM.
Le champ intermediate_iframe_close_callback ne prend effet qu'en mode iFrame intermédiaire. Il n'a d'impact que sur l'iFrame intermédiaire, et non sur l'iFrame One Tap. L'interface utilisateur One Tap est supprimée avant l'appel du rappel.
| Type | Obligatoire | Exemple |
|---|---|---|
| fonction | Facultatif | intermediate_iframe_close_callback: logBeforeClose |
assistance_Itp
Ce champ détermine si l'
expérience utilisateur One Tap mise à niveau doit être activée sur les navigateurs compatibles avec Intelligent Tracking Prevention (ITP). La valeur par défaut est false. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| booléen | Facultatif | itp_support: true |
Méthode: google.accounts.id.prompt
La méthode google.accounts.id.prompt affiche l'invite One Tap ou le gestionnaire d'identifiants natif du navigateur une fois la méthode initialize() appelée.
Consultez l'exemple de code suivant pour la méthode:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Normalement, la méthode prompt() est appelée au chargement de la page. En raison de l'état de la session et des paramètres utilisateur côté Google, l'interface utilisateur de l'invite One Tap peut ne pas s'afficher. Pour recevoir des notifications sur l'état de l'interface utilisateur à différents moments, transmettez une fonction afin de recevoir des notifications.
Les notifications sont déclenchées aux moments suivants:
- Moment d'affichage:cela se produit après l'appel de la méthode
prompt(). La notification contient une valeur booléenne indiquant si l'interface utilisateur est affichée ou non. Moment ignoré:cela se produit lorsque l'invite One Tap est fermée par une annulation automatique, une annulation manuelle ou lorsque Google ne parvient pas à fournir d'identifiants, par exemple lorsque la session sélectionnée s'est déconnectée de Google.
Dans ce cas, nous vous recommandons de passer aux fournisseurs d'identité suivants, le cas échéant.
Moment ignoré:se produit lorsque Google récupère des identifiants 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 One Tap et déclencher un moment ignoré.
L'exemple de code suivant implémente le moment ignoré:
<script>
window.onload = function () {
google.accounts.id.initialize(...);
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// continue with another identity provider.
}
});
};
</script>
Type de données: PromptMomentNotification
Le tableau suivant répertorie les méthodes et les descriptions du type de données PromptMomentNotification:
| Méthode | |
|---|---|
isDisplayMoment() |
Cette notification concerne-t-elle un moment à afficher ? |
isDisplayed() |
Cette notification s'affiche-t-elle pendant un moment, et l'UI s'affiche ? |
isNotDisplayed() |
Cette notification s'affiche-t-elle pendant un moment et l'UI n'est pas affichée ? |
getNotDisplayedReason() |
Raison détaillée pour laquelle l'interface utilisateur ne s'affiche pas. Voici les valeurs possibles:
|
isSkippedMoment() |
Cette notification concerne-t-elle un événement ponctuel ? |
getSkippedReason() |
Motif détaillé du moment ignoré. Voici les valeurs possibles:
|
isDismissedMoment() |
Cette notification concerne-t-elle un moment ignoré ? |
getDismissedReason() |
Motif du refus. Voici les valeurs possibles:
|
getMomentType() |
Renvoie une chaîne correspondant au type de moment. Voici les valeurs possibles:
|
Type de données: CredentialResponse
Lorsque votre fonction callback est appelée, un objet CredentialResponse est transmis en tant que paramètre. Le tableau suivant répertorie les champs contenus dans l'objet de réponse des identifiants:
| Champ | |
|---|---|
credential |
Ce champ correspond au jeton d'ID renvoyé. |
select_by |
Ce champ définit la manière dont les identifiants sont sélectionnés. |
votre identifiant
Ce champ correspond au jeton d'ID en tant que chaîne de jeton Web JSON (JWT) encodée en base64.
Une fois qu'il est décodé, le jeton JWT ressemble à l'exemple suivant :
header
{
"alg": "RS256",
"kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
"typ": "JWT"
}
payload
{
"iss": "https://accounts.google.com", // The JWT's issuer
"nbf": 161803398874,
"aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
"sub": "3141592653589793238", // The unique ID of the user's Google Account
"hd": "gmail.com", // If present, the host domain of the user's GSuite email address
"email": "elisa.g.beckett@gmail.com", // The user's email address
"email_verified": true, // true, if Google has verified the email address
"azp": "314159265-pi.apps.googleusercontent.com",
"name": "Elisa Beckett",
// If present, a URL to user's profile picture
"picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
"given_name": "Elisa",
"family_name": "Beckett",
"iat": 1596474000, // Unix timestamp of the assertion's creation time
"exp": 1596477600, // Unix timestamp of the assertion's expiration time
"jti": "abc161803398874def"
}
Le champ sub contient un identifiant unique pour le compte Google.
Les champs email, email_verified et hd vous permettent de déterminer si Google héberge et fait autorité pour une adresse e-mail. Dans les cas où Google fait autorité, l'utilisateur est actuellement considéré comme le titulaire légitime du compte.
Cas pour lesquels Google fait autorité:
emailcontient le suffixe@gmail.com. Il s'agit d'un compte Gmail.email_verifiedest défini sur "true" ethdest défini (il s'agit d'un compte Google Workspace).
Les utilisateurs peuvent créer un compte Google sans utiliser Gmail ni Google Workspace. Lorsque email ne contient pas de suffixe @gmail.com et que hd est absent, Google ne fait pas autorité, et il est recommandé d'utiliser d'autres méthodes d'authentification pour valider l'utilisateur. email_verfied peut également être vrai, car Google a initialement validé l'utilisateur lors de la création du compte Google. Toutefois, la propriété du compte de messagerie tiers peut avoir changé depuis.
Le champ exp indique le délai d'expiration permettant de vérifier le jeton côté serveur.
Le jeton d'ID obtenu via la fonctionnalité Se connecter avec Google est d'une heure. Vous devez vérifier le jeton avant son délai d'expiration. Vous ne devez pas utiliser exp pour la gestion des sessions. Un jeton d'ID arrivé à expiration ne signifie pas que l'utilisateur est déconnecté. Votre application est responsable de la gestion des sessions de vos utilisateurs.
Sélectionner_par
Le tableau suivant répertorie les valeurs possibles du champ select_by. Le type de bouton utilisé avec l'état de la session et du consentement permettent de définir la valeur.
L'utilisateur a appuyé sur le bouton One Tap ou Se connecter avec Google, ou a utilisé le processus de connexion automatique sans contact.
Une session existante a été trouvée, ou l'utilisateur a sélectionné un compte Google et s'y est connecté pour en créer une.
Avant de partager les identifiants du jeton d'ID avec votre application, l'utilisateur
- avez appuyé sur le bouton "Confirmer" pour autoriser son partage des identifiants ; ou
- avait déjà donné son consentement et utilisé Sélectionner un compte pour choisir un compte Google.
La valeur de ce champ est définie sur l'un de ces types,
| Valeur | Description |
|---|---|
auto |
Connexion automatique d'un utilisateur ayant précédemment autorisé le partage des identifiants avec une session existante. |
user |
Un utilisateur ayant déjà autorisé une session a appuyé sur le bouton "Continuer en tant que" pour partager des identifiants. |
user_1tap |
Un utilisateur avec une session existante a appuyé sur le bouton "Continuer en tant que" pour accorder son consentement et partager des identifiants. S'applique uniquement à Chrome 75 et versions ultérieures. |
user_2tap |
Un utilisateur sans session existante a appuyé sur le bouton "Continuer en tant que" pour sélectionner un compte, puis a appuyé sur le bouton "Confirmer" dans une fenêtre pop-up pour accorder le consentement et partager les identifiants. S'applique aux navigateurs autres que Chromium. |
btn |
Un utilisateur d'une session existante qui a déjà donné son consentement a appuyé sur le bouton "Se connecter avec Google" et a sélectionné un compte Google dans "Choisir un compte" pour partager les identifiants. |
btn_confirm |
Un utilisateur avec une session existante a appuyé sur le bouton "Se connecter avec Google", puis sur le bouton "Confirmer" pour accorder le consentement et partager les identifiants. |
btn_add_session |
Un utilisateur sans session existante qui a déjà donné son consentement a appuyé sur le bouton "Se connecter avec Google" pour sélectionner un compte Google et partager les identifiants. |
btn_confirm_add_session |
Un utilisateur sans session existante a d'abord appuyé sur le bouton "Se connecter avec Google" pour sélectionner un compte Google, puis a appuyé sur le bouton "Confirmer" pour autoriser et partager les identifiants. |
Méthode: google.accounts.id.renderButton
La méthode google.accounts.id.renderButton affiche un bouton Se connecter avec Google sur vos pages Web.
Consultez l'exemple de code suivant pour la méthode:
google.accounts.id.renderButton(
/** @type{!HTMLElement} */ parent,
/** @type{!GsiButtonConfiguration} */ options
)
Type de données: GsiButtonConfiguration
Le tableau suivant répertorie les champs et les descriptions du type de données GsiButtonConfiguration:
| Attribut | |
|---|---|
type |
Le type de bouton: icône ou standard. |
theme |
Thème du bouton Par exemple, fill_blue ou fill_black. |
size |
Taille du bouton. Par exemple, petits ou grands. |
text |
Texte du bouton. Par exemple, "Se connecter avec Google" ou "S'inscrire avec Google". |
shape |
Forme du bouton. (par exemple, rectangulaire ou circulaire). |
logo_alignment |
L'alignement du logo Google: à gauche ou au centre. |
width |
Largeur du bouton, en pixels. |
locale |
Si ce champ est défini, la langue du bouton est affichée. |
click_listener |
Si elle est définie, cette fonction est appelée lorsque l'utilisateur clique sur le bouton "Se connecter avec Google". |
Types d'attributs
Les sections suivantes contiennent des détails sur le type de chaque attribut, ainsi qu'un exemple.
type
Type de bouton. La valeur par défaut est standard.
Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Oui | type: "icon" |
Le tableau suivant répertorie les types de boutons disponibles et leur description:
| Type | |
|---|---|
standard |
Bouton avec du texte ou des informations personnalisées :
|
icon |
Un bouton d'icône sans texte : 
|
thème
Thème du bouton La valeur par défaut est outline. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | theme: "filled_blue" |
Le tableau suivant répertorie les thèmes disponibles et leur description:
| Thème | |
|---|---|
outline |
Thème de bouton standard :
|
filled_blue |
Un thème de bouton bleu :
|
filled_black |
Un thème de bouton rempli de noir :
|
size
Taille du bouton. La valeur par défaut est large. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | size: "small" |
Le tableau suivant répertorie les tailles de bouton disponibles et leur description:
| Taille | |
|---|---|
large |
Un gros bouton :
|
medium |
Un bouton de taille moyenne :
|
small |
Un petit bouton :
|
text
Texte du bouton. La valeur par défaut est signin_with. Il n'existe aucune différence visuelle pour le texte des boutons d'icône comportant des attributs text différents.
La seule exception est lorsque le texte est lu pour l'accessibilité de l'écran.
Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | text: "signup_with" |
Le tableau suivant répertorie les textes de bouton disponibles et leur description:
| Texte | |
|---|---|
signin_with |
Le texte du bouton est "Se connecter avec Google" :
|
signup_with |
Le texte du bouton est "S'inscrire avec Google" :
|
continue_with |
Le texte du bouton est "Continuer avec Google" :
|
signin |
Le texte du bouton est "Connexion" :
|
shape
Forme du bouton. La valeur par défaut est rectangular. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | shape: "rectangular" |
Le tableau suivant présente les différentes formes de boutons disponibles ainsi que leur description:
| Forme | |
|---|---|
rectangular |
Bouton de forme rectangulaire. Si elle est utilisée pour le type de bouton icon, elle est identique à square.
|
pill |
Bouton en forme de pilule. Si elle est utilisée pour le type de bouton icon, elle est identique à circle.
|
circle |
Bouton en forme de cercle. Si elle est utilisée pour le type de bouton standard, elle est identique à pill.
|
square |
Bouton carré. Si elle est utilisée pour le type de bouton standard, elle est identique à rectangular.
|
alignement du logo
Alignement du logo Google. La valeur par défaut est left. Cet attribut ne s'applique qu'au type de bouton standard. Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | logo_alignment: "center" |
Le tableau suivant présente les alignements disponibles et leur description:
| alignement du logo | |
|---|---|
left |
Aligne le logo Google vers la gauche.
|
center |
Centre le logo Google.
|
largeur
Largeur minimale du bouton, en pixels. La largeur maximale est de 400 pixels.
Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | width: 400 |
locale
Facultatif. Affichez le texte du bouton à l'aide des paramètres régionaux spécifiés. Sinon, la valeur par défaut est celle du compte Google ou des paramètres du navigateur de l'utilisateur. Ajoutez le paramètre hl et le code de langage à la directive src lors du chargement de la bibliothèque, par exemple: gsi/client?hl=<iso-639-code>.
Si cette option n'est pas définie, les paramètres régionaux par défaut du navigateur ou les préférences de l'utilisateur de la session Google sont utilisés. Par conséquent, les différents utilisateurs peuvent voir différentes versions de boutons localisés, et peut-être avec des tailles différentes.
Pour en savoir plus, consultez le tableau suivant:
| Type | Obligatoire | Exemple |
|---|---|---|
| chaîne | Facultatif | locale: "zh_CN" |
écouteur de clics
Vous pouvez définir une fonction JavaScript à appeler lorsque l'utilisateur clique sur le bouton "Se connecter avec Google" à l'aide de l'attribut click_listener.
google.accounts.id.renderButton(document.getElementById("signinDiv"), {
theme: 'outline',
size: 'large',
click_listener: onClickHandler
});
function onClickHandler(){
console.log("Sign in with Google button clicked...")
}
Dans l'exemple ci-dessus, le message Se connecter avec le bouton Google... est enregistré dans la console lorsque l'utilisateur clique sur le bouton "Se connecter avec Google".
Type de données: identifiant
Lorsque votre fonction native_callback est appelée, un objet Credential est transmis en tant que paramètre. Le tableau suivant répertorie les champs contenus dans l'objet:
| Champ | |
|---|---|
id |
Identifie l'utilisateur. |
password |
Mot de passe |
Méthode: google.accounts.id.disableAutoSelect
Lorsque l'utilisateur se déconnecte de votre site Web, vous devez appeler la méthode google.accounts.id.disableAutoSelect pour enregistrer l'état dans les cookies. Cela permet d'éviter une boucle d'expérience utilisateur interrompue. Consultez l'extrait de code suivant de la méthode:
google.accounts.id.disableAutoSelect()
L'exemple de code suivant implémente la méthode google.accounts.id.disableAutoSelect avec une fonction onSignout():
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
Méthode: google.accounts.id.storeCredential
Cette méthode est un wrapper simple pour la méthode store() de l'API native gestion des identifiants du navigateur. Par conséquent, il ne peut être utilisé que pour stocker un identifiant de mot de passe. Consultez l'exemple de code suivant pour la méthode:
google.accounts.id.storeCredential(Credential, callback)
L'exemple de code suivant implémente la méthode google.accounts.id.storeCredential avec une fonction onSignIn():
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Méthode: google.accounts.id.cancel
Vous pouvez annuler le flux One Tap si vous supprimez l'invite du DOM de confiance. L'opération d'annulation est ignorée si un identifiant est déjà sélectionné. Consultez l'exemple de code suivant de la méthode:
google.accounts.id.cancel()
L'exemple de code suivant implémente la méthode google.accounts.id.cancel() avec une fonction onNextButtonClicked():
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Rappel de chargement de la bibliothèque: onGoogleLibraryLoad
Vous pouvez enregistrer un rappel onGoogleLibraryLoad. Il est averti après le chargement de la bibliothèque JavaScript Se connecter avec Google:
window.onGoogleLibraryLoad = () => {
...
};
Ce rappel n'est qu'un raccourci pour le rappel window.onload. Il n'existe pas de différences de comportement.
L'exemple de code suivant implémente un rappel onGoogleLibraryLoad:
<script>
window.onGoogleLibraryLoad = () => {
google.accounts.id.initialize({
...
});
google.accounts.id.prompt();
};
</script>
Méthode: google.accounts.id.revoke
La méthode google.accounts.id.revoke révoque l'authentification OAuth utilisée pour partager le jeton d'ID pour l'utilisateur spécifié. Consultez l'extrait de code suivant de la méthode :
google.accounts.id.revoke(hint, callback)
| Paramètre | Type | Description |
|---|---|---|
hint |
chaîne | Adresse e-mail ou identifiant unique du compte Google de l'utilisateur. L'ID est la propriété sub de la charge utile d'identifiants. |
callback |
fonction | Gestionnaire RevocationResponse facultatif. |
L'exemple de code suivant montre comment utiliser la méthode revoke avec un ID.
google.accounts.id.revoke('1618033988749895', done => {
console.log(done.error);
});
Type de données: RevocationResponse
Lorsque votre fonction callback est appelée, un objet RevocationResponse est transmis en tant que paramètre. Le tableau suivant répertorie les champs contenus dans l'objet de réponse de révocation:
| Champ | |
|---|---|
successful |
Ce champ correspond à la valeur renvoyée par l'appel de méthode. |
error |
Ce champ contient éventuellement un message détaillé de réponse en cas d'erreur. |
opération réussie
Ce champ est une valeur booléenne définie sur "true" si l'appel de la méthode de révocation a réussi ou sur "false" en cas d'échec.
erreur
Ce champ est une valeur de chaîne et contient un message d'erreur détaillé en cas d'échec de l'appel de la méthode de révocation. Il n'est pas défini en cas de réussite.