Google Identity Services migre vers les API FedCM. Suivez le guide de migration pour examiner les modifications potentielles et éviter tout impact négatif sur la connexion des utilisateurs à votre site Web.

Cette page a été traduite par l'API Cloud Translation.

Documentation de référence de l'API JavaScript Se connecter avec Google
Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Cette page de référence décrit l'API JavaScript de connexion. Vous pouvez utiliser cette API pour afficher l'invite "Un appui" 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 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 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.initialize qu'une seule fois, même si vous utilisez plusieurs modules (comme le bouton One Tap, le 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 en fait les configurations chaque fois que vous appelez la méthode google.accounts.id.initialize, et toutes les méthodes ultérieures de 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`	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 mode d'expérience utilisateur `popup` du bouton Se connecter avec Google utilisent cet attribut.
`login_uri`	URL de votre point de terminaison de connexion. Le bouton Se connecter avec Google du mode UX `redirect` utilise cet attribut.
`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 celle-ci.
`prompt_parent_id`	ID DOM de l'élément de conteneur de l'invite avec un seul geste
`nonce`	Chaîne aléatoire pour les jetons d'ID
`context`	Le titre et les mots de la requête 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 du bouton "Se connecter avec Google"
`allowed_parent_origin`	Origines autorisées à intégrer l'iFrame intermédiaire. Le mode "One Tap" est exécuté en mode iframe intermédiaire si ce champ est présent.
`intermediate_iframe_close_callback`	Force le comportement par défaut de l'iframe intermédiaire lorsque les utilisateurs ferment manuellement le service One Tap.
`itp_support`	Active l'expérience utilisateur améliorée du paiement sans contact sur les navigateurs ITP.
`login_hint`	Ignorez la sélection de compte en fournissant un indice utilisateur.
`hd`	Limiter la sélection de comptes par domaine
`use_fedcm_for_prompt`	Autorisez le navigateur à contrôler les invites de connexion des utilisateurs et à gérer le parcours de connexion entre votre site Web et Google.
`use_fedcm_for_button`	Ce champ détermine si l'expérience utilisateur du bouton FedCM doit être utilisée sur Chrome (ordinateur de bureau M125 et version ultérieure, et Android M128 et version ultérieure). La valeur par défaut est `false`.
`button_auto_select`	Indique si l'option Sélection automatique doit être activée pour le flux de bouton FedCM. Si cette option est activée, les utilisateurs qui reviennent avec une session Google active seront automatiquement connectés, contournant l'invite du sélecteur de compte.La valeur par défaut est `false`.

client_id

Ce champ correspond à l'ID client de votre application, qui se trouve et est 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 utilisateur lorsqu'une seule session Google a approuvé votre application auparavant. La valeur par défaut est false. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
booléen	Facultatif	`auto_select: true`

callback

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 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 le mode "Un appui" et le mode UX `popup`	`callback: handleResponse`

login_uri

Cet attribut correspond à l'URI de votre point de terminaison de connexion.

La 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 doit respecter nos Règles de validation des URI de redirection.

Cet attribut peut être omis si la page actuelle est votre page de connexion. Dans ce cas, les identifiants sont publiés sur cette page 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	La valeur par défaut est 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 intégré du navigateur. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
fonction	Facultatif	`native_callback: handleResponse`

cancel_on_tap_outside

Ce champ indique si la demande de paiement sans contact doit être annulée ou non si un utilisateur clique en dehors de l'invite. La valeur par défaut est true. Vous pouvez le désactiver en définissant la valeur sur false. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
booléen	Facultatif	`cancel_on_tap_outside: false`

prompt_parent_id

Cet attribut définit l'ID DOM de l'élément conteneur. Si ce n'est pas le cas, l'invite "Un appui" 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 de la nonce est limitée à la taille maximale de JWT prise en charge par votre environnement, ainsi qu'aux contraintes de taille HTTP du navigateur et du serveur individuels.

context

Ce champ modifie le texte du titre et des messages affichés dans l'invite de paiement sans contact. Il n'a aucun effet sur les navigateurs ITP. La valeur par défaut est signin.

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 leurs descriptions:

Contexte
`signin`	"Se connecter à"
`signup`	"S'inscrire à"
`use`	"Utiliser"

state_cookie_domain

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"`

ux_mode

Utilisez ce champ pour définir le parcours UX utilisé par le bouton "Se connecter avec Google". La valeur par défaut est popup. Cet attribut n'a aucun impact 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 leurs descriptions.

