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

Documentation de référence sur la connexion avec l'API HTML Google

Cette page de référence décrit l'API Se connecter avec Google pour les attributs de données HTML. Vous pouvez utiliser l'API pour afficher l'invite One Tap ou le bouton Se connecter avec Google sur vos pages Web.

Élément associé à l'ID "g_id_onload"

Vous pouvez insérer des attributs de données Se connecter avec Google dans n'importe quel élément visible ou invisible, tel que <div> et <span>. La seule condition requise est que l'ID de l'élément soit défini sur g_id_onload. N'ajoutez pas cet ID sur plusieurs éléments.

Attributs de données

Le tableau suivant répertorie les attributs de données et leur description:

Attribut
`data-client_id`	ID client de votre application
`data-auto_prompt`	Affichez le Google One Tap.
`data-auto_select`	Active la sélection automatique sur Google One Tap.
`data-login_uri`	URL de votre point de terminaison de connexion
`data-callback`	Nom de la fonction du gestionnaire de jetons de l'ID JavaScript
`data-native_login_uri`	URL du point de terminaison du gestionnaire d'identifiants des mots de passe
`data-native_callback`	Nom de la fonction du gestionnaire d'identifiants des mots de passe JavaScript
`data-native_id_param`	Nom du paramètre pour la valeur `credential.id`
`data-native_password_param`	Nom du paramètre pour la valeur `credential.password`
`data-cancel_on_tap_outside`	Détermine si l'invite doit être annulée si l'utilisateur clique en dehors de l'invite.
`data-prompt_parent_id`	ID DOM de l'élément conteneur d'invite One Tap
`data-skip_prompt_cookie`	Ignore One Tap si la valeur du cookie spécifié n'est pas vide.
`data-nonce`	Chaîne aléatoire de jetons d'ID
`data-context`	Titre et mots figurant dans l'invite One Tap
`data-moment_callback`	Nom de la fonction de l'écouteur de notification d'état de l'interface utilisateur d'invite
`data-state_cookie_domain`	Si vous devez appeler One Tap dans le domaine parent et ses sous-domaines, transmettez le domaine parent à cet attribut afin d'utiliser un seul cookie partagé.
`data-ux_mode`	Flux d'expérience utilisateur du bouton "Se connecter avec Google"
`data-allowed_parent_origin`	Origines autorisées à intégrer l'iFrame intermédiaire. One Tap s'exécute en mode iFrame intermédiaire si cet attribut est présent.
`data-intermediate_iframe_close_callback`	Ignore le comportement iFrame intermédiaire par défaut lorsque l'utilisateur ferme manuellement l'application One Tap.
`data-itp_support`	Active l'expérience utilisateur One Tap mise à niveau sur les navigateurs ITP.

Types d'attributs

Les sections suivantes contiennent des informations sur le type de chaque attribut et un exemple.

id_client_données

Cet attribut correspond à l'ID client de votre application. Il est créé et créé dans la Google Developers Console. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Oui	`data-client_id="CLIENT_ID.apps.googleusercontent.com"`

invite-auto_données

Cet attribut détermine si un geste doit être affiché ou non. La valeur par défaut est true. Google One Tap ne sera pas affiché lorsque cette valeur sera false. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
booléen	Facultative	`data-auto_prompt="true"`

données-sélection_automatique

Cet attribut détermine si un jeton d'identification doit être renvoyé automatiquement, sans aucune intervention de l'utilisateur, si une seule session Google a approuvé votre application. La valeur par défaut est false. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
booléen	Facultative	`data-auto_select="true"`

data-login_uri

Cet attribut est l'URI de votre point de terminaison de connexion. Peut être omis si la page actuelle correspond à 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'aucune fonction de rappel n'est définie et qu'un utilisateur clique sur les boutons "Se connecter avec Google" ou "One Tap" ou lorsque la connexion automatique a lieu.

Pour en savoir plus, consultez le tableau suivant:

