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

Cette page de référence décrit l'API Sign-In JavaScript. Vous pouvez utiliser cette API pour afficher l'invite One Tap ou le bouton "Se connecter avec Google" sur vos pages Web.

Méthode: google.accounts.id.Initialize

La méthode google.accounts.id.initialize initialise la fonctionnalité Se connecter avec Google. en fonction de l'objet de configuration. Consultez l'exemple de code suivant du composant 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 un client Se connecter avec Google. qui peut être utilisée implicitement par tous les modules d'une même page Web.

  • Vous n'avez besoin d'appeler la méthode google.accounts.id.initialize qu'une seule fois si vous utilisez plusieurs modules (comme 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 les configurations chaque fois que vous appelez la méthode google.accounts.id.initialize et toutes les méthodes suivantes dans le même utilisent immédiatement les nouvelles configurations.

Type de données: IdConfiguration

Le tableau suivant répertorie les champs et les descriptions de IdConfiguration. type de données:

Champ
client_id L'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 bouton "Se connecter avec Google" popup. Utilisez ce mode d'utilisation. .
login_uri URL de votre point de terminaison de connexion. Bouton "Se connecter avec Google" Le 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 la requête 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, transmettons 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. One Tap est exécuté en mode iFrame intermédiaire si ce champ est présent.
intermediate_iframe_close_callback Remplace le comportement intermédiaire intermédiaire par défaut lorsque les utilisateurs fermer One Tap.
itp_support Active l'expérience utilisateur One Tap mise à niveau sur les navigateurs ITP.
login_hint Ignorer la sélection du compte en fournissant un indice à l'utilisateur.
hd Limitez la sélection de comptes par domaine.
use_fedcm_for_prompt Autoriser le navigateur à contrôler les invites de connexion des utilisateurs et à arbitrer le entre votre site Web et Google.

client_id

Ce champ est l'ID client de votre application, qui est trouvé et créé dans le 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 aucun utilisateur interaction 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 informations:

Type Obligatoire Exemple
booléen Facultatif auto_select: true

rappel

Ce champ est la fonction JavaScript qui gère le jeton d'ID renvoyé par l'invite One Tap ou la fenêtre pop-up. Cet attribut est obligatoire si Google One Tap ou le bouton Se connecter avec Google popup Le mode UX est utilisé. Consultez le pour en savoir plus:

Type Obligatoire Exemple
fonction Obligatoire pour One Tap et le mode UX popup callback: handleResponse

login_uri

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

La valeur doit correspondre exactement à l'un des URI de redirection autorisés pour l'authentification OAuth 2.0, que vous avez configuré dans la console Google Cloud et doivent respecter notre validation de l'URI de redirection règles de confidentialité.

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

La réponse concernant les identifiants du jeton d'ID est publiée sur le 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 un la clé credential avec un du 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 est le nom de la fonction JavaScript qui gère le mot de passe identifiant renvoyé par le gestionnaire d'identifiants natif du navigateur. Consultez le pour en savoir plus:

Type Obligatoire Exemple
fonction Facultatif native_callback: handleResponse

cancel_on_tap_outside

Ce champ indique si la demande One Tap doit être annulée ou non si un utilisateur clique sur en dehors de la requête. La valeur par défaut est true. Vous pouvez la désactiver si vous définissez la valeur sur false. Pour en savoir plus, consultez le tableau suivant:

Type Obligatoire Exemple
booléen Facultatif cancel_on_tap_outside: false

prompt_parent_id

Cet attribut définit l'ID DOM de l'élément conteneur. Si elle n'est pas définie, le L'invite One Tap s'affiche en haut à droite de la fenêtre. Consultez le pour en savoir plus:

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 de jeton JWT maximale acceptée par votre environnement. et les contraintes de taille HTTP individuelles pour les navigateurs et les serveurs.

context

Ce champ modifie le texte du titre et des messages dans l'invite One Tap. Voir 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:

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 la valeur parent à ce champ afin qu'un seul cookie à état partagé soit utilisé. Voir 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 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. Consultez le pour en savoir plus:

