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.inicializar

El método google.accounts.id.initialize inicializa el cliente de Acceder con Google según el objeto de configuración. Consulta el siguiente ejemplo de código del método:

google.accounts.id.initialize(IdConfiguration)

En el siguiente ejemplo de código, se implementa el método google.accounts.id.initialize con una función onload:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

El método google.accounts.id.initialize crea una instancia de cliente de Acceder con Google que todos los módulos de la misma página web pueden usar de manera implícita.

  • Solo debes llamar al método google.accounts.id.initialize una vez, incluso si usas varios módulos (como One Tap, Botón personalizado, revocación, etc.) en la misma página web.
  • Si llamas al método google.accounts.id.initialize varias veces, solo se recordarán y usarán las configuraciones de la última llamada.

En realidad, restableces la configuración cada vez que llamas al método google.accounts.id.initialize, y todos los métodos posteriores en la misma página web usan de inmediato las 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 La función de JavaScript que controla los tokens de ID. Google One Tap y el modo de UX del botón Acceder con Google popup usan este atributo.
login_uri La URL del extremo de acceso. El modo de UX del botón Acceder con Google redirect usa este atributo.
native_callback La función de JavaScript que controla las credenciales de contraseña.
cancel_on_tap_outside Cancela el mensaje si el usuario hace clic fuera de él.
prompt_parent_id ID del DOM del elemento del contenedor del mensaje de One Tap
nonce Una cadena aleatoria para tokens de ID
context El título y las palabras del 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 Los orígenes que tienen permitido incorporar el iframe intermedio. One Tap se ejecuta en el modo intermedio de iframe si está presente este campo.
intermediate_iframe_close_callback Anula el comportamiento predeterminado del iframe intermedio cuando los usuarios cierran One Tap de forma manual.
itp_support Habilita la UX actualizada de One Tap en los navegadores ITP.
login_hint Proporciona una sugerencia para el usuario a fin de omitir la selección de cuenta.
hd Limita la selección de cuentas por dominio.
use_fedcm_for_prompt Permite que el navegador controle los mensajes de acceso de los usuarios y media el flujo de acceso entre tu sitio web y Google.

client_id

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

Tipo Obligatorio Ejemplo
cadena client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

Este campo determina si se muestra automáticamente un token de ID sin interacción del usuario cuando solo hay una sesión de Google que aprobó la app anteriormente. El valor predeterminado es false. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
boolean Opcional auto_select: true

callback

Este campo es la función de JavaScript que controla el token de ID que muestra el mensaje de One Tap o la ventana emergente. Este atributo es obligatorio si se usa el modo de UX del botón Acceder con Google popup o de Google One Tap. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
la función Se requiere para One Tap y el modo de UX popup callback: handleResponse

login_uri

Este atributo es el URI del 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 API 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 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 cuando se configura ux_mode: "redirect".
login_uri="https://www.example.com/login"

Tu extremo de acceso debe controlar las solicitudes POST que contengan una clave credential y un valor de token de ID en el cuerpo.

La siguiente es una solicitud de ejemplo para 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 muestra el administrador de credenciales nativo del navegador. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
la función Opcional native_callback: handleResponse

cancel_on_tap_outside

Este campo establece si se cancela o no la solicitud de One Tap si un usuario hace clic fuera del mensaje. El valor predeterminado es true. Puedes inhabilitarla si configuras el valor en false. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
boolean Opcional cancel_on_tap_outside: false

prompt_parent_id

Este atributo establece el ID del DOM del elemento del contenedor. Si no está configurado, se mostrará el mensaje de One Tap en la esquina superior derecha de la ventana. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
cadena Opcional prompt_parent_id: 'parent_id'

nonce

Este campo es una cadena aleatoria que usa el token de ID para evitar ataques de repetición. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
cadena Opcional nonce: "biaqbm70g23"

La longitud del nonce se limita al tamaño máximo de JWT admitido por tu entorno y las restricciones de tamaño HTTP individuales del navegador y del servidor.

Contexto

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

Tipo Obligatorio Ejemplo
cadena Opcional context: "use"

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

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

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

