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.
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:
- Sigue los pasos que se describen en Configuración para configurar tu consentimiento de OAuth. Filtrar y obtener un ID de cliente.
- Carga 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 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.
Modo de ventana emergente
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-callbackpara mostrar el JWT a tu controlador de devolución de llamadadata-login_uripara 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_uride forma opcional en el URI de tu extremo de acceso. - De manera opcional, JavaScript establece
login_urien 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.