Referencia de la API de JavaScript de Acceder con Google

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.

Advertencia: El método google.accounts.id.initialize solo se debe llamar una vez, incluso si usas One Tap y el botón en la misma página web.

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.

Nota: Con la API de JavaScript, la respuesta del modo de UX popup del botón de Acceder con Google y de Google One Tap solo se puede devolver a la función de JavaScript callback. Prueba la API de HTML si la respuesta se debe enviar automáticamente a login_uri.

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 y https://.co.uk no son válidos, ya que "https://.example.com" coincide con example.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 dominios example1.com y example2.com, y con los subdominios de example2.com.
• Los dominios comodín deben comenzar con un esquema https:// seguro, por lo que "*.example.com" se considera no válido.

Nota: A diferencia de la API de HTML, una cadena con URIs separados por comas no es válida para el campo allowed_parent_origin. En su lugar, usa un objeto Array de JavaScript.

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: '[e-mail]'

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 ([e-mail]) 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.

  Advertencia: Cuando se encuentre en un momento descartado, no intente usar ninguno de los siguientes proveedores de identidad.

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>

Nota: Para mejorar la privacidad del usuario, las notificaciones de momentos se retrasan intencionalmente cuando FedCM está habilitado. Las notificaciones se pueden recibir hasta 1 minuto después de que ocurrió el evento real.

Nota: En el administrador de credenciales integrado, no hay notificaciones para los momentos de visualización, omisión o descarte, ya que estos ocurren fuera de la biblioteca de GIS.

Tipo de datos: PromptMomentNotification

En la siguiente tabla, se enumeran los métodos y las descripciones del tipo de datos PromptMomentNotification:

Precaución: Los cambios en FedCM afectan a isDisplayMoment(), isDisplayed(), isNotDisplayed(), getNotDisplayedReason() y getSkippedReason().Consulta la página Migra a FedCM para obtener más información.

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: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason Nota: Cuando FedCM está habilitado, este método no es compatible. Consulta la página Migra a FedCM para obtener más información.
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: auto_cancel user_cancel tap_outside issuing_failed Nota: Cuando FedCM está habilitado, este método no es compatible. Consulta la página Migra a FedCM para obtener más información.
isDismissedMoment()	¿Esta notificación corresponde a un momento descartado?
getDismissedReason()	Es el motivo detallado del descarte. Los siguientes son los valores posibles: credential_returned cancel_called flow_restarted
getMomentType()	Devuelve una cadena para el tipo de momento. Los siguientes son los valores posibles: display skipped dismissed

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": "[e-mail]", // 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.

Advertencia: No uses la 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. Siempre usa el campo sub como identificador del usuario.

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 y hd 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	Botón con texto o información personalizada.
icon	Un botón de ícono sin texto.

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	Un tema de botón estándar.
filled_blue	Un tema de botón relleno de color azul.
filled_black	Un tema de botón relleno de negro.

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	Un botón grande.
medium	Un botón de tamaño mediano.
small	Un botón pequeño.

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	El texto del botón es "Acceder con Google".
signup_with	El texto del botón es "Registrarse con Google".
continue_with	El texto del botón es "Continuar con Google".
signin	El texto del botón es "Acceder".

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	El botón con forma rectangular. Si se usa para el tipo de botón icon, es igual que square.
pill	El botón en forma de píldora. Si se usa para el tipo de botón icon, es igual a circle.
circle	El botón con forma de círculo. Si se usa para el tipo de botón standard, es igual que pill.
square	El botón cuadrado. Si se usa para el tipo de botón 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	Alinea el logotipo de Google a la izquierda.
center	Alinea el logotipo de Google al centro.

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);
  });

Punto clave: Llamar a este método revoca todos los permisos de OAuth 2.0 que se otorgaron anteriormente con la biblioteca cliente de Acceder con Google.

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.