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 | sí | 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_urise requiere para el atributo inicia sesión con botón de Googleredirectmodo UX, que ignora ladata-callbackatributo.Uno de estos dos atributos se debe establecer para Google un grifo y el botón de acceso de Google
popupmodo de UX. Si ambos están establecidos, ladata-callbackatributo 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" |
data-skip_prompt_cookie
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 .
data-state_cookie_domain
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://*.comyhttps://*.co.ukno son válidos; Como se señaló anteriormente,"https://*.example.com"coincidirá conexample.comy 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 dominiosexample1.com,example2.comy subdominios deexample2.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 | sí | 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: |
filled_blue | El tema del botón relleno de azul:    |
filled_black | El tema del botón relleno de 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: |
medium | Un botón de tamaño mediano:   |
small | Un pequeño botón:   |
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": |
signup_with | El texto del botón es "Registrarse con Google":  |
continue_with | El texto del botón es "Continuar con Google":  |
signup_with | El texto del botón es "Iniciar sesión":  |
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 . |
pill | El botón con forma de pastilla. Si se utiliza para el icon tipo botón, entonces es el mismo que el circle .    |
circle | El botón en forma de círculo. Si se utiliza para el standard tipo botón, entonces es lo mismo que pill . |
square | El botón de forma cuadrada. Si se utiliza para el standard tipo botón, entonces es el mismo que el rectangular . |
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:  |
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:
| 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, |
| 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. |