Tipo Obligatorio Ejemplo
cadena Opcional state_cookie_domain: "example.com"

ux_mode

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

Tipo Obligatorio Ejemplo
cadena Opcional ux_mode: "redirect"

En la siguiente tabla, se enumeran los modos de UX disponibles y sus descripciones.

Modo UX
popup Realiza el flujo de UX de acceso en una ventana emergente.
redirect Realiza el flujo de UX de acceso mediante un redireccionamiento de página completa.

allowed_parent_origin

Los orígenes que tienen permitido incorporar el iframe intermedio. One Tap se ejecuta en el modo intermedio de iframe si está presente este campo. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
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 valor
string Un URI de dominio único. "https://example.com"
string array Es un array de URI de dominio. ["https://news.example.com", "https://local.example.com"]

También se admiten prefijos comodín. Por ejemplo, "https://*.example.com" coincide con example.com y sus subdominios en todos los niveles (p. ej., news.example.com y login.news.example.com). Ten en cuenta lo siguiente cuando uses comodines:

  • Las strings 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 con 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 consiste en quitar el iframe intermedio del DOM de inmediato.

El campo intermediate_iframe_close_callback solo se aplica en el modo intermedio de iframe. Además, tiene impacto solo en el iframe intermedio, en lugar del iframe de One Tap. Se quita la IU de One Tap antes de invocar la devolución de llamada.

Tipo Obligatorio Ejemplo
la función Opcional intermediate_iframe_close_callback: logBeforeClose

itp_support

Este campo determina si se debe habilitar la UX actualizada de One Tap en navegadores compatibles con la Prevención de seguimiento inteligente (ITP). El valor predeterminado es false. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
boolean Opcional itp_support: true

login_hint

Si tu aplicación sabe de antemano con qué usuario debe acceder, puede proporcionar una sugerencia de acceso a Google. Si la operación se realiza correctamente, se omitirá la selección de cuentas. Se aceptan los siguientes valores: una dirección de correo electrónico o un valor de campo sub del token de ID.

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

Tipo Obligatorio Ejemplo
String, una dirección de correo electrónico o el valor de un campo sub de un 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 ejecuta de forma correcta, las cuentas de usuario que se muestran durante la selección de cuentas se limitan al dominio proporcionado. Un valor comodín: * solo ofrece cuentas de Workspace al usuario y excluye las cuentas personales (user@gmail.com) durante la selección de la cuenta.

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

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

use_fedcm_for_prompt

Permite que el navegador controle los mensajes de acceso de los usuarios y media el flujo de acceso entre tu sitio web y Google. La configuración predeterminada es "false". Consulta la página 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 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. Si quieres recibir notificaciones sobre el estado de la IU para diferentes momentos, pasa una función para recibir notificaciones sobre el estado de la IU.

Las notificaciones se activan en los siguientes momentos:

  • Momento de visualización: Esto ocurre después de que se llama al método prompt(). La notificación contiene un valor booleano para indicar si se muestra o no la IU.
  • Momento omitido: Esto ocurre cuando se cierra el mensaje de One Tap por una cancelación automática o manual, 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 hay alguno.

  • Momento descartado: Esto ocurre cuando Google recupera una credencial de forma correcta o un usuario desea detener el flujo de recuperación de credenciales. Por ejemplo, cuando el usuario comienza a ingresar su nombre de usuario y contraseña en el diálogo de acceso, puedes llamar al método google.accounts.id.cancel() para cerrar el mensaje de One Tap y activar un momento descartado.

En el siguiente ejemplo de código, se implementa el momento omitido:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Tipo de datos: PromptMomentNotification

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

Método
isDisplayMoment() ¿Esta notificación es para un momento de visualización?

Nota: Cuando FedCM está habilitado, esta notificación no se activa. Consulta la página Cómo migrar a FedCM para obtener más información.
isDisplayed() ¿Esta notificación es para un momento de visualización y se muestra la IU?