Type Obligatoire Exemple
chaîne Facultatif ux_mode: "redirect"

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

Mode UX
popup Effectue le flux de connexion de l'expérience utilisateur dans une fenêtre pop-up.
redirect Effectue le flux de connexion de l'expérience utilisateur par une redirection pleine page.

allowed_parent_origin

Origines autorisées à intégrer l'iFrame intermédiaire. Courses avec One Tap en mode iFrame intermédiaire si ce champ est présent. Consultez les ressources suivantes : pour en savoir plus:

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 domaine. ["https://news.example.com", "https://local.example.com"]

Les préfixes comportant des caractères génériques sont également acceptés. 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 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 élément de niveau supérieur domaine. 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 pour représenter deux domaines différents. Par exemple : ["https://example1.com", "https://.example2.com"] correspondances les domaines example1.com, example2.com et 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" est considéré comme non valide.

Si la valeur du champ allowed_parent_origin n'est pas valide, le service One Tap L'initialisation du mode iFrame intermédiaire échouerait et s'arrêtait.

intermediate_iframe_close_callback

Remplace le comportement intermédiaire intermédiaire par défaut lorsque les utilisateurs ferment manuellement One Appuyez sur le "X" dans l'interface utilisateur de One Tap. Le comportement par défaut est supprimez immédiatement l'iFrame intermédiaire du DOM.

Le champ intermediate_iframe_close_callback n'a d'effet qu'au niveau intermédiaire le mode iFrame. L'impact n'a d'incidence que sur l'iFrame intermédiaire, et non sur le iFrame One Tap. L'interface utilisateur de One Tap 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'élément expérience One Tap améliorée doit être activé sur les navigateurs compatibles avec Intelligent Tracking Prevention (ITP). La valeur par défaut est false. Pour en savoir plus, consultez le tableau suivant informations:

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. Lorsque l'opération réussit, la sélection du compte est ignorée. Valeurs acceptées: adresse e-mail ou valeur du champ sub du jeton d'ID.

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

Type Obligatoire Exemple
Chaîne, adresse e-mail ou valeur d'un jeton d'ID sub. 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 compte, utilisez-le pour fournir à Google un indice de nom de domaine. En cas de succès, l'utilisateur les comptes affichés lors de la sélection des comptes sont limités au domaine indiqué. Un caractère 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 en savoir plus, 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

Autoriser 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". Voir Migrer vers FedCM pour en savoir plus.

Type Obligatoire Exemple
booléen Facultatif use_fedcm_for_prompt: true

Méthode: google.accounts.id.prompt

La méthode google.accounts.id.prompt affiche l'invite One Tap ou gestionnaire d'identifiants natif du navigateur après l'appel de la méthode initialize(). 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 au chargement de la page. En raison de la session et des paramètres utilisateur côté Google, il est possible que l'interface utilisateur de l'invite One Tap ne soit pas affiché. Pour recevoir une notification sur l'état de l'interface utilisateur à différents moments, transmettez une pour recevoir des notifications d'état de l'interface utilisateur.

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

  • Moment d'affichage:cela se produit après l'appel de la méthode prompt(). La contient une valeur booléenne indiquant si l'interface utilisateur est affichées ou non.

  • Moment où l'action est ignorée:l'invite One Tap est fermée automatiquement une annulation manuelle ou une annulation manuelle, ou lorsque Google ne parvient pas à émettre un certificat, Lorsque la session sélectionnée se déconnecte de Google.

    Dans ce cas, nous vous recommandons de passer à l'identité suivante fournisseurs, le cas échéant.

  • Ignorer:cet événement se produit lorsque Google récupère un ou qu'un utilisateur souhaite arrêter le flux de récupération d'identifiants. Pour exemple, lorsque l'utilisateur commence à saisir son nom d'utilisateur et son mot de passe dans votre vous pouvez appeler la méthode google.accounts.id.cancel() pour la fermer l'invite One Tap et déclenchera la fermeture d'un moment.

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 descriptions des Type de données PromptMomentNotification:

