La baja de las cookies de terceros de Chrome comenzará en el primer trimestre de 2024. Sigue la guía de migración para revisar los posibles cambios y evitar que el acceso a tu sitio web por parte de los usuarios sea negativo.

Se usó la API de Cloud Translation para traducir esta página.

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 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 acceso con Google. cliente basado en 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 un cliente de Acceder con Google. que pueden usar implícitamente todos los módulos de la misma página web.

Solo debes llamar al método google.accounts.id.initialize una vez si usa 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 recuerda y se usa la configuración de la última llamada.

Debes restablecer las configuraciones cada vez que llamas al google.accounts.id.initialize y todos los métodos posteriores en la misma usando los nuevos parámetros de configuración de inmediato.

Tipo de datos: IdConfiguration

En la siguiente tabla, se incluyen los campos y las descripciones de IdConfiguration tipo de datos:

Campo
`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 botón Acceder con Google `popup` modo UX usa esto .
`login_uri`	La URL de tu extremo de acceso. El botón Acceder con Google El modo UX de `redirect` usa este atributo.
`native_callback`	La función de JavaScript que maneja las credenciales de las contraseñas.
`cancel_on_tap_outside`	Cancela el mensaje si el usuario hace clic fuera del mensaje.
`prompt_parent_id`	El ID de 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 del mensaje de One Tap
`state_cookie_domain`	Si necesitas llamar a One Tap en el dominio superior y los subdominios, sigue estos pasos: pasar el dominio superior a este campo para que se pueda que se usan.
`ux_mode`	Flujo de la UX del botón Acceder con Google
`allowed_parent_origin`	Los orígenes que pueden incorporar el iframe intermedio. One Tap se ejecuta en el modo iframe intermedio si este campo está presente.
`intermediate_iframe_close_callback`	Anula el comportamiento intermedio predeterminado de iframe cuando los usuarios manualmente cerrar One Tap.
`itp_support`	Permite habilitar la UX actualizada de One Tap en navegadores ITP.
`login_hint`	Puedes omitir la selección de cuenta proporcionando una sugerencia al usuario.
`hd`	Limitar la selección de cuentas por dominio
`use_fedcm_for_prompt`	Permitir que el navegador controle los mensajes de acceso del usuario y mediar del 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 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 ningún usuario interacción 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 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 devuelve el el mensaje de One Tap o la ventana emergente. Este atributo es obligatorio si Google Se usa el modo UX de One Tap o de Acceder con Google popup. Consulta la para obtener más información:

Tipo	Obligatorio	Ejemplo
función	Se requiere para One Tap y el modo UX de `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 objeto OAuth 2.0, que configuraste en la consola de Google Cloud y debe cumplir con nuestra validación de URI de redireccionamiento con las reglas de firewall.

Este atributo puede omitirse si la página actual es tu página de acceso, en la que en caso de que la credencial se publique 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	El valor predeterminado es el URI de la página actual o el valor que especifiques. Solo se usa si se configura `ux_mode: "redirect"`.	`login_uri: "https://www.example.com/login"`

Tu extremo de acceso debe controlar las solicitudes POST que contengan un credential con un Valor de token de ID en el cuerpo.

La siguiente es una solicitud de ejemplo 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 controla la contraseña la credencial que muestra el administrador de credenciales nativo del navegador. Consulta la 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 en 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 de DOM del elemento contenedor. Si no está configurado, el El mensaje de One Tap se muestra en la esquina superior derecha de la ventana. Consulta la para obtener más información:

Tipo	Obligatorio	Ejemplo
string	Opcional	`prompt_parent_id: 'parent_id'`

nonce

Este campo es una cadena aleatoria utilizada por 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 admitido por tu entorno y restricciones de tamaño HTTP individuales del navegador y el servidor.

Contexto

Este campo cambia el texto del título y de los mensajes del mensaje de One Tap. 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 con Google"
`signup`	"Registrarse con Google"
`use`	"Usar con Google"

state_cookie_domain

Si necesitas mostrar One Tap en el dominio superior y sus subdominios, pasa el a este campo, de modo que se use una única 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

