Con Google Sign-In, usamos una máscara de botón personalizada (siguiendo las pautas de marca mencionadas enhttps://developers.google.com/identity/sign-in/web/build-button ) y luego llamamos para iniciar sesión manualmente desde JS usando esencialmente esto:
gapi.load('auth2', function(){ gapi.auth2.init().signIn().then(function(response) { // handle success }).catch(function(error) { // handle error/cancel }); });Estoy mirando la documentación de Google Identity y parece que ninguno de esos (botón personalizado o activar el inicio de sesión a través de JS) es posible. ¿Hay alguna manera de hacerlo, que me estoy perdiendo? Realmente nos gustaría poder mantener el botón de inicio de sesión de Google en consonancia con nuestros otros botones de inicio de sesión y manejar el cambio de tamaño compatible con la interfaz de usuario, etc. ¡Muchas gracias!
Nota: sé que google.accounts.id.prompt() está en la documentación, pero esto no parece funcionar universalmente. Cuando lo intento, aparece un error opt_out_or_no_session y no pasa nada. Además, nos gustaría usar el botón de Google, en lugar de un toque, que es para lo que creo que es esto.
El nuevo botón admite un conjunto de atributos de datos visuales para elegir. Esto elimina la necesidad de alojar imágenes y mantener las pautas de marca. Ayuda a los usuarios al garantizar que el inicio de sesión con Google se vea y se sienta igual en todos los sitios: la coherencia es buena para todos.
Hay un generador de código que se puede usar para recorrer rápidamente todas las diferentes opciones de tamaño, forma, color y texto para el botón de inicio de sesión.
Si no puede encontrar atributos que satisfagan sus necesidades, sería genial escuchar más sobre lo que falta. Si eso aún no funciona, puede continuar con las pautas de marca y llamar directamente a los puntos finales de OpenID Connect para autenticar a los usuarios.
Si solo desea mostrar el botón Iniciar sesión con Google, configure data-auto_prompt="true" para suprimir One Tap. Esto no se recomienda ya que aumenta la cantidad de pasos y la fricción al iniciar sesión; One Tap mejora las tasas de inicio de sesión.
Puedes hacer eso haciendo algo como esto:
const clientLoad = new Promise(resolve => { gapi.load('auth2', () => { resolve(gapi.auth2.init({ client_id: '<your_client_id>' })); }); }); async function login() { const client = await clientLoad; const response = client.signIn().catch((e) => { // in case user closes the popup if (e.error === 'popup_closed_by_user') { return null; } throw e; }); // handle your authentication flow with the token received console.log(response.getAuthResponse()); }Y en su botón:
<button class="your-custom-style" onclick="login()"> Login with google </button>