Nota: Cuando FedCM está habilitado, esta notificación no se activa. Consulta la página Cómo migrar a FedCM para obtener más información.
isNotDisplayed() ¿Esta notificación es para un momento de visualización y no se muestra la IU?

Nota: Cuando FedCM está habilitado, esta notificación no se activa. Consulta la página Cómo migrar a FedCM para obtener más información.
getNotDisplayedReason()

Es el motivo detallado por el que no se muestra la IU. A continuación, se muestran 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 Cómo migrar a FedCM para obtener más información.
isSkippedMoment() ¿Esta notificación es de un momento omitido?
getSkippedReason()

La razón detallada del momento omitido. A continuación, se muestran 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 Cómo migrar a FedCM para obtener más información.
isDismissedMoment() ¿La notificación corresponde a un momento descartado?
getDismissedReason()

Indica el motivo detallado del descarte. Los siguientes son valores posibles:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

Muestra una cadena para el tipo de momento. Los siguientes son 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 encuentran en el objeto de respuesta de credencial:

Campo
credential Este campo es el token de ID que se muestra.
select_by Este campo establece cómo se selecciona la credencial.

credencial

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

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

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

El campo sub es un identificador único a nivel global de la Cuenta de Google. Solo usa el campo sub como identificador para el usuario, ya que es único entre todas las Cuentas de Google y nunca se reutiliza. No uses 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 si es autoritaria. En los casos en los que Google tiene autoridad, se confirma que el usuario es el propietario legítimo de la cuenta.

Casos en los que Google es autorizado:

  • email tiene el sufijo @gmail.com. Esta es una cuenta de Gmail.
  • email_verified es verdadero y hd está configurado. Esta es una cuenta de Google Workspace.

Los usuarios pueden registrarse en Cuentas de Google sin usar Gmail o Google Workspace. Cuando email no contiene el sufijo @gmail.com y hd está ausente, Google no tiene autoridad y se recomienda usar contraseñas o cualquier otro método de desafío para verificar al usuario. email_verfied también puede ser verdadera, ya que Google verificó inicialmente al usuario cuando se creó la Cuenta de Google. Sin embargo, es posible que la propiedad de la cuenta de correo electrónico de terceros haya cambiado desde entonces.

El campo exp muestra la fecha y hora de vencimiento para que verifiques el token en tu servidor. El token de ID que se obtiene de Acceder con Google equivale a una hora. Debes verificar el token antes de su vencimiento. No uses exp para la administración de sesiones. Un token de ID vencido no significa que el usuario salió de la cuenta. Tu app es responsable de administrar 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 utilizan para establecer el valor,

  • El usuario presionó el botón One Tap o Acceder con Google, o bien usó el proceso de acceso automático sin contacto.

  • Se encontró una sesión existente o se seleccionó al usuario y este accedió a una Cuenta de Google para establecer una sesión nueva.

  • Antes de compartir las credenciales del token de ID con tu app, el usuario puede

    • presionaron el botón Confirmar para otorgar su consentimiento y compartir las credenciales
    • ya había otorgado 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 antes había otorgado consentimiento para compartir credenciales.
user Un usuario con una sesión existente que había otorgado su consentimiento presionó el botón "Continuar como" de One Tap para compartir las credenciales.
user_1tap Un usuario con una sesión existente presionó el botón “Continuar como” con One Tap para otorgar su consentimiento y compartir credenciales. Se aplica solo a Chrome v75 y versiones posteriores.
user_2tap Un usuario sin una sesión existente presionó el botón "Continuar como" con One Tap para seleccionar una cuenta y, luego, el botón Confirmar en una ventana emergente para otorgar su consentimiento y compartir credenciales. Se aplica a los navegadores que no son basados en Chromium.
btn Un usuario con una sesión existente 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 con una sesión existente presionó el botón Acceder con Google y el botón Confirmar para otorgar consentimiento y compartir credenciales.
btn_add_session Un usuario que no tiene una sesión existente y que había otorgado su consentimiento presionó el botón Acceder con Google para seleccionar una Cuenta de Google y compartir las credenciales.
btn_confirm_add_session Un usuario sin una sesión existente presionó el botón Acceder con Google para seleccionar una Cuenta de Google y, luego, el botón Confirmar para dar su consentimiento y compartir las credenciales.

