Advertencia: Estos datos se proporcionan bajo la Política de datos de usuario de Google . Por favor revise y cumpla con la política. De lo contrario, podría resultar en la suspensión del proyecto o de la cuenta.

Iniciar sesión con la referencia de la API HTML de Google

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 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_uri es necesario para el modo UX de redirect del botón Iniciar sesión con Google, que ignora el atributo data-callback .

  • Uno de estos dos atributos debe configurarse para Google One Tap y el modo UX popup del botón de inicio de sesión de Google. Si ambos están configurados, el atributo data-callback tiene 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"

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 .

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://*.com y https://*.co.uk no son válidos; Como se indicó anteriormente, "https://*.example.com" coincidirá con example.com y 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 dominios example1.com , example2.com y subdominios de example2.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 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:
Un botón estándar con un fondo blanco.Un botón de icono con un fondo blanco.Un botón personalizado con fondo blanco
filled_blue El tema del botón lleno de azul:
Un botón estándar con un fondo azul.Un botón de icono con un fondo azul.Un botón personalizado con fondo azul.
filled_black El tema del botón relleno de negro:
Un botón estándar con un fondo negroUn botón de icono con un fondo negroUn botón personalizado con fondo 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:
Un botón estándar grandeUn botón de icono grandeUn botón grande y personalizado.
medium Un botón de tamaño mediano:
Un botón estándar medioUn botón de icono mediano
small Un pequeño botón:
un pequeño botónUn pequeño botón de icono

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":
Un botón estándar con la etiqueta "Iniciar sesión con Google"Un botón de icono sin texto visible
signup_with El texto del botón es "Registrarse con Google":
Un botón estándar con la etiqueta "Registrarse en Google"Un botón de icono sin texto visible
continue_with El texto del botón es "Continuar con Google":
Un botón estándar con la etiqueta "Continuar con Google".Un botón de icono sin texto visible
signin El texto del botón es "Iniciar sesión":
Un botón estándar con la etiqueta "Iniciar sesión"Un botón de icono sin texto visible

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 .
Un botón estándar rectangularUn botón de icono rectangularUn botón rectangular personalizado
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 .
Un botón estándar en forma de pastillaUn botón de icono en forma de píldoraUn botón personalizado en forma de pastilla
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 .
Un botón estándar circularUn botón de icono circularUn botón personalizado circular
square El botón de forma cuadrada. Si se usa para el tipo de botón standard , entonces es lo mismo que rectangular .
Un botón estándar cuadradoUn botón de icono cuadradoUn botón cuadrado personalizado

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:
Un botón estándar con el logo G a la izquierda
center Alinea al centro el logotipo de Google:
Un botón estándar con el logo G en el centro

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.