Agrega un botón "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 sus 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 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. Comprende el botón personalizado para ver las distintas 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 la pantalla de consentimiento de OAuth y obtener un ID de cliente.
- Carga la biblioteca cliente.
Procesamiento de botones
A fin de mostrar el botón Acceder con Google, puedes elegir HTML o JavaScript para renderizar el botón en tu página de acceso:
HTML
Procesar el botón de acceso con HTML y mostrar 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 procesa 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, presiona data-auto_prompt="false" en la misma página. 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
Procesar el botón de acceso con JavaScript y mostrar 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 procesar el botón de la página. El botón se personaliza con los atributos que se especifican 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 a usar el 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 lo renderizaste 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.
Idioma del botón
El idioma predeterminado del botón se determina de forma automática 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 si agregas el parámetro hl y el código de idioma a la directiva src cuando cargas la biblioteca y si agregas el parámetro de configuración regional de datos (opcional) o configuración regional 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 estableciendo el atributo data-locale en francés:
<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></script> ... <div class="g_id_signin" data-locale="fr"> </div>
JavaScript
En el siguiente fragmento, se muestra un ejemplo en el que se muestra 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 locale configurado en francés:
<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></script>
...
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
Manejo de credenciales
Después de que se otorga el consentimiento del usuario, Google muestra una credencial de token web JSON (JWT) conocida como un token de ID al navegador del usuario o directamente a un extremo de acceso alojado en tu plataforma.
El lugar en el que elijas recibir el JWT depende de si procesas el botón con HTML o JavaScript, y si se usa el modo de UX emergente o de ventana emergente.
Modo de elementos emergentes
El modo de UX con popup realiza el flujo de UX de acceso en una ventana emergente. Esta suele ser una experiencia menos intrusiva para los usuarios y es el modo de UX predeterminado.
Al renderizar el botón con:
HTML puede establecer una 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 al 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.JavaScript: Debes configurar
callback. El modo emergente no admite redireccionamientos cuando se reenvía el botón en JavaScript. Si se configura,login_urise ignora.Consulta maneja la respuesta de credencial que se muestra 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 uso del modo de UX redirect realiza el flujo de UX de acceso mediante el redireccionamiento de página completo del navegador del usuario, y Google muestra el JWT directamente al extremo de acceso con una solicitud POST.
Esta suele ser una experiencia más intrusiva para los usuarios, pero se considera el método de acceso más seguro.
Al renderizar el botón con:
- De manera opcional, HTML establece
data-login_urien 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 al URI de la página actual.
Tu URI de 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 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.