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 procesar el botón y los atributos a fin de personalizar la forma, el tamaño, el texto y el tema del botón.
Después de que un usuario selecciona una Cuenta de Google y proporciona su consentimiento, Google comparte su perfil mediante 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. Comprender el botón personalizado permite revisar las diferentes condiciones y estados que afectan la manera en que se muestra el botón a los usuarios.
Prerequisites
Completa lo siguiente antes de agregar el botón a tu página de acceso:
- Sigue los pasos que se describen en la configuración para configurar tu pantalla de consentimiento de OAuth y obtener un ID de cliente.
- Carga la biblioteca cliente.
Renderización de los botones
Para mostrar el botón Acceder con Google, puedes elegir HTML o JavaScript para procesar el botón en tu página de acceso:
HTML
Renderiza el botón de acceso con HTML y muestra el JWT al extremo de acceso de tu plataforma.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></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 con los parámetros proporcionados en los atributos de datos.
Para mostrar un botón de Acceder con Google y Google One Tap 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 defer></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, buttonDiv se usa para renderizar el botón en la página. El botón se personaliza mediante 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 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 coincidente, el botón también se renderizará con HTML, independientemente de si también procesaste el botón en JavaScript. Para evitar que se muestre 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.
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.
La opción para recibir el JWT depende de si renderizas el botón con HTML o JavaScript, y si se usa el modo de UX emergente o de redireccionamiento.
Modo de ventanas emergentes
El uso del modo de UX popup realiza el flujo de UX de acceso en una ventana emergente. Esta suele ser una experiencia menos invasiva para los usuarios y es el modo de UX predeterminado.
Cuando renderices el botón con:
HTML puede configurar cualquiera de las siguientes opciones:
data-callbackpara mostrar el JWT a tu controlador de devolución de llamadadata-login_uripara que Google envíe el JWT directamente a tu extremo de acceso mediante una solicitud POST.
Si se configuran ambos valores,
data-callbacktendrá prioridad sobredata-login_uri. Por ejemplo, esto puede ser útil cuando se usa un controlador de devolución de llamada durante la depuración.En JavaScript, debes configurar
callback, ya que el modo emergente no admite redireccionamientos cuando se procesa el botón en JavaScript. Si se configura, se ignoralogin_uri.Consulta cómo manejar la respuesta de la credencial que se muestra para obtener más información sobre cómo decodificar el JWT dentro del 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 completo de páginas del navegador del usuario, y Google muestra el JWT directamente a tu extremo de acceso mediante una solicitud POST.
Esta suele ser una experiencia más invasiva para los usuarios, pero se considera el método de acceso más seguro.
Cuando renderices el botón con:
- De manera opcional, HTML establece
data-login_urien el URI de tu extremo de acceso. - JavaScript configura
login_uride forma opcional con el URI de tu extremo de acceso.
Si no proporcionas un valor, Google muestra el JWT al URI de la página actual.
El 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.
Solo se permite HTTP cuando se usa localhost durante el desarrollo: http://localhost/path.
Consulta Usa orígenes de JavaScript seguros y URI de redireccionamiento para obtener una descripción completa de los requisitos y las reglas de validación de Google.