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 o accedan a tu app web. Usa HTML o JavaScript para renderizar el botón y los atributos para personalizar su forma, tamaño, texto y tema.

Botón de acceso personalizado.

Después de que un usuario selecciona una Cuenta de Google y proporciona 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 Comprende 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

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.

Renderización de botones

Para mostrar el botón Acceder con Google, puedes elegir HTML o JavaScript para renderizarlo 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. Los parámetros proporcionados en los atributos de datos se usan para personalizar el botón.

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

Para obtener la lista completa de los 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 de 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.

Para minimizar la fricción del usuario, se llama a google.accounts.id.prompt() para mostrar One Tap como una 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 que coincide, el botón se renderiza con HTML, independientemente de si también lo renderizaste en JavaScript. Para evitar mostrar el botón dos veces, posiblemente con parámetros en conflicto, no incluyas elementos HTML que coincidan con estos nombres en tus páginas HTML.

Idioma de los botones

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 data-locale o locale data-locale en HTML o locale 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, se agrega el parámetro hl a la URL de la biblioteca cliente y se establece 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, se agrega el parámetro hl a la URL de la biblioteca cliente y se llama al método google.accounts.id.renderButton con el parámetro locale establecido 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 que el usuario otorga su consentimiento, Google muestra una credencial de token web JSON (JWT) conocida como token de ID al navegador del usuario o directamente a un extremo de acceso alojado por tu plataforma.

El lugar en el que elijas recibir el JWT depende de si renderizas el botón con HTML o JavaScript, y si se usa el modo de UX de la ventana emergente o el redireccionamiento.

El uso del modo de UX de 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 renderices el botón con lo siguiente:

HTML

Puedes configurar lo siguiente:

  • data-callback para devolver 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 con una solicitud POST.

Si se establecen ambos valores, data-callback tiene prioridad sobre data-login_uri. Es posible que configurar ambos valores sea útil cuando se usa un controlador de devolución de llamada para depurar.

JavaScript

Debes especificar un callback. El modo emergente no admite redireccionamientos cuando se renderiza el botón en JavaScript. Si se establece, se ignora login_uri.

Consulta Controla la respuesta de credenciales que se muestra para obtener más información sobre cómo decodificar el JWT dentro de tu controlador de devolución de llamada de JS.

Modo de redireccionamiento

Cuando se usa el modo de UX de redirect, se 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 con una solicitud POST. Por lo general, esta es una experiencia más invasiva para los usuarios, pero se considera que es el método de acceso más seguro.

Cuando renderices el botón con lo siguiente:

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

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

El URI de tu 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 de JavaScript seguros y URIs de redireccionamiento para obtener una descripción completa de los requisitos y las reglas de validación de Google.