Utiliza este campo para configurar el flujo de UX que utiliza el botón Acceder con Google. El valor predeterminado es popup. Este atributo no afecta a la UX de OneTap. Consulta la para obtener más información:

Tipo	Obligatorio	Ejemplo
string	Opcional	`ux_mode: "redirect"`

La siguiente tabla enumera 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 mediante un redireccionamiento de página completa.

allowed_parent_origin

Los orígenes que pueden incorporar el iframe intermedio. Se ejecuta One Tap en el modo iframe intermedio si este campo está presente. Consulta lo siguiente para obtener más información:

Tipo	Obligatorio	Ejemplo
cadena o matriz de cadenas	Opcional	`allowed_parent_origin: "https://example.com"`

En la siguiente tabla, se indican los tipos de valores admitidos y sus descripciones.

Tipos de valores
`string`	Un URI de un solo dominio.	`"https://example.com"`
`string array`	Un array de URI de dominio.	`["https://news.example.com", "https://local.example.com"]`

También se admiten prefijos de comodín. Por ejemplo, "https://*.example.com". establece coincidencias con example.com y sus subdominios en todos los niveles (p. ej., news.example.com y login.news.example.com). Lo que debes tener en cuenta al utilizar comodines:

Las cadenas de patrón no pueden estar compuestas solo por un comodín y un nivel superior dominio. Por ejemplo, https://.com y https://.co.uk no son válidos. Como se mencionó anteriormente, "https://.example.com" coincide con example.com y sus subdominios. También puedes usar para representar 2 dominios diferentes. Por ejemplo: ["https://example1.com", "https://.example2.com"] coincidencias los dominios example1.com, example2.com y subdominios de example2.com
Los dominios comodín deben comenzar con un esquema https:// seguro, por lo que "*.example.com" no se considera válido.

Si el valor del campo allowed_parent_origin no es válido, el botón de One Tap la inicialización del modo iframe intermedio fallaría y se detendría.

intermediate_iframe_close_callback

Anula el comportamiento intermedio predeterminado de iframe cuando los usuarios cierran One de forma manual. Para presionar, presiona la "X". en la IU de One Tap. El comportamiento predeterminado eliminar inmediatamente el iframe intermedio del DOM.

El campo intermediate_iframe_close_callback solo se aplica en las etapas intermedias modo iframe. Y solo afecta al iframe intermedio, en lugar del Iframe de One Tap. La IU de One Tap se elimina antes de invocar la devolución de llamada.

Tipo	Obligatorio	Ejemplo
función	Opcional	`intermediate_iframe_close_callback: logBeforeClose`

itp_support

Este campo determina si el elemento UX actualizada de One Tap debe habilitarse 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 información:

Tipo	Obligatorio	Ejemplo
boolean	Opcional	`itp_support: true`

login_hint

Si tu aplicación sabe de antemano a qué usuario debe acceder, puede proporcionan una sugerencia de acceso a Google. Si se realiza correctamente, se omitirá la selección de cuenta. Los valores aceptados son los siguientes: 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 OpenID Connect en la documentación de Google Cloud.

Tipo	Obligatorio	Ejemplo
String, una dirección de correo electrónico o el valor de un token de ID `sub`.	Opcional	`login_hint: 'elisa.beckett@gmail.com'`

hd

Cuando un usuario tiene varias cuentas y solo debe acceder con su lugar de trabajo usa esto para darle una pista de nombre de dominio a Google. Si se realiza con éxito, el usuario las cuentas que se muestran durante la selección están limitadas al dominio proporcionado. Un valor comodín: * solo ofrece cuentas de Workspace al usuario y excluye cuentas personales (usuario@gmail.com) durante la selección de la cuenta.

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

Tipo	Obligatorio	Ejemplo
String. Un nombre de dominio completamente calificado o *.	Opcional	`hd: '*'`

use_fedcm_for_prompt

