En esta página de referencia, se describe la API de JavaScript de acceso. 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 en función del objeto de configuración. Consulta el siguiente ejemplo de código del método:
google.accounts.id.initialize(IdConfiguration)
En el siguiente ejemplo de código, se implementa el método google.accounts.id.initialize con una función onload:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
El método google.accounts.id.initialize crea una instancia de cliente de Acceder con Google que pueden usar de forma implícita todos los módulos de la misma página web.
- Solo debes llamar al método
google.accounts.id.initializeuna vez, incluso si usas varios módulos (como One Tap, el botón Personalized, revocación, etc.) en la misma página web. - Si llamas al método
google.accounts.id.initializevarias veces, solo se recordará y usará la configuración de la última llamada.
Puedes restablecer las configuraciones cada vez que llames al método google.accounts.id.initialize, y todos los métodos posteriores en la misma página web usarán las nuevas configuraciones de inmediato.
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 botón de Acceso con Google popup modo UX usan este atributo. |
login_uri |
La URL de su extremo de acceso. Botón redirect de Acceder con Google. El modo de UX usa este atributo. |
native_callback |
La función de JavaScript que maneja las credenciales de contraseña. |
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 string 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 Acceder con Google |
allowed_parent_origin |
Los orígenes permitidos para incorporar el iframe intermedio. One Tap se ejecutará en el modo de iframe intermedio si se presenta este campo. |
intermediate_iframe_close_callback |
Anula el comportamiento predeterminado de iframe intermedio cuando los usuarios cierran One Tap de forma manual. |
itp_support |
Habilita la UX actualizada de One Tap en navegadores ITP. |
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 | Obligatoria | Ejemplo |
|---|---|---|
| string | Sí | client_id: "CLIENT_ID.apps.googleusercontent.com" |
selección automática
Este campo determina si se muestra un token de ID automáticamente sin ninguna interacción del usuario cuando solo hay una sesión de Google que aprobó tu app con anterioridad. El valor predeterminado es false. Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | 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 popup del botón de Google One o de Acceder con Google.
Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| función | Obligatorio para One Tap y el modo de UX popup |
callback: handleResponse |
acceso_uri
Este atributo es el URI de tu extremo de acceso. 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 credencial del token de ID se publica en el 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 manejar las solicitudes POST que contienen una clave credential con 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
callback_nativo
Este campo es el nombre de la función de JavaScript que maneja la credencial de la contraseña que muestra el administrador de credenciales nativo del navegador. Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| función | Opcional | native_callback: handleResponse |
cancelar_al_presionar afuera
Este campo establece si se debe cancelar la solicitud de One Tap si un usuario hace clic fuera del mensaje. El valor predeterminado es true. Puedes inhabilitarla si configuras el valor como false. Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| boolean | Opcional | cancel_on_tap_outside: false |
id_superior_mensaje
Este atributo establece el ID del DOM del elemento contenedor. Si no está configurado, se muestra el mensaje de One Tap en la esquina superior derecha de la ventana. Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | prompt_parent_id: 'parent_id' |
nonce
Este campo es una string aleatoria que utiliza el token de ID para evitar ataques de repetición. Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | nonce: "biaqbm70g23" |
La longitud del nonce se limita al tamaño máximo de JWT compatible con tu entorno, así como a las restricciones de tamaño individual del navegador y del servidor HTTP.
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 | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | context: "use" |
En la siguiente tabla, se enumeran los contextos disponibles y sus descripciones:
| Contexto | |
|---|---|
signin |
"Acceder con Google" |
signup |
"Registrarse con Google" |
use |
"Usar con Google" |
dominio_cookie_estado
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 | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | state_cookie_domain: "example.com" |
Modo de UX
Usa este campo para configurar el flujo de UX que usa 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 | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | ux_mode: "redirect" |
En la siguiente tabla, se enumeran los modos de UX disponibles y sus descripciones.
| Modo de UX | |
|---|---|
popup |
Realiza el flujo de UX de acceso en una ventana emergente. |
redirect |
Realiza el flujo de UX de acceso mediante el redireccionamiento de página completa. |
origen_superior_permitido
Los orígenes permitidos para incorporar el iframe intermedio. Un toque se ejecutará en el modo iframe intermedio si se muestra este campo. Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| string o arreglo 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 |
Un arreglo 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" coincidirá 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 strings de patrones no pueden estar compuestas solo por un comodín y un dominio de nivel superior. Por ejemplo,
https://*.comyhttps://*.co.ukno son válidos. Como se señaló anteriormente,"https://*.example.com"coincidirá conexample.comy sus subdominios. También puedes usar un array para representar 2 dominios diferentes. Por ejemplo,["https://example1.com", "https://*.example2.com"]coincidirá con los dominiosexample1.com,example2.comy subdominios deexample2.com. - Los dominios comodín deben comenzar con un esquema https:// seguro.
"*.example.com"se considerará no válido.
Si el valor del campo allowed_parent_origin no es válido, la inicialización de One Tap del modo iframe intermedio fallará y se detendrá.
devolución de llamada intermedio_iframe_close
Anula el comportamiento predeterminado de iframe intermedio cuando los usuarios cierran One Tap de forma manual presionando el botón “X” en la IU de One Tap. El comportamiento predeterminado es quitar el iframe intermedio del DOM de inmediato.
El campo intermediate_iframe_close_callback solo se aplica en el modo intermedio de iframe. Y solo tiene impacto en el iframe intermedio, en lugar del iframe One Tap. Se quita la IU de One Tap antes de invocar la devolución de llamada.
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| función | Opcional | intermediate_iframe_close_callback: logBeforeClose |
soporte de itp
Este campo determina si se debe habilitar la
UX mejorada de One Tap en los 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 | Obligatoria | Ejemplo |
|---|---|---|
| boolean | Opcional | itp_support: 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 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 un toque. Si quieres recibir notificaciones sobre el estado de la IU en diferentes momentos, pasa una función para recibir notificaciones sobre el estado de la IU.
Las notificaciones se activan en los siguientes momentos:
- Momento de visualización: 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 un mensaje de One Tap mediante una cancelación automática o manual, o cuando Google no puede emitir una credencial, como 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 descartar: Esto ocurre cuando Google recupera correctamente una credencial 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 que se omitió:
<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() |
¿Se muestra esta notificación para un momento específico? |
isDisplayed() |
¿Se muestra esta notificación por un momento y se muestra la IU? |
isNotDisplayed() |
¿Se muestra esta notificación por un momento y no se muestra la IU? |
getNotDisplayedReason() |
Es el motivo detallado por el que no se muestra la IU. Los siguientes son los valores posibles:
|
isSkippedMoment() |
¿Esta notificación aparece cuando se omite un momento? |
getSkippedReason() |
Es el motivo detallado del momento omitido. Los siguientes son los valores posibles:
|
isDismissedMoment() |
¿La notificación se envió para un momento descartado? |
getDismissedReason() |
El motivo detallado del rechazo. Los siguientes son los valores posibles:
|
getMomentType() |
Muestra una string para el tipo de momento. Los siguientes son los valores posibles:
|
Tipo de datos: CredentialResponse
Cuando se invoca la función callback, se pasa un objeto CredentialResponse como parámetro. En la siguiente tabla, se enumeran los campos que contiene 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. |
credencial
Este campo es el token de ID como una string de token web JSON (JWT) codificada en base64.
Cuando se decodifica, 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 contiene un identificador único global para la Cuenta de Google.
Mediante los campos email, email_verified y hd, puedes determinar si Google aloja una fuente de correo electrónico y si la autoría es válida. En los casos en que Google tenga autoridad, en la actualidad se sabe que el usuario es el propietario legítimo de la cuenta.
Casos en los que Google sea confiable:
emailtiene el sufijo@gmail.com; esta es una cuenta de Gmail.- El valor
email_verifiedes verdadero yhdestá configurado, esta es una cuenta de G Suite.
Los usuarios pueden registrarse en Cuentas de Google sin usar Gmail ni G Suite. Cuando
email no contiene un sufijo @gmail.com y no se incluye hd, Google no
está autorizado, y se recomiendan otros métodos de verificación para verificar
al usuario. email_verfied también puede ser verdadero, ya que Google verificó al usuario cuando se creó la Cuenta de Google. Sin embargo, es posible que la propiedad del correo electrónico de terceros haya cambiado desde entonces.
seleccionar_antes
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 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 nueva.
Antes de compartir las credenciales del token de ID con tu app, haz lo siguiente:
- presionar el botón Confirmar para otorgar su consentimiento a fin de compartir credenciales; o
- habían otorgado su consentimiento con anterioridad y usaron Seleccionar una Cuenta para elegir una Cuenta de Google.
El valor de este campo se establece en uno de estos tipos:
| Valor | Descripción |
|---|---|
auto |
Acceso automático de un usuario con una sesión existente que ya había otorgado su consentimiento para compartir credenciales. |
user |
Un usuario con una sesión existente que ya había otorgado su consentimiento presionó el botón de One Tap "Continuar como" para compartir credenciales. |
user_1tap |
Un usuario con una sesión existente presionó el botón de One Tap "Continuar como" para otorgar el consentimiento y compartir las credenciales. Solo se aplica a Chrome v75 y versiones posteriores. |
user_2tap |
Un usuario sin sesión existente presionó el botón “Continuar como” de One Tap para seleccionar una cuenta y, luego, presionó el botón Confirmar en una ventana emergente para otorgar el consentimiento y compartir las credenciales. Se aplica a navegadores que no están basados en Chromium. |
btn |
Un usuario con una sesión existente que ya había otorgado su consentimiento presionaba el botón Acceder con Google y seleccionaba 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, luego, el botón Confirmar para otorgar el consentimiento y compartir las credenciales. |
btn_add_session |
Un usuario sin sesión existente que ya había otorgado su consentimiento presionó el botón Acceder con Google para seleccionar una Cuenta de Google y compartir sus credenciales. |
btn_confirm_add_session |
Un usuario que no tenía 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 compartir sus credenciales. |
Método: google.accounts.id.renderButton
El método google.accounts.id.renderButton procesa 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 relleno_negro. |
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 configura, se procesa el idioma del botón. |
click_listener |
Si se configura, se llamará a esta función cuando se haga clic en el botón Acceder con Google. |
Tipos de atributos
Las siguientes secciones contienen detalles sobre el 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 | Obligatoria | Ejemplo |
|---|---|---|
| string | Sí | type: "icon" |
En la siguiente tabla, se enumeran los tipos de botones disponibles y sus descripciones:
| Tipo | |
|---|---|
standard |
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 | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | theme: "filled_blue" |
En la siguiente tabla, se enumeran los temas disponibles y sus descripciones:
| Tema | |
|---|---|
outline |
Un tema de botón estándar:
|
filled_blue |
Un tema de botón azul:
|
filled_black |
Un tema de botones negro:
|
size
El tamaño del botón. El valor predeterminado es large. Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | size: "small" |
En la siguiente tabla, se indican los tamaños de botones disponibles y sus descripciones:
| Tamaño | |
|---|---|
large |
Un botón grande:
|
medium |
Un botón mediano:
|
small |
Botón pequeño:
|
texto
El texto del botón. El valor predeterminado es signin_with. No hay diferencias visuales en el texto de los botones de íconos que tienen diferentes atributos text.
La única excepción es cuando se lee el texto para mejorar la accesibilidad de la pantalla.
Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | text: "signup_with" |
La siguiente tabla enumera los textos de botón 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 "Continue with 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 | Obligatoria | 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.
|
alineación_logotipo
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 | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | logo_alignment: "center" |
En la siguiente tabla, se enumeran las alineaciones disponibles y sus descripciones:
| alineación_logotipo | |
|---|---|
left |
Alinea a la izquierda el logotipo de Google.
|
center |
Alinea el centro con 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 | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | width: 400 |
configuración regional
Opcional. Mostrar el texto del botón con la configuración regional especificada; de lo contrario, usar la configuración predeterminada del navegador o de la Cuenta de Google de los usuarios. 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á configurada, se usa la configuración regional predeterminada del navegador o la preferencia del usuario de la sesión de Google. Por lo tanto, los usuarios pueden ver diferentes versiones de los botones localizados y, posiblemente, con tamaños diferentes.
Consulta la siguiente tabla para obtener más información:
| Tipo | Obligatoria | Ejemplo |
|---|---|---|
| string | Opcional | locale: "zh_CN" |
click_listener
Puedes definir una función de JavaScript para que se llame cuando se haga clic en el botón Acceder con Google 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 el ejemplo anterior, el mensaje Acceder con el botón de Google... se registrará en la consola cuando se haga clic en el botón Acceder.
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 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. 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 sencillo para el método store() de la API del administrador de credenciales nativa del navegador. Por lo tanto, solo se puede usar para almacenar una credencial de contraseña. Consulta el siguiente ejemplo de código del método:
google.accounts.id.storeCredential(Credential, callback)
En el siguiente ejemplo de código, se implementa el método google.accounts.id.storeCredential con una función onSignIn():
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
Método: google.accounts.id.cancel
Puedes cancelar el flujo de One Tap si quitas el mensaje del DOM de parte de confianza. Si ya se seleccionó una credencial, la operación de cancelación se ignora. Consulta el siguiente ejemplo de código del método:
google.accounts.id.cancel()
En el siguiente ejemplo de código, se implementa el método google.accounts.id.cancel() con una función onNextButtonClicked():
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Devolución de llamada de carga de la biblioteca: onGoogleLibraryLoad
Puedes registrar una devolución de llamada onGoogleLibraryLoad. Se notifica después de que se carga la biblioteca JavaScript de Acceder con Google:
window.onGoogleLibraryLoad = () => {
...
};
Esta devolución de llamada es solo un acceso directo para la devolución de llamada window.onload. No hay diferencias de 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. Consulta el siguiente fragmento de código del método: google.accounts.id.revoke(hint, callback)
| Parámetro | Tipo | Descripción |
|---|---|---|
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 de 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 la 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. |
exitoso
Este campo es un valor booleano establecido como verdadero si la llamada al método de revocación se realizó correctamente o como falso si se produjo un error.
error
Este campo es un valor de string y contiene un mensaje de error detallado si la llamada al método de revocación falló, es indefinido si se realiza correctamente.