Referencia de la API de JavaScript de Sign in with Google

En esta página de referencia, se describe la API de JavaScript de Acceder con Google, que se usa para mostrar el botón de Acceder con Google o el mensaje de One Tap en las páginas web.

Método: google.accounts.id.initialize

El método google.accounts.id.initialize inicializa el cliente de Acceder con Google en función del 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 forma implícita.

• Solo necesitas 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 los parámetros de configuración de la última llamada.

De hecho, restableces los parámetros de configuración cada vez que llamas al método google.accounts.id.initialize, y todos los métodos posteriores de la misma página web usan de inmediato los parámetros de configuración nuevos.

Advertencia: Solo se debe llamar al método google.accounts.id.initialize 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
color_scheme	Es el esquema de colores que se aplica al mensaje de One Tap.
auto_select	Habilita la selección automática.
callback	Es la función de JavaScript que controla los tokens de ID. One Tap de Google y el modo de UX popup del botón Acceder con Google usan este atributo.
login_uri	Es la URL de tu extremo de acceso. El botón Acceder 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	Es el ID del DOM del elemento contenedor del mensaje de One Tap.
nonce	Una cadena aleatoria para los tokens de ID
essential_claims	Son las reclamaciones adicionales que se incluirán en el token de ID que devuelve Google.
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	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 One Tap de forma manual.
itp_support	Habilita la UX mejorada de One Tap en los navegadores con ITP.
login_hint	Proporciona una sugerencia de usuario para omitir la selección de la cuenta.
hd	Limita la selección de cuentas por dominio.
use_fedcm_for_prompt	Obsoleto: Este atributo dejó de estar disponible y se ignorará si se usa. Permite que el navegador controle los cuadros de inicio de sesión de los usuarios 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 o versiones posteriores para computadoras de escritorio y M128 o 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 se habilita, los usuarios recurrentes con una sesión de Google activa accederán automáticamente, sin pasar por 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"

color_scheme

Este campo es el esquema de colores que se aplica al mensaje de One Tap. Consulta la siguiente tabla para obtener más información:

Tipo	Obligatorio	Ejemplo
string	Opcional. Se establece de forma predeterminada en el esquema de colores predeterminado del sistema de los usuarios.	color_scheme: "dark"

En la siguiente tabla, se enumeran los esquemas de colores disponibles y sus descripciones.

Esquema de colores
default	Aplica el esquema de colores predeterminado del sistema del usuario, que puede ser claro u oscuro según la preferencia del usuario.
light	Aplica un esquema de colores claros.
dark	Aplica un esquema de colores oscuro.

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 antes. 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 devuelve desde el mensaje de One Tap o 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	Obligatorio 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 publica en esta página de forma predeterminada.

La respuesta de credenciales 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	De forma predeterminada, se establece en el URI de la página actual o en el valor que especifiques. Solo se usa cuando se establece ux_mode: "redirect".	login_uri: "https://www.example.com/login"

Tu extremo de acceso debe controlar las solicitudes POST que contengan un parámetro credential con un valor de token de ID en el cuerpo. select_by no se incluye en las solicitudes HTTP POST a login_uri ni a data-login_uri, y solo se devuelve en el objeto CredentialResponse que se pasa a la función callback de JavaScript.

Nota: Con la API de JavaScript, la respuesta de One Tap de Google y el modo de UX popup del botón Acceder con Google solo se pueden 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 debe cancelar 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
booleano	Opcional	cancel_on_tap_outside: false

prompt_parent_id

Este atributo establece el ID del DOM del elemento contenedor. Si no se establece, 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 se limita al tamaño máximo de JWT que admite tu entorno y a las restricciones de tamaño de HTTP de cada navegador y servidor.

essential_claims

Este campo es una cadena que se usa para solicitar que se incluyan reclamaciones adicionales en el token de ID que devuelve Google. Para obtener una lista completa de las reclamaciones que acepta Google, consulta Reclamaciones admitidas.

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

Tipo	Obligatorio	Ejemplo
string	Opcional	essential_claims: "auth_time, amr"

context

Este campo cambia el texto del título y los mensajes que se muestran en el mensaje de One Tap, pero no tiene efecto en los navegadores con 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	"Acceder a"
signup	"Regístrate para"
use	"Usar"

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
string	Opcional	state_cookie_domain: "example.com"

ux_mode

Usa este campo para establecer el flujo de UX que usa el botón Acceder con Google. El valor predeterminado es popup. Este atributo no tiene 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
string o array de strings	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 solo URI de dominio.	"https://example.com"
string array	Un array de URIs de dominio.	["https://news.example.com", "https://local.example.com"]