Méthode
isDisplayMoment() Cette notification s'affiche-t-elle un moment ?

Remarque : Lorsque FedCM est <ph type="x-smartling-placeholder"></ph> activée, cette notification n'est pas déclenchée. Voir Migrer vers FedCM pour en savoir plus.
isDisplayed() S'agit-il d'une notification à afficher ? L'UI est s'affiche-t-il ?

Remarque : Lorsque FedCM est <ph type="x-smartling-placeholder"></ph> activée, cette notification n'est pas déclenchée. Voir Migrer vers FedCM pour en savoir plus.
isNotDisplayed() Cette notification s'affiche-t-elle à un moment, alors que l'UI n'est pas s'affiche-t-il ?

Remarque : Lorsque FedCM est <ph type="x-smartling-placeholder"></ph> activée, cette notification n'est pas déclenchée. Voir Migrer vers FedCM pour en savoir plus.
getNotDisplayedReason()

Raison détaillée pour laquelle l'interface utilisateur ne s'affiche pas. Les éléments suivants sont 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 <ph type="x-smartling-placeholder"></ph> activée, cette méthode n'est pas compatible. Voir Migrer vers FedCM pour en savoir plus.
isSkippedMoment() Cette notification a-t-elle été ignorée à un moment donné ?
getSkippedReason()

Raison détaillée du moment où il a été ignoré. Les éléments suivants sont valeurs possibles:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
Remarque : Lorsque FedCM est <ph type="x-smartling-placeholder"></ph> activée, cette méthode n'est pas compatible. Voir Migrer vers FedCM pour en savoir plus.
isDismissedMoment() Cette notification est-elle ignorée à un moment précis ?
getDismissedReason()

Motif détaillé du refus. Les actions suivantes sont possibles : :

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

Renvoyez une chaîne pour le type de moment. Les actions suivantes sont 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 est le jeton d'ID renvoyé.
select_by Ce champ définit la manière dont l'identifiant est sélectionné.
state Ce champ n'est défini que lorsque l'utilisateur clique sur un lien Se connecter avec Google pour se connecter et son state est spécifié.

identifiant

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

Quand ? décodée, Le jeton JWT ressemble à l'exemple suivant: 

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

Le champ sub est un identifiant unique associé au compte Google. Seulement Utilisez le champ sub comme identifiant de l'utilisateur, car il est unique parmi tous les services et ne sont jamais réutilisés. N'utilisez pas l'adresse e-mail comme identifiant, car Un compte Google peut être associé à plusieurs adresses e-mail à différents moments.

À l'aide des champs email, email_verified et hd, vous pouvez déterminer si Google hôtes et fait autorité pour une adresse e-mail. Dans les cas où Google faisant autorité, l’utilisateur est confirmé comme étant le titulaire légitime du compte.

Cas dans lesquels Google fait autorité:

  • email comporte le suffixe @gmail.com. Il s'agit d'un compte Gmail.
  • email_verified est "true" et hd est défini. Il s'agit d'un Google Workspace. Google Cloud.

Les utilisateurs peuvent créer un compte Google sans utiliser Gmail ni Google Workspace. Lorsque email ne contient pas de suffixe @gmail.com et que hd est absent, Google est pas faisant autorité et un mot de passe ou d’autres méthodes d’authentification sont recommandés pour valider l'utilisateur. email_verfied peut aussi être défini sur "true", car Google a été validé initialement l'utilisateur lors de la création du compte Google, quel que soit le propriétaire le compte de messagerie tiers a peut-être changé depuis.

Le champ exp indique le délai d'expiration dont vous disposez pour vérifier le jeton sur votre côté serveur. Il est d'une heure pour le jeton d'ID obtenu via Se connecter avec Google. Vous devez vérifier votre jeton avant l'expiration en temps réel. N'utilisez pas exp pour la gestion des sessions. Jeton d'ID expiré ne signifie pas que l'utilisateur est déconnecté. Votre application est responsable des sessions de vos utilisateurs.

select_by

