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

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

Élément avec l'ID &gt_id_onload"

Vous pouvez indiquer des attributs de données "Se connecter avec Google" dans tous les éléments visibles ou invisibles, tels que <div> et <span>. La seule condition requise est que l'ID de l'élément soit défini sur g_id_onload. Ne placez pas cet identifiant sur plusieurs éléments.

Attributs des données

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

Attribut
data-client_id	ID client de votre application
data-auto_prompt	Appuyez sur Google One.
data-auto_select	Activer la sélection automatique pour 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 de votre gestionnaire d'identifiants de mot de passe
data-native_callback	Nom de la fonction du gestionnaire d'identifiants du mot 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 s'il faut annuler l'invite si l'utilisateur clique en dehors de l'invite.
data-prompt_parent_id	ID DOM de l'élément de conteneur d'invite One Tap
data-skip_prompt_cookie	Ignore One Tap si le cookie spécifié a une valeur non vide.
data-nonce	Chaîne aléatoire pour les jetons d'ID
data-context	Titre et mots dans l'invite One Tap
data-moment_callback	Nom de la fonction de l'écouteur de notification d'état de l'interface utilisateur
data-state_cookie_domain	Si vous devez appeler One Tap dans le domaine parent et ses sous-domaines, transmettez le domaine parent à cet attribut pour qu'un seul cookie partagé soit utilisé.
data-ux_mode	Parcours d'expérience avec le bouton "Se connecter avec Google"
data-allowed_parent_origin	Origines autorisées à intégrer le cadre iFrame intermédiaire One Tap s'exécutera en mode iFrame intermédiaire si cet attribut est présent.
data-intermediate_iframe_close_callback	Remplace le comportement intermédiaire iFrame par défaut lorsque les utilisateurs ferment manuellement le geste "Appuyer".
data-itp_support	Cette règle permet d'activer l'expérience utilisateur améliorée sur One Tap dans les navigateurs ITP.

Types d'attributs

Les sections suivantes contiennent des informations sur chaque type d'attribut et un exemple.

identifiant_client_données

Cet attribut est l'ID client de votre application, trouvé et créé dans la Google Developers Console. Pour en savoir plus, consultez le tableau ci-dessous:

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

data-auto_mpmpt

Cet attribut détermine si afficher en un seul geste ou non. La valeur par défaut est true. Google One sans affichage ne s'affiche pas lorsque cette valeur est false. Pour en savoir plus, consultez le tableau ci-dessous:

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

auto-sélectionner des données

Cet attribut détermine si un jeton d'ID doit être renvoyé automatiquement ou sans interaction 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 ci-dessous:

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. Ce champ peut être omis si la page actuelle correspond à votre page de connexion. Dans ce 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'aucune fonction de rappel n'est définie et qu'un utilisateur clique sur les boutons "Se connecter avec Google" ou "Appuyer une fois" ou avec une connexion automatique.

Pour en savoir plus, consultez le tableau ci-dessous:

Type	Facultative	Exemple
URL	Valeur par défaut : URI de la page actuelle ou valeur que vous spécifiez. Cette règle est 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 ci-dessous:

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

Un des attributs data-login_uri et data-callback peut être utilisé. Cela dépend des configurations suivantes du composant et du mode expérience utilisateur:

• L'attribut data-login_uri est obligatoire pour le mode 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 bouton Google Sign-In popup pour l'expérience utilisateur. 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 de votre point de terminaison de gestionnaire d'identifiants de mot 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 cas d'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 ci-dessous:

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 les identifiants du mot de passe renvoyés 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'informations d'identification natif lorsqu'il n'y a pas de session Google. Vous n'êtes pas autorisé à définir à la fois data-native_callback et data-native_login_uri. Consultez le tableau ci-dessous pour en savoir plus:

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

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_id_param

Lorsque vous envoyez l'identifiant du mot de passe au point de terminaison du gestionnaire d'identifiants du mot 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 ci-dessous:

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

data-native_password_param

Lorsque vous envoyez l'identifiant du mot de passe au point de terminaison du gestionnaire d'identifiants du mot de passe, vous pouvez spécifier le nom du paramètre pour la valeur credential.password. Le nom par défaut est password. Consultez le tableau ci-dessous pour en savoir plus:

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

data-cancel_on_tap_externe

Cet attribut permet d'annuler ou non la demande d'appui unique si l'utilisateur clique en dehors de l'invite. La valeur par défaut est true. Pour le désactiver, définissez la valeur sur false. Pour en savoir plus, consultez le tableau ci-dessous:

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