También se admiten 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, example2.com y 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, la inicialización de One Tap del modo de iframe intermedio fallará y se detendrá.

intermediate_iframe_close_callback

Anula el comportamiento predeterminado del iframe intermedio cuando los usuarios cierran One Tap de forma manual 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 se aplica en el modo de iframe intermedio. Y solo afecta al 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
función	Opcional	intermediate_iframe_close_callback: logBeforeClose

itp_support

Este campo determina si se debe habilitar la UX de One Tap actualizada 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: false

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 omite la selección de la cuenta. Los valores aceptados son una dirección de correo electrónico o un valor de campo sub de token de ID.

Para obtener más información, consulta el campo login_hint en la documentación de OpenID Connect.

Tipo	Obligatorio	Ejemplo
Es una 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 esta opción para proporcionar una sugerencia de nombre de dominio a Google. Cuando 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: * ofrece solo 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. Un nombre de dominio completamente calificado o *.	Opcional	hd: '*'

use_fedcm_for_prompt

Obsoleto: Este atributo está obsoleto y se ignorará si se usa.

Permite que el navegador controle los cuadros de inicio de sesión 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	Obsoleto	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 o versiones posteriores para computadoras de escritorio y M128 o 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 del botón de FedCM. Si se habilita, los usuarios recurrentes con una sesión de Google activa accederán automáticamente, sin que aparezca el mensaje del Selector de cuentas. La configuración predeterminada es false. Debes habilitar de forma explícita el acceso automático con botón durante el lanzamiento de la función de habilitació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 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 de la solicitud de One Tap. Para recibir notificaciones sobre el estado de la IU en diferentes momentos, pasa una función que reciba notificaciones de 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 o no.

• Momento omitido: Esto ocurre cuando el mensaje de One Tap se cierra por una cancelación automática, una cancelación manual o cuando Google no emite una credencial, como cuando se cierra la sesión de Google seleccionada.

  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 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 de descarte.

  Advertencia: Cuando se descarte el momento, no pruebes 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 de visualización se retrasan de forma intencional cuando FedCM está habilitado. Las notificaciones se pueden recibir hasta 1 minuto después de que se haya producido 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 se producen 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 de 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()	Devuelve true si se muestra el mensaje de One Tap. Nota: Cuando FedCM está habilitado, no se admite esta notificación. Consulta la página Migra a FedCM para obtener más información.
isDisplayed()	Devuelve true si el tipo de momento es PromptMoment.DISPLAY y se muestra el mensaje de One Tap. Nota: Cuando FedCM está habilitado, no se admite esta notificación. Consulta la página Migra a FedCM para obtener más información.
isNotDisplayed()	Devuelve true si el tipo de momento es PromptMoment.DISPLAY y no se muestra el mensaje de One Tap. Nota: Cuando FedCM está habilitado, no se admite 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, no se admite esta notificación. Consulta la página Migra a FedCM para obtener más información.
isSkippedMoment()	Devuelve true si el tipo de momento es PromptMoment.SKIPPED Nota: Cuando FedCM está habilitado, este método se admite de forma parcial. En particular, no admite el motivo de omisión de user_cancel. Consulta la página Migra a FedCM para obtener más información.
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 se admite parcialmente. En particular, no admite el motivo de omisión de user_cancel. Consulta la página Migra a FedCM para obtener más información.
isDismissedMoment()	Devuelve true si el tipo de momento es PromptMoment.DISMISSED. Nota: Cuando FedCM está habilitado, este método es totalmente compatible. Consulta la página Migra a FedCM para obtener más información.
getDismissedReason()	Es el motivo detallado del rechazo. Los siguientes son los valores posibles: credential_returned cancel_called flow_restarted Nota: Cuando FedCM está habilitado, este método es totalmente compatible. Consulta la página Migra a FedCM para obtener más información.
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 en 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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "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 creation time
  "exp": 1596477600, // Unix timestamp of the assertion 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 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. Usa siempre el campo sub como el 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 la autoridad de ella. En los casos en que Google es autoritativo, se confirma que el usuario es el propietario legítimo de la cuenta.

Casos en los que Google es la autoridad:

• email tiene el sufijo @gmail.com, por lo que es una cuenta de Gmail.
• email_verified es verdadero y se establece hd, esta es 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 no está presente, Google no es autoritativo y se recomiendan la 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 hora de vencimiento para que verifiques el token en el servidor. Es de una hora para el token de ID que se obtiene 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 haya salido de su cuenta. Tu app es responsable de la administración de sesiones de tus usuarios.