Le tableau suivant répertorie les valeurs possibles pour le champ select_by. La type de bouton utilisé avec l'état de la session et de l'état du consentement sont utilisés pour 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é et s'est connecté à un Compte Google pour ouvrir une nouvelle session.

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

    • appuyé sur le bouton "Confirmer" pour autoriser le partage des identifiants, ou
    • avait déjà donné son consentement et utilisé l'option "Sélectionner un compte" pour choisir Compte Google.

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

Valeur Description
auto Connexion automatique d'un utilisateur ayant une session existante et ayant eu a déjà autorisé le partage d'identifiants. S'applique uniquement aux des navigateurs non compatibles avec FedCM.
user Un utilisateur ayant déjà donné son consentement au moment d'une session appuyé sur le bouton One Tap sur "Continuer en tant que" pour partager les identifiants. S'applique uniquement pour les navigateurs non compatibles avec FedCM.
fedcm Un utilisateur a appuyé sur One Tap sur "Continuer en tant que" bouton pour partager à l'aide de FedCM. S'applique uniquement à FedCM compatible des navigateurs.
fedcm_auto Connexion automatique d'un utilisateur ayant une session existante et ayant eu a déjà accepté de partager ses identifiants à l'aide de FedCM One Tap. S'applique uniquement à FedCM compatible des navigateurs.
user_1tap Un utilisateur ayant déjà ouvert une session a appuyé sur One Tap sur "Continuer en tant que" pour donner votre autorisation et partager vos identifiants. S'applique uniquement à Chrome v75 et versions ultérieures.
user_2tap Un utilisateur sans session existante a appuyé sur One Tap sur "Continuer en tant que" pour sélectionner un compte, puis appuyé sur le bouton "Confirmer" pour autoriser et partager les identifiants. S'applique à qui ne sont pas basés sur Chromium.
btn Un utilisateur ayant déjà accordé son consentement à une session existante appuyé sur le bouton "Se connecter avec Google" et sélectionné un compte Google dans Sélectionner un compte pour partager les identifiants.
btn_confirm Un utilisateur ayant déjà ouvert une session a appuyé sur le bouton "Se connecter avec Google" et j'ai appuyé sur le bouton "Confirmer" pour accorder l'autorisation et partager les identifiants.
btn_add_session Un utilisateur ne disposant pas d'une session et qui a déjà accordé vous avez 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 appuyez sur le bouton "Confirmer" pour autoriser et partager les identifiants.

state

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

Étant donné que plusieurs boutons "Se connecter avec Google" peuvent s'afficher sur la même page, vous 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 lien Se connecter avec Google dans 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 des Type de données GsiButtonConfiguration:

Attribut
type Type de bouton: icône ou bouton standard.
theme Thème du bouton (par exemple, "rempli_bleu" ou "plein_noir").
size Taille du bouton. (petite ou grande, par exemple).
text Texte du bouton. Par exemple, "Se connecter avec Google". ou "Inscrivez-vous 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 elle est définie, la langue du bouton est affichée.
click_listener Si elle est définie, cette fonction est appelée lorsque la fonctionnalité Se connecter avec Google .
state Si ce champ est défini, cette chaîne est renvoyée avec le jeton d'ID.

Types d'attributs

Les sections suivantes contiennent des détails sur le type de chaque attribut et une à titre d'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 leurs descriptions:

Type
standard <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Bouton avec du texte ou des informations personnalisées.
icon <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Bouton d'icône sans texte

thème

Thème du bouton La valeur par défaut est outline. Consultez le tableau suivant pour découvrir plus d'informations:

Type Obligatoire Exemple
chaîne Facultatif theme: "filled_blue"

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

Thème
outline <ph type="x-smartling-placeholder">
</ph>
Thème de bouton standard.
filled_blue <ph type="x-smartling-placeholder">
</ph>
Thème de bouton rempli en bleu.
filled_black <ph type="x-smartling-placeholder">
</ph>
Thème de bouton avec des noirs.

taille

Taille du bouton. La valeur par défaut est large. Consultez le tableau suivant pour découvrir plus d'informations:

Type Obligatoire Exemple
chaîne Facultatif size: "small"

