Advertencia: estos datos se proporcionan en virtud de la Política de datos de usuario de Google . Revise y cumpla con la política. De no hacerlo, 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 utilizar la API para mostrar el mensaje One Tap o el botón Iniciar sesión con Google en sus páginas web.

Elemento con ID "g_id_onload"

Se puede poner Iniciar sesión atributos de datos con Google en los elementos visibles o invisibles, como <div> y <span> . El único requisito es que el ID de elemento se establece en g_id_onload . No coloque esta identificación 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 Muestra Google One tap.
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 de su 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 de parámetro para el credential.id valor
data-native_password_param El nombre de parámetro para el credential.password valor
data-cancel_on_tap_outside Controla si se cancela el mensaje si el usuario hace clic fuera del mensaje.
data-prompt_parent_id El DOM ID del elemento contenedor de avisos de One Tap
data-skip_prompt_cookie Omite One Tap si la cookie especificada tiene un valor no vacío.
data-nonce Una cadena aleatoria para tokens de identificación
data-context El título y las palabras en el mensaje de One Tap
data-moment_callback El nombre de la función del oyente de notificaciones 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 utilice una única cookie compartida.
data-ux_mode El flujo de UX del botón Iniciar sesión con Google
data-allowed_parent_origin Los orígenes que pueden incrustar 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.

Tipos de atributos

Las siguientes secciones contienen detalles sobre el tipo de cada atributo y un ejemplo.

data-client_id

Este atributo es el ID de cliente de su aplicación, que se encuentra y se crea en Google Developers Console. Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
cuerda data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

Este atributo determina si se muestra Un toque o no. El valor por defecto es true . Google Un toque no se mostrará cuando este valor es false . Consulte la siguiente tabla para obtener más información:

Escribe 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 por defecto es false . Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
booleano Opcional data-auto_select="true"

data-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 ninguna 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 produce el inicio de sesión automático.

Consulte la siguiente tabla para obtener más información:

Escribe 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 se establece.
data-login_uri="https://www.example.com/login"

Su punto final de inicio de sesión debe manejar peticiones POST que contienen una credential clave con un valor del testigo de identificación en el cuerpo.

La siguiente es una solicitud de ejemplo 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:

Escribe Requerido Ejemplo
cuerda Se requiere si data-login_uri no está establecido. data-callback="handleToken"

Uno de los data-login_uri y data-callback atributos podrían utilizarse. Depende de las siguientes configuraciones de componente y modo UX:

  • La data-login_uri se requiere para el atributo inicia sesión con botón de Google redirect modo UX, que ignora la data-callback atributo.

  • Uno de estos dos atributos se debe establecer para Google un grifo y el botón de acceso de Google popup modo de UX. Si ambos están establecidos, la data-callback atributo tiene una prioridad más alta.

Las funciones de JavaScript dentro de un espacio de nombres no son compatibles con la API HTML. En su lugar, utilice una función de JavaScript global sin un espacio de nombres. Por ejemplo, utilice mylibCallback en lugar de mylib.callback .

data-native_login_uri

Este atributo es la URL del punto final de su controlador de credenciales de contraseña. Si establece la data-native_login_uri atributo o la data-native_callback atributo, la biblioteca JavaScript cae de nuevo al administrador de credenciales nativa cuando no hay una sesión de Google. Usted no está autorizado para establecer tanto la data-native_callback y data-native_login_uri atributos. Consulte la siguiente tabla para obtener más información:

Escribe 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 la data-native_login_uri atributo o la data-native_callback atributo, la biblioteca JavaScript cae de nuevo al administrador de credenciales nativa cuando no hay una sesión de Google. Usted no está autorizado a establecer tanto data-native_callback y data-native_login_uri . Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
cuerda Opcional data-native_callback="handlePasswordCredential"

Las funciones de JavaScript dentro de un espacio de nombres no son compatibles con la API HTML. En su lugar, utilice una función de JavaScript global sin un espacio de nombres. Por ejemplo, utilice mylibCallback en lugar de mylib.callback .

