Google Identity Services está migrando a las APIs de FedCM. Sigue la guía de migración para revisar posibles cambios y evitar efectos negativos en el acceso de los usuarios a tu sitio web.

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 JavaScript de Sign-In. Puedes usar esta API para mostrar el mensaje de One Tap 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 de 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.) 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 las configuraciones 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 las configuraciones nuevas.

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. Google One Tap y el modo de UX `popup` del botón Acceder con Google usan este atributo.
`login_uri`	La URL de tu extremo de acceso El modo de UX del botón Acceder con Google `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`	El ID de DOM del elemento del contenedor del mensaje de One Tap
`nonce`	Una cadena aleatoria para los 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 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`	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 de One Tap actualizada en los navegadores de ITP.
`login_hint`	Proporciona una sugerencia para el 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.
`enable_redirect_uri_validation`	Habilita el flujo de redireccionamiento de botones que cumpla con las reglas de validación de URI de redireccionamiento.

client_id

Este campo es el ID de cliente de tu aplicación, que se encuentra y crea en la consola de Google Cloud. Consulta la siguiente tabla para obtener más información:

Tipo	Obligatorio	Ejemplo
string	Sí	`client_id: "CLIENT_ID.apps.googleusercontent.com"`

auto_select

Este campo determina si se muestra 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 desde el mensaje de One Tap o la ventana emergente. Este atributo es obligatorio si se usa el modo de UX de popup de Google One Tap o el 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 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 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.

Se puede omitir este atributo 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 de 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 extremo de acceso debe controlar las solicitudes POST que contienen una clave credential con un valor de token de ID en el cuerpo.

El siguiente es un ejemplo de solicitud a tu extremo de acceso:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

native_callback

Este campo es el nombre de la función de JavaScript que controla la credencial de contraseña que se muestra desde el administrador de credenciales nativo 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

En este campo, se establece si se cancela o no la solicitud de One Tap si un usuario hace clic fuera del mensaje. El valor predeterminado es true. Puedes 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 de DOM del elemento contenedor. Si no está configurado, el mensaje de One Tap se mostrará 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 HTTP individuales del navegador y el servidor.

Contexto

Este campo cambia el texto del título y los mensajes en el mensaje de One Tap. Consulta la siguiente tabla para obtener más información:

Tipo	Obligatorio	Ejemplo
string	Opcional	`context: "use"`

En la siguiente tabla, se enumeran todos los contextos disponibles y sus descripciones:

Contexto
`signin`	"Acceder con Google"
`signup`	"Regístrate con Google"
`use`	"Usar con Google"

state_cookie_domain

Si necesitas mostrar One Tap en el dominio superior y sus subdominios, pasa el dominio superior a este campo para que se use una sola cookie de estado compartido. Consulta la siguiente tabla para obtener más información:

Tipo	Obligatorio	Ejemplo
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 ningún impacto en la UX de OneTap. 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 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. 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`	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 de 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. Como se indicó anteriormente, "https://.example.com" coincide con example.com y sus subdominios. También puedes usar un array para representar 2 dominios diferentes. Por ejemplo, ["https://example1.com", "https://.example2.com"] coincide con los dominios example1.com, example2.com y los subdominios de example2.com.
Los dominios de comodín deben comenzar con un esquema https:// seguro, por lo que "*.example.com" se considera no válido.

Si el valor del campo allowed_parent_origin no es válido, la inicialización 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 presionan el botón "X" en la IU de One Tap para cerrarlo de forma manual. 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. Además, 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: true`

login_hint

Si tu aplicación sabe de antemano qué usuario debe acceder, puede proporcionar una sugerencia de acceso a Google. Si se realiza correctamente, se 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
Cadena, una dirección de correo electrónico o el valor de un campo `sub` de token de ID	Opcional	`login_hint: 'elisa.beckett@gmail.com'`

hd

Cuando un usuario tiene varias cuentas y solo debe acceder con su cuenta de Workspace, usa esto para proporcionar una sugerencia de nombre de dominio a Google. Si se realiza correctamente, las cuentas de usuario que se muestran durante la selección de cuentas se limitan al dominio proporcionado. Un valor de comodín: * solo ofrece cuentas de Workspace al usuario y excluye las cuentas de consumidor (usuario@gmail.com) durante la selección de cuentas.

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

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

use_fedcm_for_prompt

Permite que el navegador controle 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`

