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 da su consentimiento, Google comparte el perfil de usuario mediante un token web JSON (JWT). Para obtener una descripción general de los pasos relacionados con 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

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 renderizarlo en tu página de acceso:

HTML

Renderiza el botón de acceso con HTML y devuelve el JWT al extremo de acceso.

<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 One Tap de Google 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 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 primer parámetro para renderButton se muestra como una Botón de Acceder con Google. En este ejemplo, se usa buttonDiv para renderizar el botón de la página. El botón se personaliza con los atributos se especifica en el segundo parámetro a 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 una coincidencia un elemento, el botón se renderiza con HTML, independientemente de si también renderizaba el botón 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 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 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 agregando el parámetro hl a la URL de la biblioteca cliente y configurando 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 establecido como 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 el consentimiento, Google muestra una credencial de token web JSON (JWT). conocido como token de ID, ya sea en el navegador del usuario o directamente que aloja tu plataforma.

El lugar en el que elijas recibir el JWT depende de si renderizas el botón usando HTML o JavaScript, y si se usa el modo de UX de ventana emergente o 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 usando:

HTML

Puedes configurar lo siguiente:

  • 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 información de acceso extremo con una solicitud POST.

Si se configuran 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 la depuración.

JavaScript

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

Consulta maneja la respuesta de credencial devuelta para obtener más información sobre la decodificación de JWT en tu controlador de devolución de llamada JS.

Modo de redireccionamiento

El modo UX de redirect realiza el flujo de UX de acceso usando la página completa. redireccionamiento del navegador del usuario, y Google devuelve el JWT directamente a tu extremo de acceso mediante 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 usando:

  • HTML establece data-login_uri de forma opcional en el URI de tu extremo de acceso.
  • 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.

Solo se permite HTTP 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.