select_by

Nota: select_by solo se devuelve en el objeto CredentialResponse que se pasa a la función callback de JavaScript y no se incluye en las solicitudes HTTP POST a login_uri ni a data-login_uri.

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 estado de consentimiento se utilizan 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, o bien
  • que ya haya otorgado el consentimiento y usado 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 otorgó su 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 ya había otorgado su consentimiento presionó el botón "Continuar como" de One Tap para compartir las credenciales. Solo se aplica a los navegadores que no son compatibles con 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 otorgó previamente 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" de One Tap para otorgar el consentimiento y compartir las credenciales. Solo se aplica a Chrome 75 y versiones posteriores.
user_2tap	Un usuario sin una sesión existente presionó el botón "Continuar como" de One Tap para seleccionar una cuenta y, luego, presionó el botón Confirmar en una ventana emergente para otorgar el consentimiento y compartir las credenciales. Se aplica a navegadores que no se basan en Chromium.
itp	Un usuario que ya había otorgado su consentimiento presionó One Tap en navegadores con ITP.
itp_confirm	Un usuario que no otorgó su consentimiento presionó One Tap en navegadores con ITP y presionó el botón "Continuar" para otorgar el consentimiento y compartir las credenciales.
btn	Un usuario que ya había otorgado 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 que no otorgó su consentimiento presionó el botón Acceder con Google y el botón "Continuar" para otorgar 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	El 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	Es la forma del botón. Por ejemplo, rectangular o circular.
logo_alignment	La alineación del logotipo de Google: izquierda o centro
width	Es el ancho del botón, en píxeles.
locale	Si se establece, se renderiza el idioma del botón.
click_listener	Si se establece, se llama a esta función cuando se hace clic en el botón Acceder con Google.
state	Si se establece, esta cadena se devuelve con el token de ID.

Tipos de atributos

En las siguientes secciones, se incluyen detalles sobre cada tipo de atributo y un ejemplo.

tipo

Es el 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	Ejemplos	Especificaciones
outline	Un tema de botón estándar.	Relleno: #FFFFFF Trazo: #747775 | 1px | interior Fuente: #1F1F1F | Roboto Medium | 14/20 Personalizado: #1F1F1F | Roboto | Medium 12/14 | Regular 11/13
filled_blue	Un tema de botón relleno de azul.	Relleno: #0B57D0 Trazo: #OB57D0 | 1px | interior Fuente: #FFFFFF | Google Sans Medium | 14/20 Personalizado: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
filled_black	Un tema de botón con relleno negro y un logotipo que contrasta.	Relleno: #202124 Trazo: #OB57D0 | 1px | interior Fuente: #FFFFFF | Google Sans Medium | 14/20 Personalizado: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
outline_dark	Un tema de botón con relleno negro.	Relleno: #131314 Trazo: #8E918F | 1px | interior Fuente: #FFFFFF | Google Sans Medium | 14/20 Personalizado: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13

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

Es la 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 rectangular. Si se usa para el tipo de botón icon, es lo mismo que square.
pill	El botón con forma de píldora. Si se usa para el tipo de botón icon, es lo mismo que circle.
circle	El botón con forma de círculo. Si se usa para el tipo de botón standard, es lo mismo que pill.
square	El botón con forma cuadrada. Si se usa para el tipo de botón standard, es lo mismo 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 en el 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 usa de forma predeterminada la Cuenta de Google o la configuración 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 establece, 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 diferentes usuarios vean distintas 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 Acceder con Google… se registra en la consola cuando se hace clic en el botón Acceder 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. Se mostraría la misma cadena junto con el token de ID, de modo que puedas 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, deberás llamar al método google.accounts.id.disableAutoSelect para registrar el estado en las cookies. Esto evita un bucle muerto 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 de Credential Manager integrada 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 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 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 de 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 usa 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	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 la credencial.
callback	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);
  });

Punto clave: La revocación quita todos los permisos de OAuth 2.0 otorgados anteriormente a un proyecto, lo que invalida los tokens de acceso o actualización emitidos para todos los clientes registrados en ese proyecto.

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 que se muestra de la llamada de método.
error	Este campo contiene, de manera opcional, un mensaje de respuesta de error detallado.

procesado correctamente

Este campo es un valor booleano establecido en true si la llamada de método de revocación se realizó correctamente o en false si falló.

error

Este campo es un valor de cadena y contiene un mensaje de error detallado si la llamada de método de revocación falló. No se define si se realizó correctamente.