enable_redirect_uri_validation

Habilita el flujo de redireccionamiento de botones que cumpla con las reglas de validación de URI de redireccionamiento.

Tipo	Obligatorio	Ejemplo
booleano	Opcional	`enable_redirect_uri_validation: true`

Método: google.accounts.id.prompt

El método google.accounts.id.prompt muestra el mensaje de One Tap o el administrador de credenciales nativo del navegador después de que se invoca el método initialize(). Consulta el siguiente ejemplo de código del método:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Por lo general, se llama al método prompt() cuando se carga la página. Debido al estado de la sesión y la configuración del usuario de Google, es posible que no se muestre la IU del mensaje de One Tap. Para recibir notificaciones sobre el estado de la IU en diferentes momentos, pasa una función para recibir notificaciones de estado de la IU.

Las notificaciones se activan en los siguientes momentos:

Momento de visualización: Ocurre 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: Ocurre cuando una cancelación automática o manual cierra el mensaje de One Tap, o cuando Google no emite una credencial, por ejemplo, cuando la sesión seleccionada salió de Google.

En estos casos, te recomendamos que continúes con los siguientes proveedores de identidad, si los hay.
Momento de descarte: 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 estés en un momento de inactividad, 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>

Tipo de datos: PromptMomentNotification

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

Método
`isDisplayMoment()`	¿Esta notificación es para un momento de la pantalla? 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()`	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 de un momento omitido?
`getSkippedReason()`	El motivo detallado del momento omitido 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()`	El motivo detallado del despido Los siguientes son los valores posibles: `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	Muestra 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 incluyen los campos que se contienen 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 botón Acceder con Google para acceder y se especifica el atributo `state` del botón.

credencial

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

Cuando se decodifica, el JWT se ve como el siguiente ejemplo:

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

El campo sub es un identificador único a nivel global para la Cuenta de Google. Solo usa el campo sub como identificador del usuario, ya que es único entre todas las Cuentas de Google y nunca se reutiliza. 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.

Con los campos email, email_verified y hd, puedes determinar si Google aloja una dirección de correo electrónico y es la fuente de autoridad. En los casos en los que Google es la fuente de autoridad, se confirma que el usuario es el propietario legítimo de la cuenta.

Casos en los que Google es la fuente de autoridad:

email tiene un sufijo @gmail.com, es una cuenta de Gmail.
Si email_verified es verdadero y hd está configurado, se trata de una cuenta de Google Workspace.

Los usuarios pueden registrarse en 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 confiable y se recomienda usar una contraseña o algún otro método de desafío para verificar al usuario. email_verfied también puede ser verdadero, ya que Google verificó inicialmente al usuario cuando se creó la Cuenta de Google. Sin embargo, es posible que la propiedad de la cuenta de correo electrónico de terceros haya cambiado.

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 del tiempo de vencimiento. No uses exp para la administración de sesiones. Un token de ID vencido no significa que el usuario salió de su cuenta. Tu app es responsable de la administración de las sesiones de tus usuarios.

select_by

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

El usuario presionó el botón One Tap o Acceder con Google, o bien usó el proceso de acceso automático sin contacto.
Se encontró una sesión existente o el usuario seleccionó una Cuenta de Google y accedió a ella para establecer una sesión nueva.
Antes de compartir credenciales de token de ID con tu app, el usuario puede hacer lo siguiente:
- presionaron el botón Confirmar para dar su consentimiento para compartir credenciales.
- había otorgado previamente su consentimiento y usó la opción Seleccionar una cuenta para elegir una Cuenta de Google.

El valor de este campo se establece en uno de estos tipos:

Valor	Descripción
`auto`	Acceso automático de un usuario con una sesión existente que ya había otorgado 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 anteriormente había otorgado su consentimiento presionó el botón "Continuar como" de One Tap para compartir 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 ya había otorgado 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 "Continuar como" de One Tap 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 "Continuar como" de One Tap para seleccionar una cuenta y, luego, presionó el botón Confirmar en una ventana emergente para otorgar su consentimiento y compartir las credenciales. Se aplica a los navegadores que no son de Chromium.
`itp`	Un usuario con una sesión existente que ya había otorgado su consentimiento presionó el botón de un toque en los navegadores de ITP.
`itp_confirm`	Un usuario con una sesión existente presionó One Tap en navegadores ITP y presionó el botón Confirmar para otorgar consentimiento y compartir credenciales.
`itp_add_session`	Un usuario sin una sesión existente que anteriormente otorgó su consentimiento presionó el botón de un toque en los navegadores de ITP para seleccionar una Cuenta de Google y compartir credenciales.
`itp_confirm_add_session`	Un usuario sin una sesión existente primero presionó el botón One Tap en los navegadores de 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 anteriormente otorgó su consentimiento presionó el botón Acceder con Google y seleccionó una Cuenta de Google en "Elegir una cuenta" para compartir credenciales.
`btn_confirm`	Un usuario con una sesión existente presionó el botón Acceder con Google y el botón Confirmar para otorgar su consentimiento y compartir credenciales.
`btn_add_session`	Un usuario sin una sesión existente que anteriormente otorgó consentimiento 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 las credenciales.

state

Este campo solo se define cuando el usuario hace clic en un botón 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 Acceder con Google en tus páginas web.

Consulta el siguiente ejemplo de código del método:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Tipo de datos: GsiButtonConfiguration

En la siguiente tabla, se enumeran los campos y las descripciones del tipo de datos GsiButtonConfiguration:

Atributo
`type`	El tipo de botón: ícono o botón estándar.
`theme`	El tema del botón. Por ejemplo, relleno_azul o relleno_negro.
`size`	Es el tamaño del botón. Por ejemplo, pequeño o grande.
`text`	El texto del botón Por ejemplo, "Acceder con Google" o "Regístrate 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 muestra 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

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`	Es un 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 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`	Es un tema de botón estándar.
`filled_blue`	Un tema de botón con relleno azul.
`filled_black`	Un tema de botón con relleno 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

El texto del botón El valor predeterminado es signin_with. No hay diferencias visuales para el texto de los botones de íconos que tienen diferentes atributos text. La única excepción es cuando 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 "Regístrate 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 cuadrado. Si se usa para el tipo de botón `standard`, 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:

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 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 está establecida, 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 versiones diferentes de 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 a la que se llamará 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á 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 la 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 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 del administrador de credenciales nativo del navegador. Por lo tanto, solo se puede usar para almacenar una credencial de contraseña. Consulta el siguiente ejemplo de código del método:

google.accounts.id.storeCredential(Credential, callback)

En el siguiente ejemplo de código, se implementa el método google.accounts.id.storeCredential con una función onSignIn():

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Método: google.accounts.id.cancel

Puedes cancelar el flujo de One Tap si quitas el mensaje del DOM del usuario de confianza. Se ignora la operación de cancelación 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>

Llamada a función de 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 atajo para la devolución de llamada window.onload. No hay diferencias en el comportamiento.

En el siguiente ejemplo de código, se implementa una devolución de llamada onGoogleLibraryLoad:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Método: google.accounts.id.revoke

El método google.accounts.id.revoke revoca la concesión 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 muestra cómo usar el método revoke con un ID.

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

Tipo de datos: RevocationResponse

Cuando se invoca tu función callback, se pasa un objeto RevocationResponse como parámetro. En la siguiente tabla, se enumeran los campos que se incluyen en el objeto de respuesta de revocación:

Campo
`successful`	Este campo es el valor que se muestra de la llamada al método.
`error`	De manera opcional, este campo contiene un mensaje de respuesta de error detallado.

correcta

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

error

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