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 renderizar el botón y los atributos para 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 otorga su consentimiento, Google comparte el perfil del usuario con un token web JSON (JWT). Para obtener una descripción general de los pasos que se realizan durante el acceso y la experiencia del usuario, consulta Cómo funciona. Comprende que el botón personalizado revisa 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 tu 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 renderizar 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></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 Acceder con Google.
El botón se personaliza con los parámetros que se proporcionan en los atributos de datos.
Para mostrar un botón Acceder con Google y Google One Tap en la misma página,
quita data-auto_prompt="false". Se recomienda para reducir la fricción y mejorar las tasas de acceso.
Para obtener la lista completa de atributos de datos, consulta la g_id_signin página de referencia
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 para renderButton se muestra como un botón 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 ID establecido en g_id_onload o atributos de clase que contengan g_id_signin. Si se encuentra un elemento coincidente, el botón se renderiza con HTML, independientemente de si también renderizaste 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 agregando el hl parámetro y el código de idioma a la directiva src
cuando cargas la biblioteca y agregando 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 agregando el parámetro hl a la URL de la biblioteca cliente y llamando 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>
Control de credenciales
Después de que se otorga el consentimiento del usuario, Google muestra una credencial de token web JSON (JWT) conocida como token de ID en el navegador del usuario o directamente en un extremo de acceso alojado en tu plataforma.
El lugar donde elijas 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 emergente
El uso del modo de UX popup realiza el flujo de UX de acceso en una ventana emergente. Por lo general, es una experiencia menos intrusiva para los usuarios y es el modo de UX predeterminado.
Cuando renderizas el botón con:
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 extremo de acceso con una solicitud POST.
Si se establecen ambos valores, data-callback tiene prioridad sobre data-login_uri. Establecer ambos valores puede ser ú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 renderiza el botón en JavaScript. Si se establece, se ignora login_uri.
Consulta cómo controlar la respuesta de credenciales que se muestra para obtener más información sobre cómo decodificar el JWT en tu controlador de devolución de llamada de JS.
Modo de redireccionamiento
El uso del modo de UX redirect realiza el flujo de UX de acceso mediante el redireccionamiento de página completa
del navegador del usuario, y Google muestra el JWT directamente a tu
extremo de acceso con una solicitud POST.
Por lo general, es una experiencia más intrusiva para los usuarios, pero se considera el método de acceso más seguro.
Cuando renderizas el botón con:
- HTML (opcional) establece
data-login_urien el URI de tu extremo de acceso. - JavaScript (opcional) 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.
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 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.