Documentation de référence de l'API JavaScript Se connecter avec Google

Cette page de référence décrit l'API JavaScript Sign-In. 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.initial

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 de 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 du 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.initialize qu'une seule fois, même si vous utilisez plusieurs modules (comme One Tap, un bouton personnalisé, la révocation, etc.) sur la même page Web.
  • Si vous appelez la méthode google.accounts.id.initialize plusieurs fois, seules les configurations du dernier appel sont mémorisées et utilisées.

Vous réinitialisez les configurations chaque fois que vous appelez la méthode google.accounts.id.initialize, et toutes les méthodes suivantes sur la même page Web utilisent 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 L'ID client de votre application
auto_select Active la sélection automatique.
callback La fonction JavaScript qui gère les jetons d'ID Google One Tap et le bouton "Se connecter avec Google" popup du mode UX utilisent cet attribut.
login_uri URL du point de terminaison de votre connexion. Le bouton "Se connecter avec Google" redirect le mode UX utilise cet attribut.
native_callback La 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 celle-ci.
prompt_parent_id ID du DOM de l'élément de conteneur de l'invite One Tap.
nonce Une chaîne aléatoire pour les jetons d'ID
context le titre et les 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 d'expérience utilisateur pour le bouton "Se connecter avec Google"
allowed_parent_origin Origines autorisées à intégrer l'iFrame intermédiaire. One Tap est exécuté en mode iFrame intermédiaire si ce champ est présent.
intermediate_iframe_close_callback Remplace le comportement de l'iFrame intermédiaire par défaut lorsque les utilisateurs ferment manuellement One Tap.
itp_support Active l'expérience utilisateur One Tap mise à niveau sur les navigateurs ITP.
login_hint Ignorez la sélection du compte en fournissant un indice à l'utilisateur.
hd Limitez la sélection de comptes par domaine.
use_fedcm_for_prompt Autorisez le navigateur à contrôler les invites de connexion des utilisateurs et à assurer la médiation du flux de connexion entre votre site Web et Google.

client_id

Ce champ correspond à l'ID client de votre application, disponible et créé dans la console Google Cloud. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne Oui client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

Ce champ détermine si un jeton d'ID est automatiquement renvoyé sans aucune 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
boolean 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 le mode UX de Google One Tap ou du bouton "Se connecter avec Google" popup est utilisé. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
function Requis pour One Tap et le mode d'expérience utilisateur popup callback: handleResponse

login_uri

Cet attribut est l'URI du point de terminaison de votre connexion.

Sa 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 Google Cloud et conforme à nos règles de validation des URI de redirection.

Cet attribut peut être omis si la page actuelle est votre page de connexion, auquel cas l'identifiant est publié sur cette page par défaut.

La réponse d'identification 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 UX de redirection est utilisé.

Pour en savoir plus, consultez le tableau suivant:

Type Facultatif Exemple
URL La valeur par défaut correspond à l'URI de la page actuelle ou à la valeur que vous spécifiez.
Utilisé 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 avec une valeur de jeton d'ID dans le corps.

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

native_callback

Ce champ correspond au nom de la fonction JavaScript qui gère les identifiants de mot de passe renvoyés par le gestionnaire d'identifiants natif du navigateur. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
function Facultatif native_callback: handleResponse

cancel_on_tap_outside

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 le désactiver si vous définissez la valeur sur false. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
boolean Facultatif cancel_on_tap_outside: false

prompt_parent_id

Cet attribut définit l'ID DOM de l'élément conteneur. Si elle n'est pas configurée, 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 rejeu. 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, ainsi qu'aux contraintes de taille HTTP du navigateur et du serveur.

context

Ce champ modifie le texte du titre et des messages dans l'invite One Tap. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne Facultatif context: "use"

Le tableau suivant répertorie tous les contextes disponibles et leur description:

Le contexte
signin "Se connecter avec Google"
signup "Inscrivez-vous avec Google"
use "Utiliser avec Google"

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 à l'état partagé soit utilisé. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne Facultatif state_cookie_domain: "example.com"

ux_mode

Ce champ vous permet de définir le flux d'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 liste les modes d'expérience utilisateur disponibles et leur description.

Mode UX
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 par le biais d'une redirection pleine page.

allowed_parent_origin

