Mostrar el toque de Google One

Agrega un mensaje de One Tap a tu sitio para permitir que los usuarios se registren o accedan a tu app web. Usa HTML y JavaScript para renderizar y personalizar el mensaje.

Requisitos previos

Sigue los pasos que se describen en Configuración para configurar la pantalla de consentimiento de OAuth, obtener un ID de cliente y cargar la biblioteca cliente.

Agrega un botón de Acceder con Google a tu página de acceso.

Renderización inmediata

Coloca un fragmento de código en las páginas en las que deseas que se muestre el acceso con un toque.

HTML

Muestra el mensaje de One Tap y muestra la credencial de JWT a un extremo de acceso.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

El atributo data-login_uri es el URI del extremo de acceso de tu app web. Puedes agregar atributos de datos personalizados, que se envían a tu extremo de acceso junto con el token de ID que emite Google.

Usa el atributo data-context para cambiar el texto que se usa en el título de la instrucción. Por ejemplo, data-context: "signup" cambia "Accede a" por "Regístrate en".

Para obtener una lista completa de los atributos admitidos, consulta la referencia de g_id_onload.

JavaScript

Muestra el mensaje de One Tap y muestra la credencial de JWT al controlador de devolución de llamada de JavaScript del navegador.

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

Para configurar el mensaje de One Tap en JavaScript, primero debes llamar al método initialize(). Luego, llama al método prompt() para mostrar la IU de la instrucción.

Usa el campo context para cambiar el texto que se usa en el título de la instrucción. Por ejemplo, context: 'signup' cambia "Accede a" por "Regístrate en".

Para ver la lista completa de opciones de datos, consulta la referencia de idConfiguration.

Estado de la instrucción

Usa una función de devolución de llamada de JavaScript para escuchar notificaciones de estado de la IU inmediatas.

Las notificaciones se envían 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 se cierra la sesión seleccionada en Google.

    En este caso, 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 cuando 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.

HTML

Usa el atributo data-moment_callback para especificar una función de devolución de llamada de JavaScript. Se requiere un controlador de devolución de llamada para recibir notificaciones.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

Para facilitar que los usuarios accedan o se registren, puedes comunicarte con varios proveedores de identidad para encontrar las credenciales disponibles. Te recomendamos que conozcas el estado de la IU de nuestro mensaje para que puedas llamar al siguiente proveedor de identidad.

JavaScript

Pasa el controlador de devolución de llamada como parámetro a google.accounts.id.prompt. Aquí, se usa una función de flecha para controlar las actualizaciones de notificaciones.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

Botón y mensaje

Es posible que el botón Acceder con Google y el mensaje de One Tap se muestren juntos en una sola página.

HTML

Para mostrar el botón Acceder con Google y el mensaje de One Tap, incluye los elementos g_id_onload y g_id_signin.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

Para mostrar el botón Acceder con Google y la instrucción de One Tap, llama a las funciones renderButton() y prompt() al mismo tiempo.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

No cubras One Tap

Esta sección solo se aplica cuando FedCM está inhabilitado. Cuando está habilitado, el navegador muestra instrucciones para el usuario sobre el contenido de la página.

Para garantizar que los usuarios finales vean toda la información que se muestra, Google One Tap no debe estar cubierto por ningún otro contenido. De lo contrario, es posible que se activen ventanas emergentes en algunos casos.

Verifica el diseño de tu página y las propiedades de índice z de los elementos para asegurarte de que Google One Tap no esté cubierto por ningún otro contenido en ningún momento. El cambio de flujo de la IU puede activarse incluso cuando se cubre un solo píxel en los bordes.

Respuesta de credenciales

En la respuesta de credencial, se incluye un JWT firmado por Google. La respuesta se muestra al navegador con una función de devolución de llamada de JavaScript o a tu plataforma a través de un redireccionamiento a un extremo de acceso.

Devolución de llamada de JS

Usa HTML o JavaScript para configurar una devolución de llamada.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

A modo de ejemplo, handleCredentialResponse decodifica el JWT y imprime algunos de los campos del token de ID en la consola.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

Redireccionamiento

Para mostrar una credencial en el extremo de acceso de tu plataforma, agrega la URL a la configuración de URI de redireccionamiento autorizado de tu cliente web de OAuth 2.0.

Usa HTML o JavaScript para configurar un URI de redireccionamiento.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});