Muestra el botón Acceder con Google

Agrega un botón de Acceder con Google a tu sitio para permitir que los usuarios se registren en tu app web o accedan a ella. Usa HTML o JavaScript para renderizar el botón y los atributos a fin de personalizar la forma, el tamaño, el texto y el tema del botón.

Botón de acceso personalizado.

Después de que un usuario selecciona una Cuenta de Google y otorga su consentimiento, Google comparte el perfil del usuario con un token web JSON (JWT). Para obtener una descripción general de los pasos involucrados durante el acceso y la experiencia del usuario, consulta Cómo funciona. En Información sobre el botón personalizado, se revisan las diferentes condiciones y estados que afectan la forma en que se muestra el botón a los usuarios.

Requisitos previos

Completa lo siguiente antes de agregar el botón a tu página de acceso:

Renderización de botones

Para mostrar el botón Acceder con Google, puedes elegir HTML o JavaScript para renderizar el botón en tu página de acceso:

HTML

Renderiza el botón de acceso con HTML y muestra el JWT en el extremo de acceso de tu plataforma.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

Un elemento con una clase g_id_signin se renderiza como un botón de Acceder con Google. El botón se personaliza según los parámetros proporcionados en los atributos de datos.

Para mostrar un botón de Acceder con Google y un toque de Google One en la misma página, quita data-auto_prompt="false". Esto se recomienda para reducir la fricción y mejorar las tasas de acceso.

Para ver la lista completa de atributos de datos, consulta la página de referencia de g_id_signin.

JavaScript

Renderiza el botón de acceso con JavaScript y muestra el JWT al controlador de devolución de llamada de JavaScript del navegador.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

El elemento especificado como el primer parámetro de renderButton se muestra como un botón Acceder con Google. En este ejemplo, se usa buttonDiv para renderizar el botón en la página. El botón se personaliza con los atributos especificados en el segundo parámetro para renderButton.

A fin de minimizar la fricción del usuario, se llama a google.accounts.id.prompt() para mostrar One Tap como segunda alternativa al uso del botón para registrarse o acceder.

La biblioteca de GIS analiza el documento HTML en busca de elementos con un atributo de ID establecido en g_id_onload o atributos de clase que contengan g_id_signin. Si se encuentra un elemento coincidente, el botón se renderiza con HTML, independientemente de si también lo renderizaste en JavaScript. Para evitar que se muestre el botón dos veces, es posible que los parámetros en conflicto no incluyan elementos HTML que coincidan con estos nombres en tus páginas HTML.

Idioma del botón

El idioma del botón se determina automáticamente según el idioma predeterminado del navegador o la preferencia del usuario de la sesión de Google. También puedes elegir el idioma de forma manual. Para ello, agrega el parámetro hl y el código de idioma a la directiva src cuando cargues la biblioteca y agrega el parámetro opcional de configuración regional de datos o configuración regional data-locale en HTML o configuración regional en JavaScript.

HTML

En el siguiente fragmento de código, se muestra cómo mostrar el idioma del botón en francés. Para ello, agrega el parámetro hl a la URL de la biblioteca cliente y configura el atributo data-locale en francés:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

En el siguiente fragmento de código, se muestra cómo mostrar el idioma del botón en francés. Para ello, agrega el parámetro hl a la URL de la biblioteca cliente y llama al método google.accounts.id.renderButton con el parámetro locale configurado en francés:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

Manejo de credenciales

Después de otorgar el consentimiento del usuario, Google muestra una credencial de token web JSON (JWT) conocida como token de ID para el navegador del usuario o directamente a un extremo de acceso alojado en tu plataforma.

El lugar donde elijas recibir el JWT dependerá de si renderizas el botón con HTML o JavaScript y de si se usa el modo de UX de redireccionamiento o ventana emergente.

El uso del modo de UX popup realiza el flujo de UX de acceso en una ventana emergente. Por lo general, es una experiencia menos invasiva para los usuarios y es el modo de UX predeterminado.

Cuando se renderiza el botón con:

HTML

Puedes establecer:

  • data-callback para mostrar el JWT a tu controlador de devolución de llamada
  • data-login_uri para que Google envíe el JWT directamente a tu extremo de acceso mediante una solicitud POST

Si se configuran ambos valores, data-callback tiene prioridad sobre data-login_uri. Configurar ambos valores puede ser útil cuando se usa un controlador de devolución de llamada para la depuración.

JavaScript

Debes especificar un callback, ya que el modo de ventana emergente no admite redireccionamientos cuando se rota el botón en JavaScript. Si se configura, se ignorará login_uri.

Consulta cómo controlar la respuesta de la credencial que se muestra para obtener más información sobre la decodificación del JWT dentro de tu controlador de devolución de llamada JS.

Modo de redireccionamiento

El uso del modo de UX redirect realiza el flujo de UX de acceso mediante el redireccionamiento de página completa del navegador del usuario, y Google muestra el JWT directamente en tu extremo de acceso mediante una solicitud POST. Por lo general, esta es una experiencia más invasiva para los usuarios, pero se considera el método de acceso más seguro.

Cuando se renderiza el botón con:

  • HTML establece de forma opcional data-login_uri en el URI del extremo de acceso.
  • De manera opcional, JavaScript configura login_uri en el URI del extremo de acceso.

Si no proporcionas un valor, Google muestra el JWT al URI de la página actual.

Tu URI del extremo de acceso

Usa HTTPS y un URI absoluto cuando configures data-login_uri o login_uri. Por ejemplo, https://example.com/path.

HTTP solo se permite cuando se usa localhost durante el desarrollo: http://localhost/path.

Consulta Cómo usar orígenes seguros de JavaScript y URI de redireccionamiento para obtener una descripción completa de los requisitos y las reglas de validación de Google.