Origines autorisées à intégrer l'iFrame intermédiaire. One Tap s'exécute en mode iFrame intermédiaire si ce champ est présent. 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 seul URI de domaine. "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 acceptés. Par exemple, "https://*.example.com" correspond à example.com et à ses sous-domaines à tous les niveaux (par exemple, news.example.com, login.news.example.com). Voici quelques points à retenir lorsque vous utilisez des caractères génériques:

  • Les chaînes de modèle ne peuvent pas être composées uniquement d'un caractère générique et d'un domaine de premier niveau. Par exemple, https://.com et https://.co.uk ne sont pas valides. Comme indiqué ci-dessus, "https://.example.com" correspond à example.com et à ses sous-domaines. Vous pouvez également utiliser un tableau pour représenter deux domaines différents. Par exemple, ["https://example1.com", "https://.example2.com"] correspond aux domaines example1.com et example2.com, ainsi qu'aux sous-domaines de example2.com
  • Les domaines génériques doivent commencer par un schéma https:// sécurisé. "*.example.com" est donc considéré comme non valide.

Si la valeur du champ allowed_parent_origin n'est pas valide, l'initialisation avec One Tap du mode iFrame intermédiaire échoue et s'arrête.

intermediate_iframe_close_callback

Remplace le comportement d'iFrame intermédiaire par défaut lorsque les utilisateurs ferment manuellement One Tap en appuyant sur le bouton "X" dans l'interface utilisateur 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. De plus, cela n'a d'incidence 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
function Facultatif intermediate_iframe_close_callback: logBeforeClose

itp_support

Ce champ détermine si l' expérience utilisateur One Tap mise à niveau doit être activée sur les navigateurs compatibles avec la protection intelligente contre le suivi (ITP). La valeur par défaut est false. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
boolean Facultatif itp_support: true

login_hint

Si votre application sait à l'avance quel utilisateur doit être connecté, elle peut fournir un indice de connexion à Google. Si l'opération réussit, la sélection du compte est ignorée. Les valeurs acceptées sont les suivantes: adresse e-mail ou valeur du champ sub de jeton d'ID.

Pour en savoir plus, consultez la section concernant le champ login_hint dans la documentation OpenID Connect.

Type Obligatoire Exemple
Chaîne, une adresse e-mail ou la valeur d'un champ sub de jeton d'ID. Facultatif login_hint: 'elisa.beckett@gmail.com'

HD

Lorsqu'un utilisateur possède plusieurs comptes et ne doit se connecter qu'avec son compte Workspace, cette option permet de fournir un indice de nom de domaine à Google. Si l'opération réussit, les comptes utilisateur affichés lors de la sélection des comptes sont limités au domaine indiqué. Une valeur générique: * ne propose que des comptes Workspace à l'utilisateur et exclut les comptes personnels (utilisateur@gmail.com) lors de la sélection des comptes.

Pour plus d'informations, reportez-vous au champ hd dans la documentation OpenID Connect.

Type Obligatoire Exemple
Chaîne. Un nom de domaine complet ou *. Facultatif hd: '*'

use_fedcm_for_prompt

Autorisez le navigateur à contrôler les invites de connexion des utilisateurs et à arbitrer le flux de connexion entre votre site Web et Google. Valeur par défaut : "false". Pour en savoir plus, consultez la page Migrer vers FedCM.

Type Obligatoire Exemple
boolean Facultatif use_fedcm_for_prompt: true

Méthode: google.accounts.id.prompt

Une fois la méthode initialize() appelée, la méthode google.accounts.id.prompt affiche l'invite One Tap ou le gestionnaire d'identifiants natif du navigateur. Consultez l'exemple de code suivant pour cette 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, il est possible que l'interface utilisateur de l'invite One Tap ne s'affiche pas. Pour recevoir des notifications sur l'état de l'UI à différents moments, transmettez une fonction permettant de recevoir des notifications d'état de l'UI.

Les notifications sont déclenchées dans les moments suivants:

  • Moment d'affichage:cela se produit après l'appel de la méthode prompt(). La notification contient une valeur booléenne pour indiquer 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 ou manuelle, ou lorsque Google ne parvient pas à émettre 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 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 One Tap et déclencher une fermeture.

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 s'affiche-t-elle pendant un moment ?

Remarque : Lorsque FedCM est activé, cette notification n'est pas déclenchée. Pour en savoir plus, consultez la page Migrer vers FedCM.
isDisplayed() Cette notification s'affiche-t-elle pendant un certain temps et que l'interface utilisateur s'affiche ?

Remarque : Lorsque FedCM est activé, cette notification n'est pas déclenchée. Pour en savoir plus, consultez la page Migrer vers FedCM.
isNotDisplayed() Cette notification s'affiche-t-elle pendant un certain temps et que l'UI ne s'affiche pas ?

Remarque : Lorsque FedCM est activé, cette notification n'est pas déclenchée. Pour en savoir plus, consultez la page Migrer vers FedCM.
getNotDisplayedReason()

Raison détaillée pour laquelle l'interface utilisateur n'est pas affichée. Voici les valeurs possibles:

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
Remarque : Lorsque FedCM est activé, cette méthode n'est pas compatible. Pour en savoir plus, consultez la page Migrer vers FedCM.
isSkippedMoment() Cette notification concerne-t-elle un moment ignoré ?
getSkippedReason()