identifiant-parent_invite_data

Cet attribut définit l'ID DOM de l'élément de conteneur. S'il n'est pas défini, l'invite d'appui unique s'affiche en haut à droite de la fenêtre. Pour en savoir plus, consultez le tableau ci-dessous:

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

data-skip_prompt_cookie

Cet attribut permet d'ignorer le geste associé au cookie si la valeur du cookie spécifié n'est pas vide. Pour en savoir plus, consultez le tableau ci-dessous:

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

non-data

Cet attribut est une chaîne aléatoire utilisée par le jeton d'ID pour empêcher les attaques par rediffusion. Pour en savoir plus, consultez le tableau ci-dessous:

Type	Obligatoire	Exemple
chaîne	Facultative	data-nonce="biaqbm70g23"

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

contexte-data

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

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

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

Contexte
signin	&quo;Se connecter avec Google"
signup	"Inscrivez-vous à 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'interface utilisateur. Pour en savoir plus, consultez le type de données PromptMomentNotification. Pour en savoir plus, consultez le tableau ci-dessous:

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

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-state_cookie_domain

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

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

data-ux_mode

Cet attribut définit le parcours utilisateur utilisé par le bouton "Se connecter avec Google". La valeur par défaut est popup. Cet attribut n'a pas d'incidence sur l'expérience utilisateur One Tap. Pour en savoir plus, consultez le tableau ci-dessous:

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

Le tableau suivant répertorie les modes disponibles pour l'expérience utilisateur et leur description.

Mode UX
popup	Effectue un flux de connexion utilisateur dans une fenêtre pop-up.
redirect	Effectue un flux de connexion basé sur l'expérience utilisateur via une redirection complète de la page.

data-allowed_parent_origin

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

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 valeur
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 échouera et s'arrêtera.

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) : points à retenir lors de l'utilisation des caractères génériques :

• Les chaînes de format ne peuvent pas être composées que 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 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 contenant 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-intermédiaire_iframe_close_callback

Ce paramètre permet de remplacer le comportement par défaut du cadre iFrame intermédiaire lorsque l'utilisateur ferme manuellement l'écran One Tap en appuyant sur le bouton 'X' dans l'interface utilisateur One Tap. Le comportement par défaut consiste à supprimer immédiatement le cadre iFrame intermédiaire du DOM.

Le champ data-intermediate_iframe_close_callback n'est pris en compte qu'en mode iFrame intermédiaire. Cela n'a d'incidence que sur l'iFrame intermédiaire, et non sur l'iFrame One Tap. L'UI de One Tap est supprimée avant le rappel.

Type	Obligatoire	Exemple
fonction	Facultative	data-intermediate_iframe_close_callback="logBeforeClose"

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-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 fonctionnalité Intelligent Tracking Prevention (ITP). La valeur par défaut est false. Pour en savoir plus, consultez le tableau ci-dessous:

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

Élément avec classe "g_id_signin"

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

Vous pouvez afficher plusieurs boutons "Se connecter avec Google" sur la même page. Chaque bouton peut posséder 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 leurs descriptions:

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 centre.
data-width	Largeur du bouton, en pixels.
data-locale	Le texte du bouton s'affiche dans la langue définie dans cet attribut.

Types d'attributs

Les sections suivantes contiennent des informations sur chaque type d'attribut et un exemple.

type de données

Type de bouton. La valeur par défaut est standard. Consultez le tableau ci-dessous pour en savoir plus:

Type	Obligatoire	Exemple
chaîne	Yes	data-type="icon"

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

Type
standard	Bouton avec texte ou informations personnalisées :
icon	Bouton avec une icône sans texte :

data-theme

Thème du bouton. La valeur par défaut est outline. Consultez le tableau ci-dessous pour en savoir plus:

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 de bouton noir :

Taille des données

Taille du bouton. La valeur par défaut est large. Consultez le tableau ci-dessous pour en savoir plus:

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 grand bouton :
medium	Bouton de taille moyenne :
small	Petit bouton :

texte-données

Texte du bouton. La valeur par défaut est signin_with. Il n'y a pas de différence visuelle pour le texte des boutons d'icône comportant différents attributs data-text. La seule exception est lorsque le texte est lu pour l'accessibilité de l'écran.

Pour en savoir plus, consultez le tableau ci-dessous:

Type	Obligatoire	Exemple
chaîne	Facultative	data-text="signup_with"

Le tableau suivant répertorie les textes et les descriptions des boutons disponibles:

Texte
signin_with	Le texte du bouton est "Se connecter avec Google" :
signup_with	Le texte du bouton est "Inscrivez-vous avec Google" :
continue_with	Le texte du bouton est "Continuer avec Google" :
signin	Le texte du bouton est "Connexion".

forme-données

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

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

Le tableau suivant présente les formes de boutons disponibles et leur description:

Forme
rectangular	Bouton de forme rectangulaire. Utilisé pour le type de bouton icon, il 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 cette option est utilisée pour le type de bouton standard, elle est identique à pill.
square	Bouton en forme de carré. Si cette option est utilisée pour le type de bouton standard, elle est identique à rectangular.

logo-logo

Alignement du logo Google. La valeur par défaut est left. Cet attribut ne s'applique qu'au type de bouton standard. Consultez le tableau ci-dessous pour en savoir plus:

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

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

logo_alignement
left	Aligner à gauche le logo Google :
center	Centre le logo Google au centre :

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 ci-dessous:

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

données-locales

Paramètres régionaux prédéfinis du texte du bouton. S'il n'est pas défini, les paramètres régionaux par défaut du navigateur ou les préférences de l'utilisateur de session Google sont utilisés. Par conséquent, les internautes peuvent voir différentes versions des boutons localisés avec différentes tailles.

Pour en savoir plus, consultez le tableau ci-dessous:

Type	Obligatoire	Exemple
chaîne	Facultative	data-locale="zh_CN"

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 un lien lui permettant d'obtenir des informations supplémentaires.

La requête HTTP POST contient les informations suivantes:

Format	Name	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 qui correspond à la valeur du 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	Mode de sélection des identifiants.

Une fois décodée, le jeton d'ID 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": "[e-mail]", // 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 pour le champ select_by. Le type de bouton utilisé, ainsi que l'état de la session et de l'autorisation, permettent de définir la valeur :

• L'utilisateur a appuyé sur le bouton One Tap ou Se connecter avec Google ou a utilisé la procédure de connexion automatique sans contact.

• Une session existante a été trouvée, ou l'utilisateur a sélectionné un compte Google et s'y est connecté pour en créer une.

• Avant de partager les identifiants du jeton d'ID avec votre application, l'utilisateur doit procéder comme suit :

  • Ils ont appuyé sur le bouton "Confirmer" pour donner leur consentement concernant le partage des identifiants.
  • avait déjà donné son consentement et utilisé "Sélectionner un compte" pour choisir un compte Google.

La valeur de ce champ est définie sur l'un de ces types :

Valeur	Description
auto	Connexion automatique d'un utilisateur avec une session existante qui a donné son accord préalable pour le partage d'identifiants.
user	Un utilisateur disposant d'une session existante qui a donné son accord précédemment a appuyé sur le bouton One & &33;Continue as & #39; pour partager des identifiants.
user_1tap	Un utilisateur avec une session existante a appuyé sur le bouton "Continuer" pour accorder son consentement et partager des identifiants. S'applique uniquement à Chrome v75 et aux versions ultérieures.
user_2tap	Un utilisateur sans session existante a appuyé sur le bouton "Continuer" pour sélectionner un compte, puis a appuyé sur le bouton "Confirmer" dans une fenêtre pop-up pour donner son consentement et partager des identifiants. S'applique aux navigateurs non basés sur Chromium.
btn	Un utilisateur disposant d'une session existante qui a donné son consentement a appuyé sur le bouton "Se connecter avec Google" et a sélectionné un compte Google à partir du compte "Choisir un compte" pour partager les identifiants.
btn_confirm	Un utilisateur avec une session existante a appuyé sur le bouton "Se connecter avec Google", puis sur le bouton "Confirmer" pour accorder son consentement et partager des identifiants.
btn_add_session	Un utilisateur sans session existante qui a donné son accord préalable 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 accord et partager des identifiants.

Point de terminaison du gestionnaire d'identifiants de mot de passe

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

La requête HTTP POST contient les informations suivantes:

Format	Name	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 qui correspond à la valeur de cookie précédente, g_csrf_token.
Paramètre de requête	email	Jeton d'ID émis par Google.
Paramètre de requête	password	Mode de sélection des identifiants.

Remarque : Vous pouvez modifier les noms des paramètres email et password à l'aide des attributs de données.