Permitir que el navegador controle los mensajes de acceso del usuario y media el flujo de acceso entre tu sitio web y Google. La configuración predeterminada es "false". Consulta Cómo migrar a 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 invocar 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 a la sesión y la configuración del usuario del lado de Google, es posible que la IU del mensaje de One Tap no sea que se muestra. Para recibir notificaciones sobre el estado de la IU para diferentes momentos, pasa un 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(). El contiene un valor booleano para indicar si la IU está mostrar o no.
Momento omitido: Ocurre cuando una toma automática cierra el mensaje de One Tap. cancelar, una cancelación manual o cuando Google no emite una credencial, como Cuando se sale de Google de la sesión seleccionada.

En estos casos, te recomendamos que continúes con el próximo paso proveedores, si los hay.
Momento descartado: Esto ocurre cuando Google recupera correctamente un o si un usuario quiere detener el flujo de recuperación de credenciales. Para Por ejemplo, cuando el usuario comienza a ingresar su nombre de usuario y contraseña en la cuadro de 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.

Advertencia: Cuando estés en un momento descartado, no pruebes ninguna de las siguientes opciones proveedores.

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 de las Tipo de datos de PromptMomentNotification:

Método
`isDisplayMoment()`	¿Esta notificación corresponde a un momento en que se muestra? Nota: Cuando FedCM se habilitado, no se activa esta notificación. Consulta Migra a FedCM para obtener más información.
`isDisplayed()`	Es una notificación breve y la IU se muestra? Nota: Cuando FedCM se habilitado, no se activa esta notificación. Consulta Migra a FedCM para obtener más información.
`isNotDisplayed()`	¿Esta notificación es solo por un momento en la visualización y la IU no se muestra? Nota: Cuando FedCM se habilitado, no se activa esta notificación. Consulta 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: `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 se habilitado, no se admite este método. Consulta Migra a FedCM para obtener más información.
`isSkippedMoment()`	¿Esta notificación corresponde a un momento omitido?
`getSkippedReason()`	El motivo detallado del momento que se omitió. Los siguientes son valores posibles: `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` Nota: Cuando FedCM se habilitado, no se admite este método. Consulta Migra a FedCM para obtener más información.
`isDismissedMoment()`	¿Es esta notificación por un momento descartado?
`getDismissedReason()`	Es el motivo detallado del descarte. Puedes realizar las siguientes acciones: valores: `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	Muestra una cadena para el tipo de momento. Puedes realizar las siguientes acciones: valores: `display` `skipped` `dismissed`

Tipo de datos: CredentialResponse

Cuando se invoca tu función callback, se crea un objeto CredentialResponse pasado como parámetro. En la siguiente tabla, se indican los campos que se incluyen en el objeto de respuesta de credenciales:

