En esta página de referencia, se describe la API de Sign-In JavaScript. Puedes usar esta API para mostrar el mensaje de Un toque o el botón Acceder con Google en tus páginas web.
Método: google.accounts.id.initialize
El método google.accounts.id.initialize
inicializa el cliente de Acceder con Google según el objeto de configuración. Consulta el siguiente ejemplo de código del método:
google.accounts.id.initialize(IdConfiguration)
En el siguiente ejemplo de código, se implementa el método google.accounts.id.initialize
con una función onload
:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
El método google.accounts.id.initialize
crea una instancia del cliente de Acceder con Google que todos los módulos de la misma página web pueden usar de forma implícita.
- Solo debes llamar al método
google.accounts.id.initialize
una vez, incluso si usas varios módulos (como One Tap, el botón personalizado, la revocación, etcétera) en la misma página web. - Si llamas al método
google.accounts.id.initialize
varias veces, solo se recordarán y usarán las configuraciones de la última llamada.
En realidad, restableces los parámetros de configuración cada vez que llamas al método google.accounts.id.initialize
, y todos los métodos posteriores en la misma página web usan inmediatamente los nuevos parámetros de configuración.
Tipo de datos: IdConfiguration
En la siguiente tabla, se enumeran los campos y las descripciones del tipo de datos IdConfiguration
:
Campo | |
---|---|
client_id |
El ID de cliente de tu aplicación |
auto_select |
Habilita la selección automática. |
callback |
Es la función de JavaScript que controla los tokens de ID. El modo de UX popup del botón de One Tap de Google y Acceder con Google usa este atributo. |
login_uri |
Es la URL de tu extremo de acceso. El botón de acceso con Google en el modo de UX redirect usa este atributo. |
native_callback |
Es la función de JavaScript que controla las credenciales de contraseña. |
cancel_on_tap_outside |
Cancela el mensaje si el usuario hace clic fuera de él. |
prompt_parent_id |
ID del DOM del elemento contenedor del mensaje de One Tap |
nonce |
Cadena aleatoria para tokens de ID |
context |
El título y las palabras de la instrucción de One Tap |
state_cookie_domain |
Si necesitas llamar a One Tap en el dominio principal y sus subdominios, pasa el dominio principal a este campo para que se use una sola cookie compartida. |
ux_mode |
Flujo de UX del botón de Acceder con Google |
allowed_parent_origin |
Son los orígenes que pueden incorporar el iframe intermedio. One Tap se ejecuta en el modo de iframe intermedio si este campo está presente. |
intermediate_iframe_close_callback |
Anula el comportamiento predeterminado del iframe intermedio cuando los usuarios cierran manualmente One Tap. |
itp_support |
Habilita la UX mejorada de One Tap en los navegadores de ITP. |
login_hint |
Proporciona una sugerencia del usuario para omitir la selección de la cuenta. |
hd |
Limita la selección de cuentas por dominio. |
use_fedcm_for_prompt |
Permite que el navegador controle las indicaciones de acceso del usuario y medie el flujo de acceso entre tu sitio web y Google. |
use_fedcm_for_button |
Este campo determina si se debe usar la UX del botón de FedCM en Chrome (M125 y versiones posteriores para computadoras y M128 y versiones posteriores para Android). El valor predeterminado es false . |
button_auto_select |
Indica si se debe habilitar la opción de selección automática para el flujo del botón de FedCM. Si está habilitado, los usuarios recurrentes con una sesión de Google activa accederán automáticamente, sin que se muestre el mensaje del selector de cuentas.El valor predeterminado es false . |
client_id
Este campo es el ID de cliente de tu aplicación, que se encuentra y se crea en la consola de Google Cloud. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Sí | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
Este campo determina si se devuelve automáticamente un token de ID sin ninguna interacción del usuario cuando solo hay una sesión de Google que aprobó tu app anteriormente. El valor predeterminado es false
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
booleano | Opcional | auto_select: true |
callback
Este campo es la función de JavaScript que controla el token de ID que se muestra en el mensaje de One Tap o en la ventana emergente. Este atributo es obligatorio si se usa el modo de UX popup
de One Tap de Google o del botón Acceder con Google. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
función | Se requiere para la función One Tap y el modo de UX popup . |
callback: handleResponse |
login_uri
Este atributo es el URI de tu extremo de acceso.
El valor debe coincidir exactamente con uno de los URIs de redireccionamiento autorizados para el cliente de OAuth 2.0, que configuraste en la consola de Google Cloud y debe cumplir con nuestras reglas de validación de URIs de redireccionamiento.
Este atributo se puede omitir si la página actual es la página de acceso, en cuyo caso la credencial se publica en esta página de forma predeterminada.
La respuesta de credencial del token de ID se publica en tu extremo de acceso cuando un usuario hace clic en el botón Acceder con Google y se usa el modo de UX de redireccionamiento.
Consulta 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 especifiques. Solo se usa cuando se establece ux_mode: "redirect" . |
login_uri: "https://www.example.com/login" |
Tu endpoint de acceso debe controlar las solicitudes POST que contengan un parámetro credential
con un valor de token de ID en el cuerpo.
native_callback
Este campo es el nombre de la función de JavaScript que controla la credencial de contraseña que devuelve el administrador de credenciales integrado del navegador. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
función | Opcional | native_callback: handleResponse |
cancel_on_tap_outside
Este campo establece si se cancela o no la solicitud de Un toque si un usuario hace clic fuera del mensaje. El valor predeterminado es true
. Puedes inhabilitarlo si estableces el valor en false
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
booleano | Opcional | cancel_on_tap_outside: false |
prompt_parent_id
Este atributo establece el ID del DOM del elemento contenedor. Si no se configura, el mensaje de One Tap se muestra en la esquina superior derecha de la ventana. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | prompt_parent_id: 'parent_id' |
nonce
Este campo es una cadena aleatoria que usa el token de ID para evitar ataques de repetición. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | nonce: "biaqbm70g23" |
La longitud del nonce está limitada al tamaño máximo de JWT que admite tu entorno y a las restricciones de tamaño HTTP del navegador y el servidor individuales.
context
Este campo cambia el texto del título y los mensajes que se muestran en el mensaje de One Tap. No tiene efecto en los navegadores de ITP. La configuración predeterminada es signin
.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | context: "use" |
En la siguiente tabla, se enumeran todos los contextos disponibles y sus descripciones:
Contexto | |
---|---|
signin |
"Accede a" |
signup |
"Regístrate en" |
use |
"Uso" |
state_cookie_domain
Si necesitas mostrar One Tap en el dominio principal y sus subdominios, pasa el dominio principal a este campo para que se use una sola cookie de estado compartido. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | state_cookie_domain: "example.com" |
ux_mode
Usa este campo para establecer el flujo de UX que usa el botón de Acceder con Google. El valor predeterminado es popup
. Este atributo no tiene ningún impacto en la UX de One Tap. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | ux_mode: "redirect" |
En la siguiente tabla, se enumeran los modos de UX disponibles y sus descripciones.
Modo de UX | |
---|---|
popup |
Realiza el flujo de UX de acceso en una ventana emergente. |
redirect |
Realiza el flujo de UX de acceso a través de un redireccionamiento de página completa. |
allowed_parent_origin
Son los orígenes que pueden incorporar el iframe intermedio. One Tap se ejecuta en el modo de iframe intermedio si este campo está presente. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena o array de cadenas | Opcional | allowed_parent_origin: "https://example.com" |
En la siguiente tabla, se enumeran los tipos de valores admitidos y sus descripciones.
Tipos de valores | ||
---|---|---|
string |
Es el URI de un solo dominio. | "https://example.com" |
string array |
Es un array de URIs de dominio. | ["https://news.example.com", "https://local.example.com"] |
También se admiten los prefijos con comodines. Por ejemplo, "https://*.example.com"
coincide con example.com
y sus subdominios en todos los niveles (p. ej., news.example.com
, login.news.example.com
). Ten en cuenta lo siguiente cuando uses comodines:
- Las cadenas de patrones no pueden estar compuestas solo por un comodín y un dominio de nivel superior. Por ejemplo,
https://.com
yhttps://
.co.uk
no son válidos, ya que"https://.example.com"
coincide conexample.com
y todos sus subdominios. Usa una lista separada por comas para representar dos dominios diferentes. Por ejemplo,"https://example1.com,https://
.example2.com"
coincide con los dominiosexample1.com
yexample2.com
, y con los subdominios deexample2.com
. - Los dominios comodín deben comenzar con un esquema https:// seguro, por lo que
"*.example.com"
se considera no válido.
Si el valor del campo allowed_parent_origin
no es válido, fallará y se detendrá la inicialización con un solo toque del modo de iframe intermedio.
intermediate_iframe_close_callback
Anula el comportamiento predeterminado del iframe intermedio cuando los usuarios cierran manualmente One Tap presionando el botón "X" en la IU de One Tap. El comportamiento predeterminado es quitar el iframe intermedio del DOM de inmediato.
El campo intermediate_iframe_close_callback
solo tiene efecto en el modo de iframe intermedio. Además, solo afecta al iframe intermedio, no al iframe de One Tap. Se quita la IU de One Tap antes de que se invoque la devolución de llamada.
Tipo | Obligatorio | Ejemplo |
---|---|---|
función | Opcional | intermediate_iframe_close_callback: logBeforeClose |
itp_support
Este campo determina si se debe habilitar la
UX mejorada de One Tap en los navegadores que admiten la Prevención de seguimiento inteligente (ITP). El valor predeterminado es false
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
booleano | Opcional | itp_support: true |
login_hint
Si tu aplicación sabe de antemano qué usuario debe acceder, puede proporcionar una sugerencia de acceso a Google. Si la operación se realiza correctamente, se omite la selección de la cuenta. Los valores aceptados son una dirección de correo electrónico o un valor del campo sub del token de ID.
Para obtener más información, consulta el campo login_hint en la documentación de OpenID Connect.
Tipo | Obligatorio | Ejemplo |
---|---|---|
Cadena, una dirección de correo electrónico o el valor de un campo sub de un token de ID. |
Opcional | login_hint: 'elisa.beckett@gmail.com' |
hd
Cuando un usuario tiene varias cuentas y solo debe acceder con su cuenta de Workspace, usa este parámetro para proporcionar una sugerencia de nombre de dominio a Google. Cuando la operación se realiza correctamente, las cuentas de usuario que se muestran durante la selección de cuentas se limitan al dominio proporcionado.
Un valor comodín: *
solo ofrece cuentas de Workspace al usuario y excluye las cuentas de consumidor (usuario@gmail.com) durante la selección de la cuenta.
Para obtener más información, consulta el campo hd en la documentación de OpenID Connect.
Tipo | Obligatorio | Ejemplo |
---|---|---|
String. Es un nombre de dominio completamente calificado o *. | Opcional | hd: '*' |
use_fedcm_for_prompt
Permite que el navegador controle las indicaciones de acceso del usuario y medie el flujo de acceso entre tu sitio web y Google. La configuración predeterminada es "false". Consulta la página Migra a FedCM para obtener más información.
Tipo | Obligatorio | Ejemplo |
---|---|---|
booleano | Opcional | use_fedcm_for_prompt: true |
use_fedcm_for_button
Este campo determina si se debe usar la UX del botón de FedCM en Chrome (M125 y versiones posteriores para computadoras y M128 y versiones posteriores para Android). El valor predeterminado es false
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
booleano | Opcional | use_fedcm_for_button: true |
button_auto_select
Este campo determina si se debe habilitar la opción de selección automática para el flujo de botones de FedCM. Si está habilitada, los usuarios que regresen con una sesión de Google activa accederán automáticamente, sin que se muestre el mensaje del selector de cuentas. La configuración predeterminada es false
. Debes habilitar explícitamente el acceso automático con botón durante el lanzamiento de la aceptación. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
booleano | Opcional | button_auto_select: true |
Método: google.accounts.id.prompt
El método google.accounts.id.prompt
muestra el mensaje de One Tap o el administrador de credenciales integrado en el navegador después de que se invoca el método initialize()
.
Consulta el siguiente ejemplo de código del método:
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
Normalmente, se llama al método prompt()
cuando se carga la página. Es posible que no se muestre la IU de la ventana emergente de Un toque debido al estado de la sesión y a la configuración del usuario en el lado de Google. Para recibir notificaciones sobre el estado de la IU en diferentes momentos, pasa una función para recibir notificaciones sobre el estado de la IU.
Las notificaciones se activan en los siguientes momentos:
- Momento de visualización: Se produce después de que se llama al método
prompt()
. La notificación contiene un valor booleano para indicar si se muestra la IU. Momento omitido: Esto ocurre cuando se cierra el mensaje de Un toque por una cancelación automática, una cancelación manual o cuando Google no puede emitir una credencial, por ejemplo, cuando se cerró la sesión seleccionada de Google.
En estos casos, te recomendamos que continúes con los siguientes proveedores de identidad, si los hay.
Momento de descarte: Esto ocurre cuando Google recupera correctamente una credencial o cuando un usuario quiere detener el flujo de recuperación de credenciales. Por ejemplo, cuando el usuario comienza a ingresar su nombre de usuario y contraseña en el diálogo de acceso, puedes llamar al método
google.accounts.id.cancel()
para cerrar el mensaje de Un toque y activar un momento de descarte.
En el siguiente ejemplo de código, se implementa el momento omitido:
<script>
window.onload = function () {
google.accounts.id.initialize(...);
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// continue with another identity provider.
}
});
};
</script>
Tipo de datos: PromptMomentNotification
En la siguiente tabla, se enumeran los métodos y las descripciones del tipo de datos PromptMomentNotification
:
Método | |
---|---|
isDisplayMoment() |
¿Esta notificación es para un momento de visualización? Nota: Cuando FedCM está habilitado, no se activa esta notificación. Consulta la página Migra a FedCM para obtener más información. |
isDisplayed() |
¿Esta notificación es para un momento de visualización y se muestra la IU? Nota: Cuando FedCM está habilitado, no se activa esta notificación. Consulta la página Migra a FedCM para obtener más información. |
isNotDisplayed() |
¿Esta notificación es para un momento de visualización y no se muestra la IU? Nota: Cuando FedCM está habilitado, no se activa esta notificación. Consulta la página Migra a FedCM para obtener más información. |
getNotDisplayedReason() |
Es el motivo detallado por el que no se muestra la IU. Los siguientes son los valores posibles:
|
isSkippedMoment() |
¿Esta notificación es para un momento omitido? |
getSkippedReason() |
Es el motivo detallado por el que se omitió el momento. Los siguientes son los valores posibles:
|
isDismissedMoment() |
¿Esta notificación corresponde a un momento descartado? |
getDismissedReason() |
Es el motivo detallado del descarte. Los siguientes son los valores posibles:
|
getMomentType() |
Devuelve una cadena para el tipo de momento. Los siguientes son los valores posibles:
|
Tipo de datos: CredentialResponse
Cuando se invoca tu función callback
, se pasa un objeto CredentialResponse
como parámetro. En la siguiente tabla, se enumeran los campos que se incluyen en el objeto de respuesta de credenciales:
Campo | |
---|---|
credential |
Es el token de ID de JWT codificado que emite Google. |
select_by |
Cómo accedió el usuario. |
state |
Este campo solo se define cuando el usuario hace clic en un botón de Acceder con Google para acceder, y se especifica el atributo state del botón. |
credencial
Este campo es el token de ID como una cadena de token web JSON (JWT) codificada en base64.
Cuando se decodifica, el JWT se ve 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": "Elisa", "family_name": "Beckett", "iat": 1596474000, // Unix timestamp of the assertion's creation time "exp": 1596477600, // Unix timestamp of the assertion's expiration time "jti": "abc161803398874def" }
El campo sub
es un identificador único a nivel global para la Cuenta de Google. Solo usa el campo sub
como identificador del usuario, ya que es único entre todas las Cuentas de Google y nunca se reutiliza.
Con los campos email
, email_verified
y hd
, puedes determinar si Google aloja una dirección de correo electrónico y es autoritativo para ella. En los casos en que Google es la autoridad, se confirma que el usuario es el propietario legítimo de la cuenta.
Casos en los que Google es una fuente acreditada:
- Si
email
tiene el sufijo@gmail.com
, se trata de una cuenta de Gmail. email_verified
es verdadero yhd
está configurado, se trata de una cuenta de Google Workspace.
Los usuarios pueden registrarse para obtener Cuentas de Google sin usar Gmail ni Google Workspace.
Cuando email
no contiene un sufijo @gmail.com
y hd
está ausente, Google no es autoritativo y se recomiendan la contraseña o cualquier otro método de desafío para verificar al usuario. email_verfied
también puede ser verdadero, ya que Google verificó inicialmente al usuario cuando se creó la Cuenta de Google. Sin embargo, es posible que la propiedad de la cuenta de correo electrónico de terceros haya cambiado desde entonces.
El campo exp
muestra la hora de vencimiento para que verifiques el token en el servidor. Es de una hora para el token de ID obtenido de Acceder con Google. Debes verificar el token antes de la hora de vencimiento. No uses exp
para la administración de sesiones. Un token de ID vencido no significa que el usuario salió de su cuenta. Tu app es responsable de la administración de sesiones de tus usuarios.
select_by
En la siguiente tabla, se enumeran los valores posibles para el campo select_by
. El tipo de botón que se usa junto con el estado de la sesión y el consentimiento se utiliza para establecer el valor.
El usuario presionó el botón de One Tap o Acceder con Google, o bien usó el proceso de acceso automático sin contacto.
Se encontró una sesión existente o el usuario seleccionó una Cuenta de Google y accedió a ella para establecer una sesión nueva.
Antes de compartir las credenciales del token de ID con tu app, el usuario debe realizar una de las siguientes acciones:
- presionó el botón Confirmar para otorgar su consentimiento para compartir credenciales
- había otorgado su consentimiento previamente y usó la opción 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 |
Acceso automático de un usuario con una sesión existente que ya había otorgado su consentimiento para compartir credenciales. Solo se aplica a los navegadores que no admiten FedCM. |
user |
Un usuario con una sesión existente que ya había otorgado su consentimiento presionó el botón de un toque "Continuar como" para compartir credenciales. Solo se aplica a los navegadores que no admiten FedCM. |
fedcm |
Un usuario presionó el botón "Continuar como" de One Tap para compartir credenciales con FedCM. Solo se aplica a los navegadores compatibles con FedCM. |
fedcm_auto |
Acceso automático de un usuario con una sesión existente que previamente otorgó su consentimiento para compartir credenciales con FedCM One Tap. Solo se aplica a los navegadores compatibles con FedCM. |
user_1tap |
Un usuario con una sesión existente presionó el botón de un toque "Continuar como" para otorgar consentimiento y compartir credenciales. Solo se aplica a Chrome 75 y versiones posteriores. |
user_2tap |
Un usuario sin una sesión existente presionó el botón de un toque "Continuar como" para seleccionar una cuenta y, luego, presionó el botón Confirmar en una ventana emergente para otorgar consentimiento y compartir credenciales. Se aplica a los navegadores que no se basan en Chromium. |
itp |
Un usuario con una sesión existente que había otorgado su consentimiento anteriormente presionó la opción de un toque en los navegadores con ITP. |
itp_confirm |
Un usuario con una sesión existente presionó Un toque en navegadores con ITP y presionó el botón Confirmar para otorgar su consentimiento y compartir sus credenciales. |
itp_add_session |
Un usuario sin una sesión existente que otorgó su consentimiento anteriormente presionó Un toque en navegadores con ITP para seleccionar una Cuenta de Google y compartir credenciales. |
itp_confirm_add_session |
Un usuario sin una sesión existente primero presionó One Tap en navegadores con ITP para seleccionar una Cuenta de Google y, luego, presionó el botón Confirmar para dar su consentimiento y compartir credenciales. |
btn |
Un usuario con una sesión existente que otorgó su consentimiento anteriormente presionó el botón Acceder con Google y seleccionó una Cuenta de Google en "Elige una cuenta" para compartir credenciales. |
btn_confirm |
Un usuario con una sesión existente presionó el botón Acceder con Google y, luego, el botón Confirmar para otorgar consentimiento y compartir credenciales. |
btn_add_session |
Un usuario sin una sesión existente que otorgó consentimiento anteriormente presionó el botón Acceder 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 Acceder con Google para seleccionar una Cuenta de Google y, luego, presionó el botón Confirmar para dar su consentimiento y compartir credenciales. |
state
Este campo solo se define cuando el usuario hace clic en un botón de Acceder con Google para acceder, y se especifica el atributo state
del botón en el que se hizo clic. El valor de este campo es el mismo que especificaste en el atributo state
del botón.
Como se pueden renderizar varios botones de Acceder con Google en la misma página, puedes asignar a cada botón una cadena única. Por lo tanto, puedes usar este campo state
para identificar en qué botón hizo clic el usuario para acceder.
Método: google.accounts.id.renderButton
El método google.accounts.id.renderButton
renderiza un botón de Acceder con Google en tus páginas web.
Consulta el siguiente ejemplo de código del método:
google.accounts.id.renderButton(
/** @type{!HTMLElement} */ parent,
/** @type{!GsiButtonConfiguration} */ options
)
Tipo de datos: GsiButtonConfiguration
En la siguiente tabla, se enumeran los campos y las descripciones del tipo de datos GsiButtonConfiguration
:
Atributo | |
---|---|
type |
Tipo de botón: ícono o botón estándar. |
theme |
Es el tema del botón. Por ejemplo, filled_blue o filled_black. |
size |
Es el tamaño del botón. Por ejemplo, pequeño o grande. |
text |
Es el texto del botón. Por ejemplo, "Acceder con Google" o "Registrarse con Google". |
shape |
Forma del botón. Por ejemplo, rectangular o circular. |
logo_alignment |
Alineación del logotipo de Google: izquierda o centro. |
width |
Ancho del botón en píxeles. |
locale |
Si se configura, se renderizará el idioma del botón. |
click_listener |
Si se configura, se llama a esta función cuando se hace clic en el botón de acceso con Google. |
state |
Si se configura, esta cadena se devuelve con el token de ID. |
Tipos de atributos
En las siguientes secciones, se incluyen detalles sobre el tipo de cada atributo y un ejemplo.
tipo
Tipo de botón. El valor predeterminado es standard
.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Sí | type: "icon" |
En la siguiente tabla, se enumeran los tipos de botones disponibles y sus descripciones:
Tipo | |
---|---|
standard |
![]() ![]() |
icon |
![]() |
tema
Es el tema del botón. El valor predeterminado es outline
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | theme: "filled_blue" |
En la siguiente tabla, se enumeran los temas disponibles y sus descripciones:
Tema | |
---|---|
outline |
![]() ![]() ![]() |
filled_blue |
![]() ![]() ![]() |
filled_black |
![]() ![]() ![]() |
tamaño
Es el tamaño del botón. El valor predeterminado es large
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | size: "small" |
En la siguiente tabla, se enumeran los tamaños de botones disponibles y sus descripciones:
Tamaño | |
---|---|
large |
![]() ![]() ![]() |
medium |
![]() ![]() |
small |
![]() ![]() |
texto
Es el texto del botón. El valor predeterminado es signin_with
. No hay diferencias visuales en el texto de los botones de ícono que tienen diferentes atributos text
.
La única excepción es cuando se lee el texto para la accesibilidad de la pantalla.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | text: "signup_with" |
En la siguiente tabla, se enumeran todos los textos de botones disponibles y sus descripciones:
Texto | |
---|---|
signin_with |
![]() ![]() |
signup_with |
![]() ![]() |
continue_with |
![]() ![]() |
signin |
![]() ![]() |
shape
Forma del botón. El valor predeterminado es rectangular
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | shape: "rectangular" |
En la siguiente tabla, se enumeran las formas de botones disponibles y sus descripciones:
Forma | |
---|---|
rectangular |
![]() ![]() ![]() icon , es igual que square .
|
pill |
![]() ![]() ![]() icon , es igual a circle .
|
circle |
![]() ![]() ![]() standard , es igual que pill .
|
square |
![]() ![]() ![]() standard , es igual que rectangular .
|
logo_alignment
Es la alineación del logotipo de Google. El valor predeterminado es left
. Este atributo solo se aplica al tipo de botón standard
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | logo_alignment: "center" |
En la siguiente tabla, se enumeran las alineaciones disponibles y sus descripciones:
logo_alignment | |
---|---|
left |
![]() |
center |
![]() |
ancho
Es el ancho mínimo del botón, en píxeles. El ancho máximo es de 400 píxeles.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | width: "400" |
configuración regional
Opcional. Muestra el texto del botón con la configuración regional especificada. De lo contrario, se usará la configuración predeterminada de la Cuenta de Google o del navegador del usuario. Agrega el parámetro hl
y el código de idioma a la directiva src cuando cargues la biblioteca, por ejemplo: gsi/client?hl=<iso-639-code>
.
Si no se configura, se usa la configuración regional predeterminada del navegador o la preferencia del usuario de la sesión de Google. Por lo tanto, es posible que los diferentes usuarios vean diferentes versiones de los botones localizados, y posiblemente con diferentes tamaños.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | locale: "zh_CN" |
click_listener
Puedes definir una función de JavaScript para que se llame cuando se haga clic en el botón Acceder con Google con el atributo click_listener
.
google.accounts.id.renderButton(document.getElementById("signinDiv"), { theme: 'outline', size: 'large', click_listener: onClickHandler }); function onClickHandler(){ console.log("Sign in with Google button clicked...") }
En este ejemplo, el mensaje Se hizo clic en el botón de acceso con Google… se registra en la consola cuando se hace clic en el botón de acceso con Google.
state
Opcional: Como se pueden renderizar varios botones de Acceder con Google en la misma página, puedes asignar a cada botón una cadena única. La misma cadena se devolvería junto con el token de ID, por lo que puedes identificar en qué botón hizo clic el usuario para acceder.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
string | Opcional | data-state: "button 1" |
Tipo de datos: Credencial
Cuando se invoca tu función native_callback
, se pasa un objeto Credential
como parámetro. En la siguiente tabla, se enumeran los campos que contiene el objeto:
Campo | |
---|---|
id |
Identifica al usuario. |
password |
La contraseña |
Método: google.accounts.id.disableAutoSelect
Cuando el usuario salga de tu sitio web, debes llamar al método google.accounts.id.disableAutoSelect
para registrar el estado en las cookies. Esto evita un bucle sin salida de UX. Consulta el siguiente fragmento de código del método:
google.accounts.id.disableAutoSelect()
En el siguiente ejemplo de código, se implementa el método google.accounts.id.disableAutoSelect
con una función onSignout()
:
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
Método: google.accounts.id.storeCredential
Este método es un wrapper para el método store()
de la API del administrador de credenciales integrado en el navegador. Por lo tanto, solo se puede usar para almacenar una credencial de contraseña. Consulta el siguiente ejemplo de código del método:
google.accounts.id.storeCredential(Credential, callback)
En el siguiente ejemplo de código, se implementa el método google.accounts.id.storeCredential
con una función onSignIn()
:
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Método: google.accounts.id.cancel
Puedes cancelar el flujo de Un toque si quitas el mensaje del DOM de la parte que confía. La operación de cancelación se ignora si ya se seleccionó una credencial. Consulta el siguiente ejemplo de código del método:
google.accounts.id.cancel()
En el siguiente ejemplo de código, se implementa el método google.accounts.id.cancel()
con una función onNextButtonClicked()
:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Devolución de llamada de carga de la biblioteca: onGoogleLibraryLoad
Puedes registrar una devolución de llamada onGoogleLibraryLoad
. Se notifica después de que se carga la biblioteca de JavaScript de Acceder con Google:
window.onGoogleLibraryLoad = () => {
...
};
Esta devolución de llamada es solo un acceso directo a la devolución de llamada window.onload
. No hay diferencias en el comportamiento.
En el siguiente ejemplo de código, se implementa una devolución de llamada onGoogleLibraryLoad
:
<script>
window.onGoogleLibraryLoad = () => {
google.accounts.id.initialize({
...
});
google.accounts.id.prompt();
};
</script>
Método: google.accounts.id.revoke
El método google.accounts.id.revoke
revoca el permiso de OAuth que se usó para compartir el token de ID del usuario especificado. Consulta el siguiente fragmento de código del método:
javascript
google.accounts.id.revoke(login_hint, callback)
Parámetro | Tipo | Descripción |
---|---|---|
login_hint |
string | Es la dirección de correo electrónico o el ID único de la Cuenta de Google del usuario. El ID es la propiedad sub de la carga útil de credencial. |
callback |
función | Es un controlador RevocationResponse opcional. |
En el siguiente ejemplo de código, se muestra cómo usar el método revoke
con un ID.
google.accounts.id.revoke('1618033988749895', done => { console.log(done.error); });
Tipo de datos: RevocationResponse
Cuando se invoca tu función callback
, se pasa un objeto RevocationResponse
como parámetro. En la siguiente tabla, se enumeran los campos que se incluyen en el objeto de respuesta de revocación:
Campo | |
---|---|
successful |
Este campo es el valor de devolución de la llamada al método. |
error |
Este campo contiene, de manera opcional, un mensaje de respuesta de error detallado. |
completado
Este campo es un valor booleano establecido en verdadero si la llamada al método de revocación se realizó correctamente o en falso si falló.
error
Este campo es un valor de cadena y contiene un mensaje de error detallado si falló la llamada al método de revocación. No está definido si la operación se realizó correctamente.