Type	Facultative	Exemple
URL	Valeur par défaut : URI de la page active ou valeur spécifiée. Ignorée lorsque `data-ux_mode="popup"` et `data-callback` sont définis.	`data-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

data-callback

Cet attribut est le nom de la fonction JavaScript qui gère le jeton d'ID renvoyé. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Obligatoire si `data-login_uri` n'est pas défini.	`data-callback="handleToken"`

Vous pouvez utiliser l'un des attributs data-login_uri et data-callback. Cela dépend des configurations de composants et de mode d'expérience utilisateur suivantes:

L'attribut data-login_uri est requis pour le mode d'expérience utilisateur redirect du bouton "Se connecter avec Google", qui ignore l'attribut data-callback.
L'un de ces deux attributs doit être défini pour Google One Tap et le mode Expérience utilisateur popup du bouton Google Sign-In. Si les deux sont définis, l'attribut data-callback a une priorité plus élevée.

Les fonctions JavaScript dans un espace de noms ne sont pas compatibles avec l'API HTML. Utilisez plutôt une fonction JavaScript globale sans espace de noms. Par exemple, utilisez mylibCallback au lieu de mylib.callback.

data-native_login_uri

Cet attribut est l'URL du point de terminaison de votre gestionnaire d'identifiants de mots de passe. Si vous définissez l'attribut data-native_login_uri ou l'attribut data-native_callback, la bibliothèque JavaScript revient au gestionnaire d'identifiants natif en l'absence de session Google. Vous n'êtes pas autorisé à définir les attributs data-native_callback et data-native_login_uri. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-login_uri="https://www.example.com/password_login"`

data-native_callback

Cet attribut est le nom de la fonction JavaScript qui gère l'identifiant du mot de passe renvoyé par le gestionnaire d'identifiants natif du navigateur. Si vous définissez l'attribut data-native_login_uri ou l'attribut data-native_callback, la bibliothèque JavaScript revient au gestionnaire d'identifiants natif en l'absence de session Google. Vous n'êtes pas autorisé à définir à la fois data-native_callback et data-native_login_uri. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-native_callback="handlePasswordCredential"`

data-native_id_param

Lorsque vous envoyez les identifiants du mot de passe au point de terminaison du gestionnaire d'identifiants des mots de passe, vous pouvez spécifier le nom du paramètre pour le champ credential.id. Le nom par défaut est email. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
URL	Facultative	`data-native_id_param="user_id"`

data-native_password_param

Lorsque vous envoyez les identifiants du mot de passe au point de terminaison du gestionnaire d'identifiants des mots de passe, vous pouvez spécifier le nom du paramètre pour la valeur credential.password. Le nom par défaut est password. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
URL	Facultative	`data-native_password_param="pwd"`

data-cancel_on_tap_outside

Cet attribut permet d'indiquer si l'utilisateur doit cliquer en dehors de l'invite ou annuler la requête One Tap. La valeur par défaut est true. Pour la désactiver, définissez la valeur sur false. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
booléen	Facultative	`data-cancel_on_tap_outside="false"`

id-prompt_parent_id

Cet attribut définit l'identifiant DOM de l'élément conteneur. Si ce n'est pas le cas, l'invite d'un geste s'affiche en haut à droite de la fenêtre. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-prompt_parent_id="parent_id"`

data-skip_prompt_cookie

Cet attribut permet d'ignorer le paiement sans contact si la valeur du cookie spécifié n'est pas vide. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-skip_prompt_cookie="SID"`

non-données

Cet attribut 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	Facultative	`data-nonce="biaqbm70g23"`

La longueur des nonces est limitée par la taille maximale de JWT acceptée par votre environnement et par les contraintes de taille HTTP du navigateur et du serveur individuelles.

Contexte des données

Cet attribut modifie le texte du titre et les messages affichés dans l'invite One Tap. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-context="use"`

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

Contexte
`signin`	"Se connecter avec Google"
`signup`	"Inscrivez-vous avec Google"
`use`	"Utiliser avec Google"