Campo
`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 permiso de Acceder con Google para acceder, y el `state` del botón si se especifica este atributo.

credencial

Este campo es el token de ID como una string de token web JSON (JWT) codificada en base64.

Cuándo decodificados, JWT se ve como el siguiente ejemplo:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

El campo sub es un identificador único a nivel global para la Cuenta de Google. Solo utiliza el campo sub como identificador para el usuario, ya que es único entre todos los Cuentas que nunca se reutilizan. No uses una dirección de correo electrónico como identificador porque una Cuenta de Google puede tener varias direcciones de correo electrónico en distintos momentos.

Usa los campos email, email_verified y hd para determinar si Google y tiene autoridad para una dirección de correo electrónico. En los casos en que Google sea autorizado y se confirmó que el usuario es el propietario legítimo de la cuenta.

Casos en los que Google es confiable:

email tiene un sufijo @gmail.com; esta es una Cuenta de Gmail.
email_verified es verdadero y hd está configurado. Esta es una instancia de Google Workspace. de servicio predeterminada.

Los usuarios pueden registrarse en Cuentas de Google sin usar Gmail ni Google Workspace. Cuando email no contiene un sufijo @gmail.com y no hay hd, Google es no confiables y con contraseñas u otros métodos de verificación, se recomienda verificar al usuario. email_verfied también puede ser verdadero, ya que Google verificó inicialmente el usuario cuando se creó la cuenta de Google, sin embargo, la propiedad de la tercera de correo electrónico del tercero pueden haber cambiado desde entonces.

El campo exp muestra la fecha y hora de vencimiento para que verifiques el token en tu del servidor. Es una hora para el token de ID que se obtuvo de Acceder con Google. Es necesario verificar token antes del vencimiento tiempo. No uses exp para administrar sesiones. Un token de ID vencido no significa que el usuario salió de su cuenta. Tu app es responsable de la sesión la administración de los usuarios.

select_by

En la siguiente tabla, se indican los valores posibles para el campo select_by. El el tipo de botón que se usa junto con la sesión y el estado de consentimiento para establecer la valor,

El usuario presionó el botón One Tap o Acceder con Google, o usó el proceso de acceso automático sin contacto.
Se encontró una sesión existente, o bien el usuario seleccionó y accedió a una Cuenta de Google para establecer una nueva sesión.
Antes de compartir las credenciales del token de ID con tu app, el usuario
- presionó el botón Confirmar para otorgar su consentimiento para compartir credenciales, o
- habían otorgado su consentimiento anteriormente y utilizado la opción Seleccionar una cuenta para elegir un 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 tuvo el consentimiento otorgado anteriormente para compartir credenciales. Solo se aplica a no compatibles con FedCM.
`user`	Un usuario con una sesión existente que ya había otorgado su consentimiento presionaste el botón "Continuar como" de One Tap para compartir credenciales. Se aplica solo a navegadores que no sean compatibles con FedCM.
`fedcm`	Un usuario presionó el botón de One Tap "Continuar como" botón para compartir credenciales con FedCM. Solo se aplica a FedCM compatible navegadores.
`fedcm_auto`	Acceso automático de un usuario con una sesión existente que tuvo se otorgó su consentimiento anteriormente para compartir credenciales con One Tap de FedCM. Solo se aplica a FedCM compatible navegadores.
`user_1tap`	Un usuario con una sesión existente presionó el botón de One Tap “Continuar como”. para otorgar consentimiento y compartir credenciales. Solo se aplica a Chrome v75 y posteriores.
`user_2tap`	Un usuario que no tiene una sesión presionó el botón “Continuar como” con One Tap para seleccionar una cuenta y presionaste el botón Confirmar en una una ventana emergente para otorgar tu consentimiento y compartir credenciales. Se aplica a con navegadores que no sean basados en Chromium.
`btn`	Un usuario con una sesión existente que otorgó su consentimiento con anterioridad presionaste el botón Acceder con Google y seleccionaste una Cuenta de Google de Elegir una cuenta para compartir credenciales.
`btn_confirm`	Un usuario con una sesión existente presionó el botón Acceder con Google y presionaste el botón Confirmar para otorgar tu consentimiento y compartir credenciales.
`btn_add_session`	Un usuario sin una sesión existente que otorgó consentimiento presionó el botón Acceder con Google para seleccionar una Cuenta de Google y compartir credenciales.
`btn_confirm_add_session`	Un usuario que no tiene una sesión existente primero presionó el botón Acceder con Google para seleccionar una Cuenta de Google y, luego, presiona la opción Confirmar para dar consentimiento y compartir credenciales.

state

Este campo solo se define cuando el usuario hace clic en un botón de Acceder con Google para y se especifica el atributo state del botón en el que se hizo clic. El de este campo es el mismo que especificaste en la columna state.

Como se pueden renderizar varios botones de Acceder con Google en la misma página, puedes 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 acceso 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 incluyen los campos y las descripciones de las Tipo de datos de GsiButtonConfiguration:

Atributo
`type`	El tipo de botón: ícono o botón estándar.
`theme`	El tema del botón Por ejemplo, fill_blue o fill_black.
`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`	La forma del botón. Por ejemplo, rectangular o circular.
`logo_alignment`	Alineación del logotipo de Google: izquierda o central
`width`	El ancho del botón en píxeles.
`locale`	Si se establece, se renderiza el idioma del botón.
`click_listener`	Si está configurada, se llama a esta función cuando se activa Acceder con Google se hace clic en el botón correspondiente.
`state`	Si se establece, esta cadena muestra el token de ID.

Tipos de atributos

Las siguientes secciones contienen detalles sobre cada tipo de 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
string	Sí	`type: "icon"`

La siguiente tabla incluye los tipos de botones disponibles y su descripciones:

Tipo
`standard`	Botón con texto o información personalizada.
`icon`	Un botón de ícono sin texto

tema

El tema del botón El valor predeterminado es outline. Consulta la siguiente tabla para ver más información:

Tipo	Obligatorio	Ejemplo
string	Opcional	`theme: "filled_blue"`

La siguiente tabla incluye los temas disponibles y sus descripciones:

Tema
`outline`	Un tema de botón estándar
`filled_blue`	Un tema de botones de color azul.
`filled_black`	Tema de botones rellenos de negro

tamaño

El tamaño del botón. El valor predeterminado es large. Consulta la siguiente tabla para ver más información:

Tipo	Obligatorio	Ejemplo
string	Opcional	`size: "small"`

En la siguiente tabla, se incluyen 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

El texto del botón El valor predeterminado es signin_with. No hay imágenes Diferencias en el texto de los botones de íconos que tienen diferentes atributos text La única excepción es cuando el texto se lee por motivos de accesibilidad en 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 indican todos los textos de botones disponibles y sus respectivas 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

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 incluyen las formas de botones disponibles y sus descripciones:

Forma
`rectangular`	El botón con forma rectangular. Si se usa para `icon` tipo de botón, es lo mismo que `square`.
`pill`	El botón con forma de píldora. Si se usa para el botón `icon` tipo, entonces es lo mismo que `circle`.
`circle`	El botón con forma de círculo. Si se usa para `standard` tipo de botón, es lo mismo que `pill`.
`square`	El botón con forma cuadrada Si se usa para `standard` tipo de botón, es lo mismo que `rectangular`.

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 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 a la izquierda el logotipo de Google.
`center`	Alinea al centro el logotipo de Google.

ancho

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. Mostrar el texto del botón con la configuración regional especificada; de lo contrario, se establecerá de forma predeterminada la Cuenta de Google del usuario o la configuración del navegador. Agrega el parámetro hl y código de lenguaje a la directiva src cuando se carga la biblioteca, por ejemplo: gsi/client?hl=<iso-639-code>

Si no está establecida, la configuración regional predeterminada del navegador o la del usuario preferencia. Por lo tanto, los distintos usuarios podrían ver distintas versiones 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 inicia Acceder con Google se hace clic en el botón 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, se registra el mensaje Se hizo clic en el botón de Acceder con Google... a 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 el mismo puedes asignar a cada botón una cadena única. La misma cadena junto con el token de ID, para que puedas identificar el botón hiciste clic 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 el native_callback se invoca una función, se pasa un objeto Credential como parámetro. El siguiente tabla, se enumeran los campos contenidos en el objeto:

Campo
`id`	Identifica al usuario.
`password`	La contraseña

Método: google.accounts.id.disableAutoSelect

Cuando el usuario sale de tu sitio web, debes llamar al método google.accounts.id.disableAutoSelect para registrar el estado en las cookies. Esta y evita el bucle muerto de UX. Observa el siguiente fragmento de código del método:

google.accounts.id.disableAutoSelect()

En el siguiente ejemplo de código, se implementa 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 del método store() de la configuración nativa del navegador. API de administrador de credenciales. Por lo tanto, solo se puede usar para almacenar de Google Cloud. 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 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 usuario de confianza. DOM 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 la firma Se cargó la biblioteca JavaScript con Google:

window.onGoogleLibraryLoad = () => {
    ...
};

Esta devolución de llamada es solo un atajo para la devolución de llamada window.onload. No hay diferentes 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 para el usuario especificado. Observa 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 la carga útil de credencial.
`callback`	función	Controlador RevocationResponse opcional.

En la siguiente muestra de código, se muestra cómo usar el método revoke con un ID.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Tipo de datos: RevocationResponse

Cuando se invoca tu función callback, se crea un objeto RevocationResponse pasado como parámetro. En la siguiente tabla, se indican 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`	De manera opcional, este campo contiene un mensaje de respuesta de error detallado.

correcto

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

error

Este campo es un valor de cadena y contiene un mensaje de error detallado si la revocación la llamada al método falló, no está definida en caso de éxito.