Le tableau suivant répertorie les tailles de bouton disponibles et leur description:

Taille
large <ph type="x-smartling-placeholder">
</ph> Un grand bouton standard Un grand bouton avec une icône Un grand bouton personnalisé
Un gros bouton.
medium <ph type="x-smartling-placeholder">
</ph> Un bouton standard moyen Un bouton avec une icône de taille moyenne <ph type="x-smartling-placeholder">
</ph> Bouton de taille moyenne
small <ph type="x-smartling-placeholder">
</ph> Un petit bouton Un petit bouton avec une icône <ph type="x-smartling-placeholder">
</ph> Un petit bouton.

texte

Texte du bouton. La valeur par défaut est signin_with. Il n'y a aucun visuel Différences au niveau du texte des boutons d'icône ayant des attributs text différents. Seule exception : lorsque 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 de boutons disponibles et leurs descriptions:

Texte
signin_with <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Le texte du bouton est "Se connecter avec Google".
signup_with <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Le texte du bouton est "S'inscrire avec Google".
continue_with <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Le texte du bouton est "Continuer avec Google".
signin <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Le texte du bouton est "Se connecter".

shape

Forme du bouton. La valeur par défaut est rectangular. Consultez le tableau suivant pour en savoir plus:

Type Obligatoire Exemple
chaîne Facultatif shape: "rectangular"

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

Forme
rectangular <ph type="x-smartling-placeholder">
</ph>
Bouton rectangulaire. Si utilisé pour icon type de bouton, il est identique à square.
pill <ph type="x-smartling-placeholder">
</ph>
Le bouton en forme de pilule. Si utilisé pour le bouton icon il est identique à circle.
circle <ph type="x-smartling-placeholder">
</ph>
Le bouton en forme de cercle. Si utilisé pour standard type de bouton, il est identique à pill.
square <ph type="x-smartling-placeholder">
</ph>
Bouton carré Si utilisé pour standard type de bouton, 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 informations:

Type Obligatoire Exemple
chaîne Facultatif logo_alignment: "center"

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

logo_alignment
left <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Aligne le logo Google à gauche.
center <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Au centre, le logo Google est aligné.

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

Si elle n'est pas définie, les paramètres régionaux par défaut du navigateur ou les paramètres régionaux de l'utilisateur de la session Google est utilisée. Par conséquent, différents utilisateurs peuvent voir des versions différentes localisés, et éventuellement avec 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 la fonctionnalité Se connecter avec Google l'utilisateur clique sur le bouton à 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 "Se connecter avec Google" a cliqué... est enregistré. à 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 le même vous pouvez attribuer à chaque bouton une chaîne unique. La même chaîne est renvoyé avec le jeton d'ID, afin que vous puissiez identifier le bouton sur lequel vous avez cliqué pour vous 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 native_callback est appelée, un objet Credential est transmis en tant que paramètre. La 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. Ce empêche une boucle morte de 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 le 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() du code natif du navigateur. l'API de gestion des identifiants. Il ne peut donc être utilisé que pour stocker un mot de passe identifiant. Consultez l'exemple de code suivant de la méthode:

google.accounts.id.storeCredential(Credential, callback)

L'exemple de code suivant implémente le 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 tiers de confiance. DOM L'opération d'annulation est ignorée si un identifiant est déjà sélectionné. Voir 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 notifié après Dans Avec Google, la bibliothèque JavaScript est chargée:

window.onGoogleLibraryLoad = () => {
    ...
};

Ce rappel n'est qu'un raccourci pour le rappel window.onload. Il n'y a aucun les différences de comportement.

L'exemple de code suivant implémente un rappel onGoogleLibraryLoad:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Méthode: google.accounts.id.revoke

La méthode google.accounts.id.revoke révoque l'autorisation OAuth utilisée pour partager le Jeton d'ID pour 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 identifiant unique du compte Google de l'utilisateur. L'ID est 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 est la valeur renvoyée par l'appel de méthode.
error Ce champ contient éventuellement 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. "false" en cas d'échec.

erreur

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