data-native_id_param

Cuando se envía la credencial contraseña a la contraseña de punto final manejador de credenciales, puede especificar el nombre del parámetro para el credential.id campo. El nombre por defecto es email . Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
URL Opcional data-native_id_param="user_id"

data-native_password_param

Cuando se envía la credencial contraseña a la contraseña de punto final manejador de credenciales, puede especificar el nombre del parámetro para el credential.password valor. El nombre predeterminado es password . Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
URL Opcional data-native_password_param="pwd"

data-cancel_on_tap_outside

Este atributo establece si se cancela o no la solicitud de One Tap si el usuario hace clic fuera del mensaje. El valor por defecto es true . Para desactivarlo, establezca el valor en false . Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
booleano Opcional data-cancel_on_tap_outside="false"

data-prompt_parent_id

Este atributo establece el ID DOM del elemento contenedor. Si no está configurado, el mensaje One Tap se muestra en la esquina superior derecha de la ventana. Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
cuerda Opcional data-prompt_parent_id="parent_id"

Este atributo omite One Tap si la cookie especificada tiene un valor no vacío. Consulte la siguiente tabla para obtener más información:

Escribe 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:

Escribe 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 mensaje de One Tap. Consulte la siguiente tabla para obtener más información:

Escribe 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 "Regístrese con Google"
use "Usar con Google"

data-moment_callback

Este atributo es el nombre de la función del oyente de notificación 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:

Escribe Requerido Ejemplo
cuerda Opcional data-moment_callback="logMomentNotification"

Las funciones de JavaScript dentro de un espacio de nombres no son compatibles con la API HTML. En su lugar, utilice una función de JavaScript global sin un espacio de nombres. Por ejemplo, utilice 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 utilice una única cookie de estado compartido. Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
cuerda Opcional data-state_cookie_domain="example.com"

data-ux_mode

Este atributo establece el flujo de UX utilizado por el botón Iniciar sesión con Google. El valor por defecto es popup . Este atributo no tiene ningún impacto en One Tap UX. Consulte la siguiente tabla para obtener más información:

Escribe 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 incrustar 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:

Escribe 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 valor
string Un único URI de dominio. "https://example.com"
string array Una lista de URI de dominio separados por comas. "https: //news.example.com,https: //local.example.com"

Si el valor de data-allowed_parent_origin atributo no es válido, la inicialización de un grifo del modo de marco flotante intermedia fallaría y parada.

También se admiten prefijos comodín. Por ejemplo, "https://*.example.com" coincidirá example.com y sus subdominios en todos los niveles (por ejemplo news.example.com , login.news.example.com ). Cosas a tener en cuenta al usar comodines:

  • Las cadenas de patrones no pueden estar compuestas únicamente por un comodín y un dominio de nivel superior. Por ejemplo https://*.com y https://*.co.uk no son válidos; Como se señaló anteriormente, "https://*.example.com" coincidirá con example.com y sus subdominios. También puede utilizar una lista separada por comas para representar 2 dominios diferentes. Por ejemplo, "https://example1.com,https://*.example2.com" coincidirán 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" será considerado válido.

data-interval_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.

La data-intermediate_iframe_close_callback campo sólo tiene efecto en el modo iframe intermedio. Y tiene impacto solo en el iframe intermedio, en lugar del iframe de One Tap. La IU de One Tap se elimina antes de que se invoque la devolución de llamada.

Escribe 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 HTML. En su lugar, utilice una función de JavaScript global sin un espacio de nombres. Por ejemplo, utilice mylibCallback en lugar de mylib.callback .

Elemento con clase "g_id_signin"

Si se agrega g_id_signin a un elemento de class de atributo, el elemento se renderiza como un botón Iniciar sesión con Google.

Puede representar varios botones Iniciar sesión con Google en la misma página. Cada botón puede tener su propia configuración visual. La configuración se define mediante 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, lleno_azul o lleno_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 por defecto es standard . Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
cuerda data-type="icon"

La siguiente tabla enumera los tipos de botones disponibles y sus descripciones:

Escribe
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 por defecto es outline . Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
cuerda Opcional data-theme="filled_blue"

La siguiente tabla enumera los temas disponibles y sus descripciones:

Tema
outline El tema de botón estándar:
Un botón estándar con 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 relleno de azul:
Un botón estándar con 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 fondo negroUn botón de icono con fondo negroUn botón personalizado con fondo negro

tamaño de datos

El tamaño del botón. El valor por defecto es large . Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
cuerda Opcional data-size="small"

La siguiente tabla enumera los tamaños de botones 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-datos

El texto del botón. El valor por defecto es signin_with . No hay diferencias visuales para el texto de iconos que tienen diferentes data-text atributos. La única excepción es cuando el texto se lee para acceder a la pantalla.

Consulte la siguiente tabla para obtener más información:

Escribe 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 con 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
signup_with 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 por defecto es rectangular . Consulte la siguiente tabla para obtener más información:

Escribe 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 utiliza para el icon tipo botón, que es el mismo que el square .
Un botón estándar rectangularUn botón de icono rectangularUn botón rectangular personalizado
pill El botón con forma de pastilla. Si se utiliza para el icon tipo botón, entonces es el mismo que el circle .
Un botón estándar en forma de pastillaUn botón de icono en forma de pastillaUn botón personalizado en forma de pastilla
circle El botón en forma de círculo. Si se utiliza para el standard tipo botón, entonces es lo mismo que pill .
Un botón circular estándarUn botón de icono circularUn botón circular personalizado
square El botón de forma cuadrada. Si se utiliza para el standard tipo botón, entonces es el mismo que el rectangular .
Un botón cuadrado estándarUn botón de icono cuadradoUn botón cuadrado personalizado

data-logo_alignment

La alineación del logotipo de Google. El valor por defecto se left . Este atributo sólo se aplica a la standard de tipo botón. Consulte la siguiente tabla para obtener más información:

Escribe Requerido Ejemplo
cuerda Opcional data-logo_alignment="center"

La siguiente tabla enumera las alineaciones disponibles y sus descripciones:

logo_alignment
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 logotipo de 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:

Escribe 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 utiliza 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:

Escribe Requerido Ejemplo
cuerda Opcional data-locale="zh_CN"

Integración del lado del servidor

Sus puntos extremos del lado del servidor deben manejar los siguientes HTTP POST solicitudes.

El extremo del controlador de token de ID

El extremo del controlador de token de ID procesa el token de ID. Según el estado de la cuenta correspondiente, puede iniciar sesión como usuario y dirigirlo a una página de registro o dirigirlo a una página de vinculación de cuenta para obtener información adicional.

El HTTP POST solicitud contiene la siguiente información:

Formato Nombre Descripción
Galleta g_csrf_token Una cadena aleatoria que cambia con cada solicitud al extremo del controlador.
Parámetro de solicitud g_csrf_token Una cadena que es el mismo que el valor de la cookie anterior, g_csrf_token .
Parámetro de solicitud credential El token de identificación que emite Google.
Parámetro de solicitud select_by Cómo se selecciona la credencial.

Cuando decodificado , el ID de miradas simbólicas como el 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 muestra los posibles valores para el select_by campo. 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 Sign In With 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 ID con su aplicación, el usuario

    • presionó el botón Confirmar para otorgar su consentimiento para compartir credenciales, o
    • previamente había otorgado su consentimiento y había utilizado 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 consentimiento y compartir 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 consentimiento y compartir 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 las 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 consentimiento y compartir 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 las 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.

Punto final 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 nativas.

El HTTP POST solicitud contiene la siguiente información:

Formato Nombre Descripción
Galleta g_csrf_token Una cadena aleatoria que cambia con cada solicitud al extremo del controlador.
Parámetro de solicitud g_csrf_token Una cadena que es el mismo que el valor de la cookie anterior, g_csrf_token .
Parámetro de solicitud email Este token de identificación que emite Google.
Parámetro de solicitud password Cómo se selecciona la credencial.