Motif détaillé du moment ignoré. Voici les valeurs possibles:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
Remarque : Lorsque FedCM est activé, cette méthode n'est pas compatible. Pour en savoir plus, consultez la page Migrer vers FedCM.
isDismissedMoment() Cette notification doit-elle être ignorée pendant un moment ?
getDismissedReason()

Motif détaillé du refus. Voici les valeurs possibles:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

Renvoie une chaîne pour le type de moment. Voici les valeurs possibles:

  • display
  • skipped
  • dismissed

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 d'identification:

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.
state Ce champ n'est défini que lorsque l'utilisateur clique sur un bouton "Se connecter avec Google" pour se connecter, et que l'attribut state du bouton est spécifié.

identifiant

Ce champ correspond au jeton d'ID sous la forme d'une chaîne de jeton Web JSON (JWT) encodée en base64.

Une fois décodé, le 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 est un identifiant unique pour le compte Google. N'utilisez que le champ sub comme identifiant pour l'utilisateur, car il est unique parmi tous les comptes Google et n'est jamais réutilisé. N'utilisez pas une adresse e-mail comme identifiant, car un compte Google peut avoir plusieurs adresses e-mail à différents moments.

Les champs email, email_verified et hd vous permettent de déterminer si Google héberge une adresse e-mail et si elle fait autorité. Dans les cas où Google fait autorité, l'utilisateur est confirmé comme étant le titulaire légitime du compte.

Cas pour lesquels Google fait autorité:

  • email comporte un suffixe @gmail.com. Il s'agit d'un compte Gmail.
  • email_verified est "true" et hd est 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 n'est pas défini, Google ne fait pas autorité, et un mot de passe ou d'autres méthodes d'authentification sont recommandés pour valider l'utilisateur. email_verfied peut également être défini sur "true", 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 à utiliser pour vérifier le jeton côté serveur. Le jeton d'ID obtenu via la fonctionnalité Se connecter avec Google prend une heure. Vous devez vérifier le jeton avant l'heure d'expiration. N'utilisez pas exp pour la gestion des sessions. L'expiration d'un jeton d'ID ne signifie pas que l'utilisateur est déconnecté. Votre application est responsable de la gestion des sessions de vos utilisateurs.

select_by

Le tableau suivant répertorie les valeurs possibles du champ select_by. Le type de bouton utilisé avec l'état de la session et de l'autorisation permet 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'est connecté à celui-ci pour établir une nouvelle session.

  • Avant de partager les identifiants du jeton d'ID avec votre application, l'utilisateur :

    • a appuyé sur le bouton "Confirmer" pour autoriser le partage des identifiants ; ou
    • avait déjà accordé son consentement et utilisé l'option "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 disposant d'une session existante et ayant déjà autorisé le partage d'identifiants.
user Un utilisateur disposant d'une session existante et ayant déjà accordé son consentement a appuyé sur le bouton "Continuer en tant que" de One Tap pour partager ses identifiants.
user_1tap Un utilisateur ayant déjà une session a appuyé sur le bouton "Continuer en tant que" de One Tap pour donner son autorisation et partager ses identifiants. S'applique uniquement à Chrome v75 et versions ultérieures.
user_2tap Un utilisateur sans session existante a appuyé sur le bouton "Continuer en tant que" de One Tap pour sélectionner un compte, puis a appuyé sur le bouton "Confirmer" dans une fenêtre pop-up pour accorder son autorisation et partager ses identifiants. S'applique aux navigateurs autres que Chromium.
btn Un utilisateur disposant d'une session existante et ayant déjà accordé son consentement a appuyé sur le bouton "Se connecter avec Google" et a sélectionné un compte Google dans "Choisir un compte" pour partager ses identifiants.
btn_confirm Un utilisateur disposant d'une session existante a appuyé sur le bouton "Se connecter avec Google", puis sur le bouton "Confirmer" pour accorder son consentement et partager ses identifiants.
btn_add_session Un utilisateur sans session existante ayant déjà accordé son consentement a appuyé sur le bouton "Se connecter avec Google" pour sélectionner un compte Google et partager ses 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 ses identifiants.

state

Ce champ n'est défini que lorsque l'utilisateur clique sur un bouton "Se connecter avec Google" pour se connecter, et que l'attribut state du bouton est spécifié. La valeur de ce champ est la même que celle que vous avez spécifiée dans l'attribut state du bouton.

Étant donné que plusieurs boutons "Se connecter avec Google" peuvent s'afficher sur la même page, vous pouvez attribuer une chaîne unique à chacun d'entre eux. Par conséquent, vous pouvez ce champ state pour identifier le bouton sur lequel l'utilisateur a cliqué pour se connecter.

