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 tu 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 de instrucciones

Coloca un fragmento de código en las páginas en las que quieras que se muestre One Tap.

HTML

Muestra el mensaje de Un toque y devuelve la credencial 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.

De manera opcional, usa el atributo data-skip_prompt_cookie y una cookie para controlar si se muestra o no el mensaje de One Tap en las páginas HTML estáticas en las que no puedes cambiar el contenido. Si se configura la cookie especificada, no se muestra el mensaje.

Usa el atributo opcional 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".

De forma predeterminada, el mensaje de One Tap se cierra automáticamente si el usuario hace clic fuera de él. Puedes inhabilitar este comportamiento si configuras el atributo data-cancel_on_tap_outside como falso.

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

JavaScript

Muestra el mensaje de One Tap y devuelve la credencial 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 opcional 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".

De forma predeterminada, el mensaje de One Tap se cierra automáticamente si el usuario hace clic fuera de él. Puedes inhabilitar este comportamiento si configuras la propiedad cancel_on_tap_outside como falsa.

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 las notificaciones de estado de la IU de la instrucción.

Se envían notificaciones en los siguientes momentos:

  • Momento de visualización: Se produce después de que se llama al método prompt(). La notificación contiene un valor booleano para indicar si se muestra la IU.

  • Momento omitido: Esto ocurre cuando se cierra el mensaje de One Tap por una cancelación automática, una cancelación manual o cuando Google no puede emitir una credencial, por ejemplo, cuando se cierra la sesión seleccionada de Google.

    En este caso, te recomendamos que continúes con los siguientes proveedores de identidad, si los hay.

  • Momento de descarte: Esto 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 el acceso o el registro de los usuarios, puedes comunicarte con varios proveedores de identidad para encontrar credenciales disponibles. Es posible que desees conocer el estado de la IU de la instrucción para poder llamar al siguiente proveedor de identidad.

JavaScript

Pasa tu controlador de devolución de llamada como un 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

El botón de Acceder con Google y el mensaje de One Tap pueden mostrarse juntos en una sola página.

HTML

Incluye los elementos g_id_onload y g_id_signin para mostrar el botón de Acceder con Google y el mensaje de One Tap.

<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

Llama a las funciones renderButton() y prompt() al mismo tiempo para mostrar el botón de acceso con Google y el mensaje de One Tap.

<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 cubrir One Tap

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

Para asegurarte de 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 la 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 en el flujo de UX se puede activar incluso cuando solo se cubre un píxel en los bordes.

Respuesta de credenciales

En la respuesta de credencial, se incluye un JWT firmado por Google. La respuesta se devuelve al navegador a través de 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'
});

Por ejemplo, handleCredentialResponse decodifica el JWT y, luego, 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 devolver una credencial al extremo de acceso de tu plataforma, agrega la URL a la configuración de URI de redireccionamiento autorizada 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'
});