data-moment_callback

Cet attribut est le nom de la fonction de l'écouteur de notification d'état de l'UI d'invite. Pour plus d'informations, reportez-vous au type de données PromptMomentNotification. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-moment_callback="logMomentNotification"`

data-state_cookie_domain

Si vous devez afficher One Tap dans un domaine parent et ses sous-domaines, transmettez le domaine parent à cet attribut afin qu'un cookie à état partagé unique soit utilisé. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-state_cookie_domain="example.com"`

mode données-ux

Cet attribut définit 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 One Tap. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-ux_mode="redirect"`

Le tableau suivant répertorie 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 via une redirection complète de la page.

origine_parent_autorisée

Origines autorisées à intégrer l'iFrame intermédiaire. One Tap s'exécute en mode iFrame intermédiaire si cet attribut est présent. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne ou tableau de chaînes	Facultative	`data-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`	Liste d'URI de domaines séparés par une virgule.	"https://news.example.com,https://local.example.com"

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

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). Gardez les points suivants à l'esprit 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" correspondra à example.com et à ses sous-domaines. Vous pouvez également utiliser 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" correspondra aux domaines example1.com, example2.com et aux sous-domaines de example2.com.
Les domaines avec des caractères génériques doivent commencer par un schéma https:// sécurisé. "*.example.com" seront considérés comme non valides.

data-intermediate_iframe_close_callback

Remplace le comportement intermédiaire iFrame par défaut lorsque l'utilisateur ferme manuellement le geste "Appuyer une fois" 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 data-intermediate_iframe_close_callback ne prend effet qu'en mode iFrame intermédiaire. Il 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
fonction	Facultative	`data-intermediate_iframe_close_callback="logBeforeClose"`

data-itp_support

Ce champ détermine si l'expérience utilisateur One Tap mise à niveau doit être activée ou non 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	Facultative	`data-itp_support="true"`

Élément avec la classe "g_id_signin"

Si vous ajoutez g_id_signin à l'attribut class d'un élément, celui-ci s'affiche sous forme de bouton Se connecter avec Google.

Vous pouvez afficher plusieurs boutons Se connecter avec Google sur la même page. Chaque bouton peut avoir ses propres paramètres visuels. Les paramètres sont définis par les attributs de données suivants.

Attributs des données visuelles

Le tableau suivant répertorie les attributs des données visuelles et leur description:

Attribut
`data-type`	Type de bouton: icône ou bouton standard.
`data-theme`	Thème du bouton. (par exemple, remplissage_bleu ou remplissage_noir).
`data-size`	Taille du bouton. Par exemple, petit ou grand.
`data-text`	Texte du bouton. Par exemple, "Se connecter avec Google" ou "S'inscrire avec Google".
`data-shape`	Forme du bouton. (par exemple, rectangulaire ou circulaire).
`data-logo_alignment`	Alignement du logo Google: à gauche ou au centre.
`data-width`	Largeur du bouton, en pixels.
`data-locale`	Le texte du bouton s'affiche dans la langue définie dans cet attribut.
`data-click_listener`	Si cette option est définie, elle est appelée en cas de clic sur le bouton "Se connecter avec Google".

Types d'attributs

Les sections suivantes contiennent des informations sur le type de chaque attribut et un exemple.

type de données

Type de bouton. La valeur par défaut est standard. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Oui	`data-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 :

data-theme

Thème du bouton. La valeur par défaut est outline. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-theme="filled_blue"`

Le tableau suivant répertorie les thèmes disponibles et leur description:

Thème
`outline`	Thème du bouton standard :
`filled_blue`	Thème du bouton bleu :
`filled_black`	Thème du bouton noir :

Taille des données

Taille du bouton. La valeur par défaut est large. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-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 :

texte-données

Texte du bouton. La valeur par défaut est signin_with. Il n'y a aucune différence visuelle pour le texte des boutons avec des attributs data-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	Facultative	`data-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" :

