Esta página de referencia describe la API de atributos de datos HTML de Iniciar sesión con Google. Puede usar la API para mostrar el indicador One Tap o el botón Iniciar sesión con Google en sus páginas web.
Elemento con ID "g_id_onload"
Puede colocar los atributos de datos Iniciar sesión con Google en cualquier elemento visible o invisible, como <div> y <span> . El único requisito es que el ID del elemento esté establecido en g_id_onload . No ponga este ID en varios elementos.
Atributos de datos
La siguiente tabla enumera los atributos de datos con sus descripciones:
| Atributo | |
|---|---|
data-client_id | ID de cliente de su aplicación |
data-auto_prompt | Muestre Google One toque. |
data-auto_select | Habilita la selección automática en Google One Tap. |
data-login_uri | La URL de su punto final de inicio de sesión |
data-callback | El nombre de la función del controlador de token de ID de JavaScript |
data-native_login_uri | La URL del punto final del controlador de credenciales de contraseña |
data-native_callback | El nombre de la función del controlador de credenciales de contraseña de JavaScript |
data-native_id_param | El nombre del parámetro para el valor credential.id |
data-native_password_param | El nombre del parámetro para el valor credential.password |
data-cancel_on_tap_outside | Controla si se cancela la solicitud si el usuario hace clic fuera de la solicitud. |
data-prompt_parent_id | El ID de DOM del elemento contenedor de solicitud de One Tap |
data-skip_prompt_cookie | Omite un toque si la cookie especificada tiene un valor no vacío. |
data-nonce | Una cadena aleatoria para tokens de ID |
data-context | El título y las palabras en el aviso de One Tap |
data-moment_callback | El nombre de la función del oyente de notificación de estado de la interfaz de usuario. |
data-state_cookie_domain | Si necesita llamar a One Tap en el dominio principal y sus subdominios, pase el dominio principal a este atributo para que se use una sola cookie compartida. |
data-ux_mode | Flujo de experiencia de usuario del botón Iniciar sesión con Google |
data-allowed_parent_origin | Los orígenes que pueden insertar el iframe intermedio. One Tap se ejecutará en el modo iframe intermedio si se presenta este atributo. |
data-intermediate_iframe_close_callback | Anula el comportamiento de iframe intermedio predeterminado cuando los usuarios cierran manualmente One Tap. |
data-itp_support | Habilita One Tap UX actualizado en navegadores ITP. |
Tipos de atributos
Las siguientes secciones contienen detalles sobre el tipo de cada atributo y un ejemplo.
id_cliente-datos
Este atributo es el ID de cliente de su aplicación, que se encuentra y crea en Google Developers Console. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Sí | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
datos-auto_prompt
Este atributo determina si mostrar One tap o no. El valor predeterminado es true . Google One tap no se mostrará cuando este valor sea false . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| booleano | Opcional | data-auto_prompt="true" |
data-auto_select
Este atributo determina si devolver o no un token de ID automáticamente, sin ninguna interacción del usuario, si solo una sesión de Google ha aprobado su aplicación. El valor predeterminado es false . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| booleano | Opcional | data-auto_select="true" |
datos-login_uri
Este atributo es el URI de su punto final de inicio de sesión. Puede omitirse si la página actual es su página de inicio de sesión, en cuyo caso la credencial se publica en esta página de forma predeterminada.
La respuesta de la credencial del token de ID se publica en su punto final de inicio de sesión cuando no se define una función de devolución de llamada y un usuario hace clic en los botones Iniciar sesión con Google o One Tap, o se lleva a cabo el inicio de sesión automático.
Consulte la siguiente tabla para obtener más información:
| Tipo | Opcional | Ejemplo |
|---|---|---|
| URL | El valor predeterminado es el URI de la página actual o el valor que especifique. Se ignora cuando data-ux_mode="popup" y data-callback . | data-login_uri="https://www.example.com/login" |
Su punto final de inicio de sesión debe gestionar las solicitudes POST que contengan una clave de credential con un valor de token de ID en el cuerpo.
El siguiente es un ejemplo de solicitud a su punto final de inicio de sesión:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
devolución de llamada de datos
Este atributo es el nombre de la función de JavaScript que maneja el token de ID devuelto. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Obligatorio si data-login_uri no está configurado. | data-callback="handleToken" |
Se puede usar uno de los data-login_uri y data-callback . Depende de las siguientes configuraciones de componentes y modo UX:
El atributo
data-login_uries necesario para el modo UX deredirectdel botón Iniciar sesión con Google, que ignora el atributodata-callback.Uno de estos dos atributos debe configurarse para Google One Tap y el modo UX
popupdel botón de inicio de sesión de Google. Si ambos están configurados, el atributodata-callbacktiene una prioridad más alta.
Las funciones de JavaScript dentro de un espacio de nombres no son compatibles con la API de HTML. En su lugar, utilice una función de JavaScript global sin un espacio de nombres. Por ejemplo, use mylibCallback en lugar de mylib.callback .
datos-native_login_uri
Este atributo es la URL del punto final del controlador de credenciales de contraseña. Si establece el atributo data-native_login_uri o el atributo data-native_callback , la biblioteca de JavaScript recurre al administrador de credenciales nativas cuando no hay una sesión de Google. No puede configurar los data-native_callback y data-native_login_uri . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-login_uri="https://www.example.com/password_login" |
data-native_callback
Este atributo es el nombre de la función de JavaScript que maneja la credencial de contraseña devuelta por el administrador de credenciales nativo del navegador. Si establece el atributo data-native_login_uri o el atributo data-native_callback , la biblioteca de JavaScript recurre al administrador de credenciales nativas cuando no hay una sesión de Google. No está permitido configurar data-native_callback y data-native_login_uri . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-native_callback="handlePasswordCredential" |
Las funciones de JavaScript dentro de un espacio de nombres no son compatibles con la API de HTML. En su lugar, utilice una función de JavaScript global sin un espacio de nombres. Por ejemplo, use mylibCallback en lugar de mylib.callback .
data-native_id_param
Cuando envía la credencial de contraseña al extremo del controlador de credenciales de contraseña, puede especificar el nombre del parámetro para el campo credential.id . El nombre predeterminado es email . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| URL | Opcional | data-native_id_param="user_id" |
data-native_password_param
Cuando envía la credencial de contraseña al extremo del controlador de credenciales de contraseña, puede especificar el nombre del parámetro para el valor credential.password . El nombre predeterminado es password . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| URL | Opcional | data-native_password_param="pwd" |
datos-cancel_on_tap_outside
Este atributo establece si se cancela o no la solicitud de un toque si el usuario hace clic fuera de la indicación. El valor predeterminado es true . Para deshabilitarlo, establezca el valor en false . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| booleano | Opcional | data-cancel_on_tap_outside="false" |
data-prompt_parent_id
Este atributo establece el ID de DOM del elemento contenedor. Si no está configurado, el indicador One Tap se muestra en la esquina superior derecha de la ventana. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
Este atributo omite One Tap si la cookie especificada tiene un valor que no está vacío. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-skip_prompt_cookie="SID" |
data-nonce
Este atributo es una cadena aleatoria utilizada por el token de ID para evitar ataques de repetición. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-nonce="biaqbm70g23" |
La longitud de Nonce está limitada al tamaño máximo de JWT admitido por su entorno y las restricciones de tamaño HTTP del servidor y del navegador individual.
contexto de datos
Este atributo cambia el texto del título y los mensajes que se muestran en el aviso de One Tap. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-context="use" |
La siguiente tabla enumera los contextos disponibles y sus descripciones:
| Contexto | |
|---|---|
signin | "Inicia sesión con Google" |
signup | "Registrarse con Google" |
use | "Usar con Google" |
data-moment_callback
Este atributo es el nombre de la función del detector de notificaciones de estado de la interfaz de usuario. Para obtener más información, consulte el tipo de datos PromptMomentNotification . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-moment_callback="logMomentNotification" |
Las funciones de JavaScript dentro de un espacio de nombres no son compatibles con la API de HTML. En su lugar, utilice una función de JavaScript global sin un espacio de nombres. Por ejemplo, use mylibCallback en lugar de mylib.callback .
datos-estado_cookie_dominio
Si necesita mostrar One Tap en un dominio principal y sus subdominios, pase el dominio principal a este atributo para que se use una única cookie de estado compartido. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-state_cookie_domain="example.com" |
datos-ux_mode
Este atributo establece el flujo de UX utilizado por el botón Iniciar sesión con Google. El valor predeterminado es popup . Este atributo no tiene impacto en One Tap UX. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-ux_mode="redirect" |
La siguiente tabla enumera los modos UX disponibles y sus descripciones.
| Modo UX | |
|---|---|
popup | Realiza el flujo de UX de inicio de sesión en una ventana emergente. |
redirect | Realiza el flujo de UX de inicio de sesión mediante una redirección de página completa. |
data-allowed_parent_origin
Los orígenes que pueden insertar el iframe intermedio. One Tap se ejecutará en el modo iframe intermedio si se presenta este atributo. Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cadena o matriz de cadenas | Opcional | data-allowed_parent_origin="https://example.com" |
La siguiente tabla enumera los tipos de valores admitidos y sus descripciones.
| Tipos de valores | ||
|---|---|---|
string | URI de un único dominio. | "https://ejemplo.com" |
string array | Una lista de URI de dominio separados por comas. | "https://noticias.ejemplo.com,https://local.ejemplo.com" |
Si el valor del atributo data-allowed_parent_origin no es válido, la inicialización One Tap del modo iframe intermedio fallaría y se detendría.
También se admiten los prefijos comodín. Por ejemplo, "https://*.example.com" coincidirá con example.com y sus subdominios en todos los niveles (p. ej., news.example.com , login.news.example.com ). Cosas a tener en cuenta al usar comodines:
- Las cadenas de patrones no pueden estar compuestas solo por un comodín y un dominio de nivel superior. Por ejemplo
https://*.comyhttps://*.co.ukno son válidos; Como se indicó anteriormente,"https://*.example.com"coincidirá conexample.comy sus subdominios. También puede usar una lista separada por comas para representar 2 dominios diferentes. Por ejemplo,"https://example1.com,https://*.example2.com"coincidirá con los dominiosexample1.com,example2.comy subdominios deexample2.com - Los dominios comodín deben comenzar con un esquema https:// seguro.
"*.example.com"se considerará no válido.
data-intermediate_iframe_close_callback
Anula el comportamiento de iframe intermedio predeterminado cuando los usuarios cierran manualmente One Tap tocando el botón 'X' en la interfaz de usuario de One Tap. El comportamiento predeterminado es eliminar el iframe intermedio del DOM inmediatamente.
El campo data-intermediate_iframe_close_callback surte efecto solo en el modo iframe intermedio. Y tiene impacto solo en el iframe intermedio, en lugar del iframe One Tap. La interfaz de usuario de One Tap se elimina antes de que se invoque la devolución de llamada.
| Tipo | Requerido | Ejemplo |
|---|---|---|
| función | Opcional | data-intermediate_iframe_close_callback="logBeforeClose" |
Las funciones de JavaScript dentro de un espacio de nombres no son compatibles con la API de HTML. En su lugar, utilice una función de JavaScript global sin un espacio de nombres. Por ejemplo, use mylibCallback en lugar de mylib.callback .
data-itp_support
Este campo determina si One Tap UX actualizado debe habilitarse en los navegadores que admiten la prevención de seguimiento inteligente (ITP). El valor predeterminado es false . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| booleano | Opcional | data-itp_support="true" |
Elemento con clase "g_id_signin"
Si agrega g_id_signin al atributo de class de un elemento, el elemento se representa como un botón Iniciar sesión con Google.
Puede mostrar varios botones Iniciar sesión con Google en la misma página. Cada botón puede tener su propia configuración visual. Los ajustes están definidos por los siguientes atributos de datos.
Atributos de datos visuales
La siguiente tabla enumera los atributos de datos visuales y sus descripciones:
| Atributo | |
|---|---|
data-type | El tipo de botón: icono o botón estándar. |
data-theme | El tema del botón. Por ejemplo, relleno_azul o relleno_negro. |
data-size | El tamaño del botón. Por ejemplo, pequeño o grande. |
data-text | El texto del botón. Por ejemplo, "Iniciar sesión con Google" o "Registrarse con Google". |
data-shape | La forma del botón. Por ejemplo, rectangular o circular. |
data-logo_alignment | La alineación del logotipo de Google: izquierda o centro. |
data-width | El ancho del botón, en píxeles. |
data-locale | El texto del botón se representa en el idioma establecido en este atributo. |
Tipos de atributos
Las siguientes secciones contienen detalles sobre el tipo de cada atributo y un ejemplo.
tipo de datos
El tipo de botón. El valor predeterminado es standard . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Sí | data-type="icon" |
La siguiente tabla enumera los tipos de botones disponibles y sus descripciones:
| Tipo | |
|---|---|
standard | Un botón con texto o información personalizada:   |
icon | Un botón de icono sin texto:  |
tema de datos
El tema del botón. El valor predeterminado es outline . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-theme="filled_blue" |
La siguiente tabla enumera los temas disponibles y sus descripciones:
| Temática | |
|---|---|
outline | El tema del botón estándar: |
filled_blue | El tema del botón lleno de azul:    |
filled_black | El tema del botón relleno de negro:    |
tamaño de datos
El tamaño del botón. El valor predeterminado es large . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-size="small" |
La siguiente tabla enumera los tamaños de botón disponibles y sus descripciones.
| Tamaño | |
|---|---|
large | Un botón grande: |
medium | Un botón de tamaño mediano:   |
small | Un pequeño botón:   |
texto de datos
El texto del botón. El valor predeterminado es signin_with . No hay diferencias visuales para el texto de los botones de iconos que tienen diferentes atributos data-text . La única excepción es cuando se lee el texto para acceder a la pantalla.
Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-text="signup_with" |
La siguiente tabla enumera los textos de los botones disponibles y sus descripciones:
| Texto | |
|---|---|
signin_with | El texto del botón es "Iniciar sesión con Google": |
signup_with | El texto del botón es "Registrarse con Google":  |
continue_with | El texto del botón es "Continuar con Google":  |
signin | El texto del botón es "Iniciar sesión":  |
forma de datos
La forma del botón. El valor predeterminado es rectangular . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-shape="rectangular" |
La siguiente tabla enumera las formas de botón disponibles y sus descripciones:
| Forma | |
|---|---|
rectangular | El botón de forma rectangular. Si se usa para el tipo de botón de icon , es lo mismo que square . |
pill | El botón en forma de pastilla. Si se usa para el tipo de botón de icon , entonces es lo mismo que circle .    |
circle | El botón en forma de círculo. Si se usa para el tipo de botón standard , entonces es lo mismo que la pill . |
square | El botón de forma cuadrada. Si se usa para el tipo de botón standard , entonces es lo mismo que rectangular . |
data-logo_alignment
La alineación del logotipo de Google. Se left el valor por defecto. Este atributo solo se aplica al tipo de botón standard . Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-logo_alignment="center" |
La siguiente tabla enumera las alineaciones disponibles y sus descripciones:
| logo_alineación | |
|---|---|
left | Alinea a la izquierda el logotipo de Google:  |
center | Alinea al centro el logotipo de Google:  |
ancho de datos
El ancho mínimo del botón, en píxeles. El ancho máximo disponible es de 400 píxeles.
Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-width=400 |
configuración regional de datos
La configuración regional preestablecida del texto del botón. Si no está configurado, se usa la configuración regional predeterminada del navegador o la preferencia del usuario de la sesión de Google. Por lo tanto, diferentes usuarios pueden ver diferentes versiones de botones localizados y posiblemente con diferentes tamaños.
Consulte la siguiente tabla para obtener más información:
| Tipo | Requerido | Ejemplo |
|---|---|---|
| cuerda | Opcional | data-locale="zh_CN" |
Integración del lado del servidor
Sus puntos finales del lado del servidor deben manejar las siguientes solicitudes HTTP POST .
El punto final del controlador de tokens de ID
El punto final del controlador de tokens de ID procesa el token de ID. Según el estado de la cuenta correspondiente, puede iniciar la sesión del usuario y dirigirlo a una página de registro o dirigirlo a una página de vinculación de cuentas para obtener información adicional.
La solicitud HTTP POST contiene la siguiente información:
| Formato | Nombre | Descripción |
|---|---|---|
| Galleta | g_csrf_token | Una cadena aleatoria que cambia con cada solicitud al punto final del controlador. |
| Parámetro de solicitud | g_csrf_token | Una cadena que es igual al valor de la cookie anterior, g_csrf_token |
| Parámetro de solicitud | credential | El token de ID que emite Google. |
| Parámetro de solicitud | select_by | Cómo se selecciona la credencial. |
Cuando se decodifica , el token de ID se parece al siguiente ejemplo:
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"
}
La siguiente tabla enumera los valores posibles para el campo select_by . El tipo de botón utilizado junto con la sesión y el estado de consentimiento se utilizan para establecer el valor,
El usuario presionó el botón One Tap o Iniciar sesión con Google o utilizó el proceso de inicio de sesión automático sin contacto.
Se encontró una sesión existente o el usuario seleccionó e inició sesión en una cuenta de Google para establecer una nueva sesión.
Antes de compartir las credenciales del token de identificación con su aplicación, el usuario
- presionó el botón Confirmar para otorgar su consentimiento para compartir credenciales, o
- había otorgado previamente su consentimiento y utilizó Seleccionar una cuenta para elegir una cuenta de Google.
El valor de este campo se establece en uno de estos tipos,
| Valor | Descripción |
|---|---|
auto | Inicio de sesión automático de un usuario con una sesión existente que previamente había otorgado su consentimiento para compartir credenciales. |
user | Un usuario con una sesión existente que había otorgado previamente su consentimiento presionó el botón "Continuar como" de One Tap para compartir las credenciales. |
user_1tap | Un usuario con una sesión existente presionó el botón 'Continuar como' de One Tap para otorgar el consentimiento y compartir las credenciales. Se aplica solo a Chrome v75 y superior. |
user_2tap | Un usuario sin una sesión existente presionó el botón 'Continuar como' de One Tap para seleccionar una cuenta y luego presionó el botón Confirmar en una ventana emergente para otorgar el consentimiento y compartir las credenciales. Se aplica a navegadores no basados en Chromium. |
btn | Un usuario con una sesión existente que previamente otorgó su consentimiento presionó el botón Iniciar sesión con Google y seleccionó una cuenta de Google en 'Elegir una cuenta' para compartir credenciales. |
btn_confirm | Un usuario con una sesión existente presionó el botón Iniciar sesión con Google y presionó el botón Confirmar para otorgar el consentimiento y compartir las credenciales. |
btn_add_session | Un usuario sin una sesión existente que previamente otorgó su consentimiento presionó el botón Iniciar sesión con Google para seleccionar una cuenta de Google y compartir credenciales. |
btn_confirm_add_session | Un usuario sin una sesión existente primero presionó el botón Iniciar sesión con Google para seleccionar una cuenta de Google y luego presionó el botón Confirmar para dar su consentimiento y compartir las credenciales. |
Extremo del controlador de credenciales de contraseña
El extremo del controlador de credenciales de contraseña procesa las credenciales de contraseña que recupera el administrador de credenciales nativo.
La solicitud HTTP POST contiene la siguiente información:
| Formato | Nombre | Descripción |
|---|---|---|
| Galleta | g_csrf_token | Una cadena aleatoria que cambia con cada solicitud al punto final del controlador. |
| Parámetro de solicitud | g_csrf_token | Una cadena que es igual al valor de la cookie anterior, g_csrf_token . |
| Parámetro de solicitud | email | Este token de ID que emite Google. |
| Parámetro de solicitud | password | Cómo se selecciona la credencial. |