Método: google.accounts.id.renderButton

El método google.accounts.id.renderButton renderiza un botón de Acceder con Google en tus páginas web.

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

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

Tipo de datos: GsiButtonConfiguration

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

Atributo
type El tipo de botón: ícono o botón estándar
theme El tema del botón Por ejemplo, relleno_azul o negro_relleno.
size El tamaño del botón. Por ejemplo, pequeña 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 centro
width Es el ancho del botón en píxeles.
locale Si se configura, se renderiza el idioma del botón.
click_listener Si se configura, se llama a esta función cuando se hace clic en el botón Acceder con Google.

Tipos de atributos

Las siguientes secciones contienen detalles sobre el tipo de cada 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
cadena 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

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

Tipo Obligatorio Ejemplo
cadena Opcional theme: "filled_blue"

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

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

size

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

Tipo Obligatorio Ejemplo
cadena Opcional size: "small"

En la siguiente tabla, se enumeran los tamaños de botones disponibles y sus descripciones:

Tamaño
large
Un botón estándar grande Un botón de ícono grande Un botón grande y personalizado
Un botón grande.
medium
Un botón estándar mediano Un botón de ícono mediano
Un botón de tamaño mediano
small
Un botón pequeño Un botón de ícono pequeño
Un botón pequeño.

text

El texto del botón El valor predeterminado es signin_with. No hay diferencias visuales para el texto de los botones del ícono que tienen diferentes atributos text. La única excepción es cuando el texto se lee con fines de accesibilidad de la pantalla.

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

Tipo Obligatorio Ejemplo
cadena Opcional text: "signup_with"

En la siguiente tabla, se enumeran los textos de los 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

La forma del botón El valor predeterminado es rectangular. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
cadena Opcional shape: "rectangular"

En la siguiente tabla, se enumeran las formas de botones disponibles y sus descripciones:

Forma
rectangular
El botón con forma 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 de forma cuadrada 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
cadena 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 el logotipo de Google al centro.

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
cadena Opcional width: "400"

configuración regional

Opcional. Muestra el texto del botón con la configuración regional especificada; de lo contrario, se muestra de forma predeterminada la Cuenta de Google del usuario o la configuración del navegador. 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, los distintos usuarios pueden ver diferentes versiones de botones localizados y, posiblemente, con diferentes tamaños.

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

Tipo Obligatorio Ejemplo
cadena Opcional locale: "zh_CN"

click_listener

Puedes definir una función de JavaScript a la que se llamará cuando se haga clic en el botón Acceder con Google mediante el atributo click_listener.

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

En este ejemplo, el mensaje Botón de acceso con Google hecho clic... se registra en la consola cuando se hace clic en el botón Acceder con Google.

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 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 cookies. Esto evita un bucle muerto en la UX. Consulta el siguiente fragmento de código del método:

google.accounts.id.disableAutoSelect()

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

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Método: google.accounts.id.storeCredential

Este método es un wrapper para el método store() de la API 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. 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 envía una notificación después de que se carga la biblioteca JavaScript de Acceder con Google:

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

Esta devolución de llamada es solo un atajo para la devolución de llamada window.onload. No hay diferencias en el comportamiento.

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

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

Método: google.accounts.id.revoke

El método google.accounts.id.revoke revoca el otorgamiento de OAuth que se usó para compartir el token de ID del usuario especificado. 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 cadena Es la dirección de correo electrónico o el ID único de la Cuenta de Google del usuario. El ID es la propiedad sub de la carga útil de credencial.
callback la función Controlador RevocationResponse opcional.

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

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

Tipo de datos: RevocationResponse

Cuando se invoca tu función callback, se pasa un objeto RevocationResponse como parámetro. En la siguiente tabla, se enumeran los campos que contiene 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.

correcto

Este campo es un valor booleano que se establece como verdadero si la llamada al método de revocación se realizó correctamente o como falso si se produce un 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 falla, ya que no está definido cuando se realiza correctamente.