forme de données

Forme du bouton. La valeur par défaut est rectangular. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-shape="rectangular"`

Le tableau suivant répertorie les formes de boutons disponibles et leur description:

Forme
`rectangular`	Bouton 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`.

data-logo_alignment

L'alignement du logo Google. La valeur par défaut est left. Cet attribut s'applique uniquement au type de bouton standard. Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-logo_alignment="center"`

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

logo_alignement
`left`	Alignement à gauche du logo Google :
`center`	Centre le logo Google :

largeur des données

Largeur minimale du bouton, en pixels. La largeur maximale disponible est de 400 pixels.

Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-width=400`

paramètres régionaux

Paramètres régionaux prédéfinis du texte du bouton. Si elle 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 utilisateurs peuvent voir différentes versions des boutons localisés, et éventuellement des tailles différentes.

Pour en savoir plus, consultez le tableau suivant:

Type	Obligatoire	Exemple
chaîne	Facultative	`data-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 l'exemple ci-dessus, lorsque vous cliquez sur le bouton Se connecter avec Google, le message se connecte à la console.

Intégration côté serveur

Vos points de terminaison côté serveur doivent gérer les requêtes HTTP POST suivantes.

Point de terminaison du gestionnaire de jetons d'ID

Le point de terminaison du gestionnaire de jetons d'ID traite le jeton d'ID. En fonction de l'état du compte correspondant, vous pouvez connecter l'utilisateur et le rediriger vers une page d'inscription ou vers une page d'association de comptes pour plus d'informations.

La requête HTTP POST contient les informations suivantes:

Format	Nom	Description
Cookie	`g_csrf_token`	Chaîne aléatoire qui change à chaque requête envoyée au point de terminaison du gestionnaire.
Paramètre de requête	`g_csrf_token`	Une chaîne identique à la valeur de cookie précédente, `g_csrf_token.`
Paramètre de requête	`credential`	Jeton d'ID émis par Google.
Paramètre de requête	`select_by`	Méthode de sélection des identifiants.

Lorsqu'il est décodé, le jeton d'ID 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": "Eliza",
  "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 tableau suivant répertorie les valeurs possibles du champ select_by. Le type de bouton ainsi que 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 été sélectionné et connecté à un compte Google pour en créer une.
Avant de partager les identifiants du jeton d'ID avec votre application, l'utilisateur doit
- a appuyé sur le bouton "Confirmer" pour autoriser son partage des identifiants ; ou
- ayant 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 :

Value	Description
`auto`	Connexion automatique d'un utilisateur disposant d'une session existante et ayant précédemment donné son accord pour partager des identifiants
`user`	Un utilisateur ayant déjà autorisé l'utilisateur a appuyé sur le bouton "Continuer en tant que" permettant de partager des identifiants.
`user_1tap`	Un utilisateur disposant d'une session existante a appuyé sur le bouton "Continuer en tant que" pour accorder le consentement et partager des identifiants. S'applique uniquement à Chrome 75 ou version ultérieure.
`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 avec 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 "Sélectionner un compte" pour partager les 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 le consentement et partager des identifiants.
`btn_add_session`	Un utilisateur qui n'avait pas de session et qui a déjà donné 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 sur le bouton "Confirmer" pour accepter et partager les identifiants.

Point de terminaison du gestionnaire d'identifiants des mots de passe

Le point de terminaison du gestionnaire d'identifiants des mots de passe traite les identifiants de mot de passe récupérés par le gestionnaire d'identifiants natif.

La requête HTTP POST contient les informations suivantes:

Format	Nom	Description
Cookie	`g_csrf_token`	Chaîne aléatoire qui change à chaque requête envoyée au point de terminaison du gestionnaire.
Paramètre de requête	`g_csrf_token`	Chaîne identique à la valeur de cookie précédente, `g_csrf_token`.
Paramètre de requête	`email`	Jeton d'ID que Google émet.
Paramètre de requête	`password`	Méthode de sélection des identifiants.