Méthode: google.accounts.id.renderButton

La méthode google.accounts.id.renderButton affiche un bouton "Se connecter avec Google" dans vos pages Web.

Consultez l'exemple de code suivant pour cette 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 Type de bouton: icône ou bouton standard.
theme Thème du bouton. Par exemple, "plein_bleu" ou "rempli_noir".
size Taille du bouton Par exemple, petite ou grande.
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 Alignement du logo Google: à gauche ou au centre.
width Largeur du bouton, en pixels.
locale Si cette option est définie, la langue du bouton est affichée.
click_listener Si cette fonction est définie, elle est appelée lorsque l'utilisateur clique sur le bouton "Se connecter avec Google".
state Si cette valeur est définie, cette chaîne est renvoyée avec le jeton d'ID.

Types d'attributs

Les sections suivantes contiennent des informations sur le type de chaque attribut et 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
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
Thème de bouton bleu.
filled_black
Thème de bouton noir.

taille

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:

du vocab.
large
Un grand bouton standard Un gros bouton d&#39;icône Un grand bouton personnalisé
Un gros bouton.
medium
Un bouton de taille moyenne Bouton avec une icône de taille moyenne
Bouton de taille moyenne.
small
Un petit bouton Une petite icône
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 ayant des attributs text différents. La seule exception concerne les cas où le texte est lu pour des raisons d'accessibilité à l'écran.

Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne Facultatif text: "signup_with"

Le tableau suivant répertorie tous les textes des boutons 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 auprès de Google".
continue_with
Le texte du bouton est "Continuer avec Google".
signin
Le texte du bouton est "Se connecter".

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 répertorie les formes de boutons disponibles et leur description:

Forme
rectangular
Bouton rectangulaire. S'il est utilisé pour le type de bouton icon, il est identique à square.
pill
Bouton en forme de pilule. S'il est utilisé pour le type de bouton icon, il est identique à circle.
circle
Bouton en forme de cercle. S'il est utilisé pour le type de bouton standard, il est identique à pill.
square
Bouton carré. S'il est utilisé pour le type de bouton standard, il est identique à rectangular.

logo_alignment

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 répertorie les alignements disponibles et leur description:

logo_alignment
left
Aligne à gauche le logo Google.
center
Aligne le logo Google au centre.

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 en utilisant les paramètres régionaux spécifiés. Sinon, utilisez par défaut les paramètres du compte Google ou du navigateur de l'utilisateur. Ajoutez le paramètre hl et le code de langue à la directive src lors du chargement de la bibliothèque, par exemple : gsi/client?hl=<iso-639-code>.

Si cette règle n'est pas configurée, 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, différents utilisateurs peuvent voir différentes versions des boutons localisés, et éventuellement différentes tailles.

Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne Facultatif locale: "zh_CN"

click_listener

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 cet exemple, le message Se connecter avec le bouton Google est enregistré dans la console lorsque l'utilisateur clique sur le bouton "Se connecter avec Google".

state

Facultatif, étant donné que plusieurs boutons "Se connecter avec Google" peuvent s'afficher sur la même page, vous pouvez attribuer à chaque bouton une chaîne unique. La même chaîne est renvoyée avec le jeton d'ID. Vous pouvez ainsi identifier le bouton sur lequel l'utilisateur a cliqué pour se connecter.

Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
chaîne Facultatif data-state="button 1"

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 Le 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 évite une boucle morte dans l'expérience utilisateur. 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 pour la méthode store() de l'API du gestionnaire d'identifiants natif du navigateur. Par conséquent, il ne peut être utilisé que pour stocker des identifiants de mot de passe. Consultez l'exemple de code suivant pour cette 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 parcours One Tap si vous supprimez l'invite du DOM du tiers de confiance. L'opération d'annulation est ignorée si un identifiant est déjà sélectionné. Consultez l'exemple de code suivant pour cette 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 bibliothèque: onGoogleLibraryLoad

Vous pouvez enregistrer un rappel onGoogleLibraryLoad. Il reçoit une notification 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'y a aucune différence 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'autorisation OAuth utilisée pour partager le jeton d'ID pour l'utilisateur spécifié. Consultez l'extrait de code de la méthode ci-dessous : javascript google.accounts.id.revoke(login_hint, callback)

Paramètres Type Description
login_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 des identifiants.
callback function 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 à la révocation:

Champ
successful Ce champ est la valeur renvoyée par l'appel de méthode.
error Ce champ peut éventuellement contenir un message d'erreur détaillé.

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.

error

Ce champ est une valeur de chaîne et contient un message d'erreur détaillé en cas d'échec de l'appel de méthode de révocation, lequel n'est pas défini en cas de réussite.