Mode UX
`popup`	Effectue le parcours UX de connexion dans une fenêtre pop-up.
`redirect`	Effectue le parcours d'expérience utilisateur de connexion via une redirection de page complète.

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 leurs descriptions.

Types de valeurs
`string`	Un seul URI de domaine.	`"https://example.com"`
`string array`	Tableau d'URI de domaine.	`["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). À retenir lorsque vous utilisez 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://.com et https://.co.uk ne sont pas valides, car "https://.example.com" correspond à example.com et à tous ses sous-domaines. Utilisez une liste d'éléments séparés par une virgule pour représenter deux domaines différents. Par exemple, "https://example1.com,https://.example2.com" correspond aux domaines example1.com, example2.com et 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 One Tap du mode iframe intermédiaire échoue et s'arrête.

intermediate_iframe_close_callback

Force le comportement par défaut de l'iframe intermédiaire lorsque les utilisateurs ferment manuellement One Tap en appuyant sur le bouton "X" dans l'interface utilisateur de 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 que dans le mode iframe intermédiaire. Et cela n'a d'impact que sur l'iframe intermédiaire, et non sur l'iframe One Tap. L'interface utilisateur du paiement sans contact est supprimée avant l'appel du rappel.

Type	Obligatoire	Exemple
fonction	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 prévention du suivi intelligent (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`

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 aboutit, la sélection du compte est ignorée. Les valeurs autorisées sont une adresse e-mail ou la valeur du champ sub d'un jeton d'identité.

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

Type	Obligatoire	Exemple
Chaîne, adresse e-mail ou valeur d'un champ `sub` de jeton d'identité.	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, utilisez cette option pour fournir un indice de nom de domaine à Google. Si l'opération réussit, les comptes utilisateur affichés lors de la sélection du compte sont limités au domaine fourni. Valeur générique: * n'offre que des comptes Workspace à l'utilisateur et exclut les comptes grand public (user@gmail.com) lors de la sélection du compte.

Pour en savoir plus, consultez le 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 à gérer le parcours 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
booléen	Facultatif	`use_fedcm_for_prompt: true`

use_fedcm_for_button

Ce champ détermine si l'expérience utilisateur du bouton FedCM doit être utilisée sur Chrome (ordinateur de bureau M125 et version ultérieure, et Android M128 et version ultérieure). La valeur par défaut est false. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
booléen	Facultatif	`use_fedcm_for_button: true`

button_auto_select

Ce champ détermine si l'option Sélection automatique doit être activée pour le flux de bouton FedCM. Si cette option est activée, les utilisateurs qui reviennent avec une session Google active seront automatiquement connectés, contournant ainsi l'invite du sélecteur de compte. La valeur par défaut est false. Vous devez activer explicitement la connexion automatique au bouton lors du lancement de l'activation. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
booléen	Facultatif	`button_auto_select: true`

Méthode: google.accounts.id.prompt

La méthode google.accounts.id.prompt affiche l'invite One Tap ou le gestionnaire d'identifiants intégré au navigateur une fois la méthode initialize() appelée. Consultez l'exemple de code suivant de la méthode:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Normalement, la méthode prompt() est appelée lors du chargement de la page. En raison de l'état de la session et des paramètres utilisateur côté Google, l'UI de l'invite avec un seul appui peut ne pas s'afficher. Pour recevoir des notifications sur l'état de l'UI à différents moments, transmettez une fonction pour recevoir des notifications sur l'état de l'UI.

Les notifications sont déclenché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 s'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.

Avertissement :Lorsque vous êtes sur un moment ignoré, n'essayez aucun des fournisseurs d'identité suivants.

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 est-elle destinée à un moment d'affichage ? 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 est-elle destinée à un moment d'affichage et l'UI est-elle affichée ? 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 est-elle destinée à un moment d'affichage et l'UI n'est-elle pas affichée ? 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'UI ne s'affiche pas. 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 prise en charge. Pour en savoir plus, consultez la page Migrer vers FedCM.
`isSkippedMoment()`	Cette notification concerne-t-elle un moment ignoré ?
`getSkippedReason()`	Motif détaillé de l'instant ignoré. Voici les valeurs possibles: `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` Remarque : Lorsque FedCM est activé, cette méthode n'est pas prise en charge. Pour en savoir plus, consultez la page Migrer vers FedCM.
`isDismissedMoment()`	Cette notification concerne-t-elle un moment ignoré ?
`getDismissedReason()`	Motif détaillé du licenciement. 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 liste 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 façon 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'identification sous la forme d'une chaîne de jeton Web JSON (JWT) encodée en base64.

Une fois décodé, le jeton JWT se présente comme suit:

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 global pour le compte Google. Utilisez uniquement le champ sub comme identifiant de l'utilisateur, car il est unique pour tous les comptes Google et n'est jamais réutilisé.

Les champs email, email_verified et hd vous permettent de déterminer si Google héberge et est l'autorité pour une adresse e-mail. Lorsque Google est l'autorité compétente, l'utilisateur est confirmé comme étant le propriétaire légitime du compte.

Cas où Google est l'autorité compétente:

email possède un suffixe @gmail.com. Il s'agit d'un compte Gmail.
Si email_verified est défini sur "true" et que hd est défini, il s'agit d'un compte Google Workspace.

Les utilisateurs peuvent s'inscrire à des comptes Google sans utiliser Gmail ni Google Workspace. Lorsque email ne contient pas de suffixe @gmail.com et que hd est absent, Google n'est pas l'autorité compétente. Il est recommandé d'utiliser un mot de passe ou d'autres méthodes de défi 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 l'heure d'expiration pour que vous puissiez valider le jeton côté serveur. Il s'agit d'une heure pour le jeton d'ID obtenu à partir de Se connecter avec Google. Vous devez valider le jeton avant la date d'expiration. N'utilisez pas exp pour la gestion des sessions. Un jeton d'ID expiré 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 liste les valeurs possibles pour le champ select_by. Le type de bouton utilisé avec la session et l'état du consentement 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é détectée, ou l'utilisateur a sélectionné un compte Google et s'est connecté pour établir une nouvelle session.
Avant de partager les identifiants du jeton d'identité avec votre application, l'utilisateur doit :
- a appuyé sur le bouton "Confirmer" pour autoriser le 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 des types suivants :

Valeur	Description
`auto`	Connexion automatique d'un utilisateur avec une session existante qui avait précédemment donné son consentement pour partager des identifiants. S'applique uniquement aux navigateurs non compatibles avec FedCM.
`user`	Un utilisateur disposant d'une session existante qui avait précédemment donné son consentement a appuyé sur le bouton "Continuer en tant que" de la fonctionnalité One Tap pour partager des identifiants. Ne s'applique qu'aux navigateurs non compatibles avec FedCM.
`fedcm`	Un utilisateur a appuyé sur le bouton "Continuer en tant que" avec un seul geste pour partager des identifiants à l'aide de FedCM. S'applique uniquement aux navigateurs compatibles avec FedCM.
`fedcm_auto`	Connexion automatique d'un utilisateur disposant d'une session existante qui avait précédemment donné son consentement pour partager des identifiants à l'aide de FedCM One Tap. S'applique uniquement aux navigateurs compatibles avec FedCM.
`user_1tap`	Un utilisateur disposant d'une session existante a appuyé sur le bouton "Continuer en tant que" avec un seul geste pour accorder son consentement et partager ses identifiants. S'applique uniquement à la version 75 et aux versions ultérieures de Chrome.
`user_2tap`	Un utilisateur sans session existante a appuyé sur le bouton "Continuer en tant que" avec un appui unique pour sélectionner un compte, puis sur le bouton "Confirmer" dans une fenêtre pop-up pour donner son consentement et partager ses identifiants. S'applique aux navigateurs autres que Chromium.
`itp`	Un utilisateur disposant d'une session existante qui avait précédemment donné son consentement a appuyé sur le bouton "One Tap" (Un clic) dans les navigateurs ITP.
`itp_confirm`	Un utilisateur disposant d'une session existante a appuyé sur le bouton "One Tap" (Appuyer une fois) dans les navigateurs ITP, puis sur le bouton "Confirm" (Confirmer) pour donner son consentement et partager ses identifiants.
`itp_add_session`	Un utilisateur qui n'a pas de session existante et qui a déjà donné son consentement a appuyé sur le bouton "One Tap" dans les navigateurs ITP pour sélectionner un compte Google et partager des identifiants.
`itp_confirm_add_session`	Un utilisateur sans session existante a d'abord appuyé sur le bouton One Tap dans les navigateurs ITP pour sélectionner un compte Google, puis sur le bouton "Confirmer" pour donner son consentement et partager ses identifiants.
`btn`	Un utilisateur disposant d'une session existante qui a précédemment donné son consentement a appuyé sur le bouton "Se connecter avec Google" et sélectionné un compte Google dans "Choisir un compte" pour partager des 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 donner son consentement et partager ses identifiants.
`btn_add_session`	Un utilisateur qui n'a pas de session active et qui a déjà accordé son consentement a appuyé sur le bouton Se connecter avec Google pour sélectionner un compte Google et partager des 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 sur le bouton Confirmer pour donner son consentement 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 cliqué est spécifié. La valeur de ce champ est identique à celle que vous avez spécifiée dans l'attribut state du bouton.

Étant donné que plusieurs boutons "Se connecter avec Google" peuvent être affichés sur la même page, vous pouvez attribuer une chaîne unique à chaque bouton. Vous pouvez donc utiliser 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 sur vos pages Web.

Consultez l'exemple de code suivant de 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`	Type de bouton: icône ou bouton standard.
`theme`	Thème du bouton. (par exemple, filled_blue ou filled_black).
`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 valeur est définie, 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".
`state`	Si elle 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 présente les types de boutons disponibles et leurs descriptions:

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 leurs descriptions:

Thème
`outline`	Thème de bouton standard.
`filled_blue`	Thème de boutons bleus.
`filled_black`	Thème de boutons remplis en 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 boutons disponibles et leurs descriptions:

Taille
`large`	Un grand bouton.
`medium`	Bouton de taille moyenne.
`small`	Un petit bouton.

texte

Texte du bouton. La valeur par défaut est signin_with. Il n'y a aucune différence visuelle pour le texte des boutons d'icônes qui ont des attributs text différents. La seule exception concerne la lecture du texte à des fins d'accessibilité.

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 de bouton disponibles et leurs descriptions:

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 "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 présente 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

L'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 le logo Google à gauche.
`center`	Centre l'alignement du 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. Affiche le texte du bouton dans la langue spécifiée. Sinon, utilise les paramètres du navigateur ou du compte Google de l'utilisateur par défaut. 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 ce paramètre n'est pas défini, 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 de 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 Sign in with Google button clicked... (Bouton Se connecter avec Google cliqué) est consigné dans la console lorsque l'utilisateur clique sur le bouton Se connecter avec Google.

state

Facultatif : comme plusieurs boutons "Se connecter avec Google" peuvent être affichés sur la même page, vous pouvez attribuer une chaîne unique à chaque bouton. La même chaîne est renvoyée avec le jeton d'ID afin que vous puissiez 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: identifiants

Lorsque votre fonction native_callback est appelée, un objet Credential est transmis en tant que paramètre. Le tableau suivant liste 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 d'UX. 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 intégré 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 de 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 la partie de confiance. L'opération d'annulation est ignorée si des identifiants sont déjà sélectionnés. 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 informé une fois la bibliothèque JavaScript Se connecter avec Google chargée:

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 de l'utilisateur spécifié. Consultez l'extrait de code suivant de la méthode : javascript google.accounts.id.revoke(login_hint, callback)

Paramètre	Type	Description
`login_hint`	chaîne	Adresse e-mail ou ID unique du compte Google de l'utilisateur. L'ID correspond à la propriété `sub` de la charge utile des 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 peut contenir un message de réponse d'erreur détaillé.

réussi

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é si l'appel de la méthode de révocation a échoué. Il est défini en cas de réussite.

Documentation de référence de l'API JavaScript Se connecter avec Google Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Méthode: google.accounts.id.initialize

Type de données: IdConfiguration

client_id

auto_select

callback

login_uri

native_callback

cancel_on_tap_outside

prompt_parent_id

nonce

context

state_cookie_domain

ux_mode

allowed_parent_origin

intermediate_iframe_close_callback

itp_support

login_hint

HD

use_fedcm_for_prompt

use_fedcm_for_button

button_auto_select

Méthode: google.accounts.id.prompt

Type de données: PromptMomentNotification

Type de données: CredentialResponse

identifiant

select_by

state

Méthode: google.accounts.id.renderButton

Type de données: GsiButtonConfiguration

Types d'attributs

type

thème

taille

texte

shape

logo_alignment

largeur

locale

click_listener

state

Type de données: identifiants

Méthode: google.accounts.id.disableAutoSelect

Méthode: google.accounts.id.storeCredential

Méthode: google.accounts.id.cancel

Rappel de chargement de la bibliothèque: onGoogleLibraryLoad

Méthode: google.accounts.id.revoke

Type de données: RevocationResponse

réussi

erreur

Documentation de référence de l'API JavaScript Se connecter avec Google
Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.