En esta página de referencia, se describe la API de Sign-In JavaScript. Puedes usar esta API para mostrar el mensaje de One Tap o el botón de 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 de cliente de Acceder con Google que todos los módulos de la misma página web pueden usar de manera implícita.
- Solo debes llamar al método
google.accounts.id.initialize
una vez, incluso si usas varios módulos (como One Tap, botón personalizado, revocación, etc.) 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, puedes restablecer 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 de inmediato las nuevas configuraciones.
Tipo de datos: IdConfiguration
En la siguiente tabla, se enumeran los campos y las descripciones del tipo de datos IdConfiguration
:
Técnica | |
---|---|
client_id |
El ID de cliente de tu aplicación |
auto_select |
Habilita la selección automática. |
callback |
La función de JavaScript que controla los tokens de ID. Google One Tap y el modo de UX del botón de Acceder con Google popup usan este atributo. |
login_uri |
La URL del extremo de acceso. El modo de UX del botón de Acceder con Google
redirect usa este atributo. |
native_callback |
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 |
El ID del DOM del elemento del contenedor del mensaje de One Tap |
nonce |
Una cadena aleatoria para tokens de ID |
context |
El título y las palabras en el mensaje de One Tap |
state_cookie_domain |
Si necesitas llamar a One Tap en el dominio superior y sus subdominios, pasa el dominio superior a este campo para que se use una sola cookie compartida. |
ux_mode |
El flujo de UX del botón de Acceder con Google |
allowed_parent_origin |
Los orígenes autorizados para incorporar el iframe intermedio. One Tap se ejecuta en el modo intermedio de iframe si está presente este campo. |
intermediate_iframe_close_callback |
Anula el comportamiento predeterminado del iframe intermedio cuando los usuarios cierran One Tap de forma manual. |
itp_support |
Habilita la UX actualizada de One Tap en navegadores ITP. |
login_hint |
Para omitir la selección de cuenta, proporciona una sugerencia para el usuario. |
hd |
Limita la selección de cuentas por dominio. |
use_fedcm_for_prompt |
Permite que el navegador controle los mensajes de acceso de los usuarios y media el flujo de acceso entre tu sitio web y Google. |
client_id
Este campo es el ID de cliente de tu aplicación, que se encuentra y crea en la consola de Google Cloud. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Sí | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
Este campo determina si un token de ID se muestra automáticamente sin interacción del usuario cuando solo hay una sesión de Google en la que se aprobó tu app. El valor predeterminado es false
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
boolean | Opcional | auto_select: true |
callback
Este campo es la función de JavaScript que controla el token de ID que muestra el mensaje de One Tap o la ventana emergente. Este atributo es obligatorio si se usa el modo de UX de Google One Tap o del botón Acceder con Google popup
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
la función | Se requiere para 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 URI 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 URI de redireccionamiento.
Este atributo se puede omitir si la página actual es tu página de acceso, en cuyo caso la credencial se publicará en esta página de forma predeterminada.
La respuesta de la 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 | La configuración predeterminada es el URI de la página actual o el valor que especifiques. Solo se usa cuando se configura ux_mode: "redirect" . |
login_uri="https://www.example.com/login" |
El extremo de acceso debe controlar las solicitudes POST que contengan una clave credential
con un valor de token de ID en el cuerpo.
A continuación, se muestra un ejemplo de solicitud a tu extremo de acceso:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
native_callback
Este campo es el nombre de la función de JavaScript que maneja la credencial de contraseña que muestra el administrador de credenciales nativo del navegador. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
la función | Opcional | native_callback: handleResponse |
cancel_on_tap_outside
Este campo establece si se cancela o no la solicitud de One Tap si un usuario hace clic fuera del mensaje. El valor predeterminado es true
. Puedes inhabilitarla si estableces el valor en false
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
boolean | Opcional | cancel_on_tap_outside: false |
prompt_parent_id
Este atributo establece el ID del DOM del elemento del contenedor. Si no lo está, se mostrará el mensaje de One Tap en la esquina superior derecha de la ventana. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Opcional | prompt_parent_id: 'parent_id' |
nonce
Este campo es una cadena aleatoria que utiliza el token de ID para evitar ataques de repetición. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Opcional | nonce: "biaqbm70g23" |
La longitud del nonce se limita al tamaño máximo de JWT compatible con tu entorno y las restricciones de tamaño individual del navegador y del servidor.
Contexto
Este campo cambia el texto del título y los mensajes en el mensaje de One Tap. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Opcional | context: "use" |
En la siguiente tabla, se enumeran todos los contextos disponibles y sus descripciones:
La importancia | |
---|---|
signin |
"Acceder con Google" |
signup |
"Regístrate con Google" |
use |
"Usar con Google" |
state_cookie_domain
Si necesitas mostrar One Tap en el dominio superior y sus subdominios, pasa el dominio superior 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 |
---|---|---|
cadena | Opcional | state_cookie_domain: "example.com" |
ux_mode
Utiliza este campo para establecer el flujo de UX que utiliza el botón Acceder con Google. El valor predeterminado es popup
. Este atributo no tiene impacto en la UX de OneTap. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Opcional | ux_mode: "redirect" |
En la siguiente tabla, se enumeran los modos de UX disponibles y sus descripciones.
Modo 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
Los orígenes autorizados para incorporar el iframe intermedio. One Tap se ejecuta en el modo intermedio de iframe si está presente este campo. 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 |
Un URI de dominio único. | "https://example.com" |
string array |
Un array de URIs del dominio. | ["https://news.example.com", "https://local.example.com"] |
También se admiten prefijos comodín. 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 patrón 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. Como se indicó más arriba,"https://.example.com"
coincide conexample.com
y sus subdominios. También puedes usar un array para representar 2 dominios diferentes. Por ejemplo,["https://example1.com", "https://
.example2.com"]
coincide con los dominiosexample1.com
,example2.com
y 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, la inicialización con One Tap del modo intermedio de iframe fallará y se detendrá.
intermediate_iframe_close_callback
Anula el comportamiento predeterminado del iframe intermedio cuando los usuarios cierran manualmente One Tap. Para ello, presionan el botón "X" en la IU de One Tap. El comportamiento predeterminado consiste en quitar de inmediato el iframe intermedio del DOM.
El campo intermediate_iframe_close_callback
solo se aplica en el modo intermedio del iframe. Y solo tiene impacto en el iframe intermedio, en lugar del iframe de One Tap. La IU de One Tap se quita antes de que se invoque la devolución de llamada.
Tipo | Obligatorio | Ejemplo |
---|---|---|
la función | Opcional | intermediate_iframe_close_callback: logBeforeClose |
itp_support
Este campo determina si se debe habilitar la
UX actualizada de One Tap en los navegadores compatibles con 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 |
---|---|---|
boolean | 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 se realiza correctamente, se omitirá la selección de cuenta. Se aceptan los siguientes valores: una dirección de correo electrónico o un valor de 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 |
---|---|---|
String, una dirección de correo electrónico o el valor de un campo de token de ID sub . |
Opcional | login_hint: 'elisa.beckett@gmail.com' |
HD
Cuando un usuario tiene varias cuentas y solo debe acceder con su cuenta de Workspace, usa esto para proporcionarle a Google una sugerencia de nombre de dominio. Si se ejecuta de forma correcta, las cuentas de usuario que se muestran durante la selección de cuentas se limitan al dominio proporcionado.
Un valor comodín: *
solo ofrece al usuario cuentas de Workspace y excluye las cuentas personales (user@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. Un nombre de dominio completamente calificado o *. | Opcional | hd: '*' |
use_fedcm_for_prompt
Permite que el navegador controle los mensajes de acceso de los usuarios y media el flujo de acceso entre tu sitio web y Google. La configuración predeterminada es "false". Consulta la página Migra al FedCM para obtener más información.
Tipo | Obligatorio | Ejemplo |
---|---|---|
boolean | Opcional | use_fedcm_for_prompt: 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 nativo del 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)
Por lo general, se llama al método prompt()
cuando se carga la página. Debido al estado de la sesión y la configuración del usuario en el lado de Google, es posible que no se muestre la IU del mensaje de One Tap. Si quieres recibir notificaciones sobre el estado de la IU para 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: Esto ocurre después de que se llama al método
prompt()
. La notificación contiene un valor booleano para indicar si se muestra o no la IU. Momento omitido: Esto ocurre cuando se cierra el mensaje de One Tap mediante una cancelación automática o una cancelación manual, o bien cuando Google no emite una credencial, por ejemplo, cuando la sesión seleccionada salió de Google.
En estos casos, te recomendamos que continúes con los siguientes proveedores de identidad, si los hay.
Momento descartado: Esto ocurre cuando Google recupera una credencial de forma correcta o 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 One Tap y activar un momento descartado.
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, esta notificación no se activa. 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, esta notificación no se activa. 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, esta notificación no se activa. Consulta la página Migra a FedCM para obtener más información. |
getNotDisplayedReason() |
El motivo detallado por el que no se muestra la IU. Los siguientes son valores posibles:
|
isSkippedMoment() |
¿La notificación es de un momento que se omitió? |
getSkippedReason() |
Es el motivo detallado del momento en que se omitió. Los siguientes son valores posibles:
|
isDismissedMoment() |
¿Esta notificación es para un momento descartado? |
getDismissedReason() |
Indica el motivo detallado del rechazo. Los siguientes son valores posibles:
|
getMomentType() |
Muestra una cadena para el tipo de momento. Los siguientes son valores posibles:
|
Tipo de datos: CredentialResponse
Cuando se invoca la función callback
, se pasa un objeto CredentialResponse
como parámetro. En la siguiente tabla, se enumeran los campos que se encuentran en el objeto de respuesta de credenciales:
Técnica | |
---|---|
credential |
Este campo es el token de ID que se muestra. |
select_by |
Este campo establece cómo se selecciona la credencial. |
state |
Este campo solo se define cuando el usuario hace clic en un botón de Acceder con Google para ingresar 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 de la Cuenta de Google. Solo usa el campo sub
como identificador para el usuario, ya que es único entre todas las Cuentas de Google y nunca se reutiliza. No uses una dirección de correo electrónico como identificador, ya que una Cuenta de Google puede tener varias direcciones de correo electrónico en diferentes momentos.
Con los campos email
, email_verified
y hd
, puedes determinar si Google aloja una dirección de correo electrónico y si está autorizada para hacerlo. En los casos en que Google tiene autoridad, se confirma que el usuario es el propietario legítimo de la cuenta.
Casos en los que Google tiene autoridad:
email
tiene el sufijo@gmail.com
. Esta es una cuenta de Gmail.email_verified
es verdadero yhd
está configurado. Esta es una cuenta de Google Workspace.
Los usuarios pueden registrarse para obtener Cuentas de Google sin usar Gmail o Google Workspace.
Cuando email
no contiene el sufijo @gmail.com
y falta hd
, Google no es autorizado y se recomienda usar una contraseña o algún 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 fecha y hora de vencimiento para que verifiques el token en tu servidor. Es una hora para el token de ID obtenido de Acceder con Google. Debes verificar el
token antes de la fecha 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 las 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 sesión y consentimiento se utilizan para establecer el valor,
El usuario presionó el botón 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ó y accedió a una Cuenta de Google para establecer una sesión nueva.
Antes de compartir las credenciales del token de ID con tu app, el usuario puede
- presionó el botón Confirmar para otorgarle su consentimiento y compartir las credenciales.
- ya había otorgado consentimiento 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 antes otorgó consentimiento para compartir credenciales. Solo se aplica a los navegadores que no son compatibles con FedCM. |
user |
Un usuario con una sesión existente que había otorgado su consentimiento presionó el botón "Continuar como" de One Tap para compartir las credenciales. Solo se aplica a navegadores no compatibles con FedCM. |
fedcm |
Un usuario presionó el botón "Continuar como" de One Tap para compartir credenciales mediante FedCM. Solo se aplica a los navegadores compatibles con FedCM. |
fedcm_auto |
Acceso automático de un usuario con una sesión existente que ya había otorgado su consentimiento para compartir credenciales con One Tap de FedCM Solo se aplica a los navegadores compatibles con FedCM. |
user_1tap |
Un usuario con una sesión existente presionó el botón "Continuar como" con One Tap para otorgar su consentimiento y compartir credenciales. Solo se aplica a Chrome v75 y versiones posteriores. |
user_2tap |
Un usuario sin una sesión existente presionó el botón "Continuar como" con One Tap para seleccionar una cuenta y, luego, el botón Confirmar en una ventana emergente para otorgar su consentimiento y compartir credenciales. Se aplica a los navegadores que no están basados en Chromium. |
btn |
Un usuario con una sesión existente que ya otorgó su consentimiento presionó el botón Acceder 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 Acceder con Google y el botón Confirmar para otorgar su consentimiento y compartir credenciales. |
btn_add_session |
Un usuario que no tiene una sesión existente y que ya había otorgado su consentimiento presionó el botón Acceder 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 Acceder con Google para seleccionar una Cuenta de Google y, luego, 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 ingresar 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 uno 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 |
El tipo de botón: ícono o botón estándar. |
theme |
El tema del botón Por ejemplo, relleno_azul o negro_relleno. |
size |
El tamaño del botón. Por ejemplo, pequeño o grande. |
text |
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 |
Es el ancho del botón en píxeles. |
locale |
Si se establece, 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 Acceder con Google. |
state |
Si se configura, esta cadena se muestra con el token de ID. |
Tipos de atributos
Las siguientes secciones contienen detalles sobre el tipo de cada atributo y un ejemplo.
Tipo
El tipo de botón. El valor predeterminado es standard
.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Sí | type: "icon" |
En la siguiente tabla, se enumeran los tipos de botones disponibles y sus descripciones:
Tipo | |
---|---|
standard |
|
icon |
tema
El tema del botón El valor predeterminado es outline
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Opcional | theme: "filled_blue" |
En la siguiente tabla, se indican los temas disponibles y sus descripciones:
Tema | |
---|---|
outline |
|
filled_blue |
|
filled_black |
tamaño
El tamaño del botón. El valor predeterminado es large
. Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Opcional | size: "small" |
En la siguiente tabla, se indican los tamaños de botones disponibles y sus descripciones:
del vocab. | |
---|---|
large |
|
medium |
|
small |
text
El texto del botón. El valor predeterminado es signin_with
. No hay diferencias visuales para el texto de los botones de íconos que tienen diferentes atributos text
.
La única excepción es cuando el texto se lee con fines de accesibilidad en la pantalla.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | 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 |
---|---|---|
cadena | Opcional | shape: "rectangular" |
En la siguiente tabla, se enumeran las formas de botones disponibles y sus descripciones:
Forma | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
logo_alignment
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 |
---|---|---|
cadena | Opcional | logo_alignment: "center" |
En la siguiente tabla, se enumeran las alineaciones disponibles y sus descripciones:
logo_alignment | |
---|---|
left |
|
center |
width
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 |
---|---|---|
cadena | Opcional | width: "400" |
configuración regional
Opcional. Muestra el texto del botón con la configuración regional especificada; de lo contrario, se mostrará la Cuenta de Google del usuario o la configuración del navegador de manera predeterminada. 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 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, es posible que diferentes usuarios vean versiones diferentes de los botones localizados y, posiblemente, con diferentes tamaños.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Opcional | locale: "zh_CN" |
click_listener
Puedes definir una función de JavaScript a la que se llamará cuando se haga clic en el botón Acceder con Google mediante 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 Acceder con Google... se registra en la consola cuando se hace clic en el botón Acceder con Google.
state
Opcional, ya que se pueden renderizar varios botones de Acceder con Google en la misma página, puedes asignar una cadena única a cada uno. Se mostrará la misma cadena junto con el token de ID, de modo que puedas identificar en qué botón el usuario hizo clic para acceder.
Consulta la siguiente tabla para obtener más información:
Tipo | Obligatorio | Ejemplo |
---|---|---|
cadena | Opcional | data-state="button 1" |
Tipo de datos: credencial
Cuando se invoca la función native_callback
, se pasa un objeto Credential
como parámetro. En la siguiente tabla, se enumeran los campos contenidos en el objeto:
Técnica | |
---|---|
id |
Identifica al usuario. |
password |
La contraseña |
Método: google.accounts.id.disableAutoSelect
Cuando el usuario salga de tu sitio web, deberás llamar al método google.accounts.id.disableAutoSelect
para registrar el estado en cookies. Esto evita un bucle muerto en la 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 de administrador de credenciales nativa del 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 One Tap si quitas el mensaje del DOM del usuario de confianza. La operación de cancelación se ignora si ya hay una credencial seleccionada. 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 envía una notificación después de que se carga la biblioteca JavaScript de Acceder con Google:
window.onGoogleLibraryLoad = () => {
...
};
Esta devolución de llamada es solo un atajo para 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 otorgamiento 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 |
cadena | 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 credenciales. |
callback |
la función | Controlador RevocationResponse opcional. |
En la siguiente muestra de código, se indica 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 la función callback
, se pasa un objeto RevocationResponse
como parámetro. En la siguiente tabla, se muestran los campos que contiene el objeto de respuesta de revocación:
Técnica | |
---|---|
successful |
Este campo es el valor que se muestra de la llamada de método. |
error |
De forma opcional, este campo contiene un mensaje de respuesta de error detallado. |
correcto
Este campo es un valor booleano que se establece en "true" si la llamada al método de revocación se realiza correctamente o como falsa en caso de error.
error
Este campo es un valor de cadena y contiene un mensaje de error detallado si se produce un error en la llamada al método de revocación; si se realiza correctamente, no está definido.