Estoy tratando de hacer un sitio web usando Google Sign For Websites. En su mayoría sólo por el bien de aprender acerca de cómo funciona.
He seguido los pasos descritos en ese tutorial que proporciona Google, que funciona bien. Los usuarios pueden iniciar sesión con éxito en mi sitio, puede pasar la identificación de los usuarios al backend y luego verificar el lado del servidor de identificación usando un script php.
Php luego crea una sesión para el usuario en el sitio web. Lo que no puedo entender es cómo actualizaría la página cuando un usuario haga clic en el botón Iniciar sesión de Google y el inicio de sesión sea exitoso. Actualizar la página permitiría recargar la página de inicio con los nuevos datos de la sesión de php.
<div class="g-signin2 signin-button" data-onsuccess="onSignIn" data-theme="dark"></div> function onSignIn(googleUser){ // The ID token you need to pass to your backend: var id_token = googleUser.getAuthResponse().id_token; var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://mywebsite.com/tokensignin.php'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { console.log('Signed in as: ' + xhr.responseText); }; xhr.send('idtoken=' + id_token); }; Intenté usar simplemente location.reload() dentro de la parte onload = function() del código. Sin embargo, esto hace que la página se actualice infinitamente cada vez que se carga, ya que Google verifica que el usuario haya iniciado sesión a través de esta variable xhr cada vez.
Intenté revisar su referencia para usar GoogleAuth.isSignedIn.listen(listener) para monitorear cualquier cambio, pero no parece cumplir con lo que quiero o no lo estoy usando correctamente porque no sé exactamente lo que debe ser el oyente.
La otra opción podría ser usar su GoogleAuth.attachClickHandler(container, options, onsuccess, onfailure) , pero no estoy completamente seguro de cómo configurar correctamente el campo/variable de opciones.
Si alguien pudiera darme una idea de cómo funciona este mundo, se lo agradecería mucho.
Para resumir, si el usuario ya inició sesión en mi sitio web usando Google, quiero que la página no haga nada, si hace clic en el botón de inicio de sesión, después de que el inicio de sesión sea exitoso, quiero actualizar la página en la que se encuentra.
Puede agregar un oyente a xhr con una función de devolución de llamada.
xhr.addEventListener("load", loginComplete);Y luego crea una función:
function loginComplete(evt) { console.log("Login Complete"); window.location.reload(); }EDITAR:
Está bien. Dado que el oyente no ayuda. Deberá verificar si el usuario ya ha iniciado sesión. Para guardar esa información, una cosa que podría pensar sería usar cookies.
Por lo tanto, puede almacenar el token de autenticación que recibe de Google y configurar una cookie para él y verificar cada vez antes de realizar su POST.
Aquí hay una buena biblioteca de cookies js: https://github.com/js-cookie/js-cookie
Luego, al cargar, guarda la identificación:
xhr.onload = function() { Cookie.set('google_token', id_token); window.location.reload(); };Y la función onSignIn sería como:
function onSignIn(googleUser){ var cookie = Cookie.get('google_token'); if(cookie != undefined){ //cookie is set return; } ... //rest of the function }Por supuesto, debe mejorar este código, por ejemplo, verificar si el token almacenado en las cookies aún es válido, en algunos casos puede simplemente actualizarlo en lugar de hacer que el usuario inicie sesión nuevamente (la API oAuth proporciona tales cosas).
Tome algunas medidas de seguridad para asegurarse de que el token no se esté inyectando, etc.
Mi enfoque fue el mismo que el suyo y, de hecho, me encontré con el mismo problema con la actualización constante.
Probé un par de soluciones, la que mejor funcionó fue la siguiente:
onGoogleSignInonGoogleSignInPor supuesto, esta solución es bastante inútil si desea manipular algunos datos en la cuenta de Google del usuario, pero no encontré ningún uso para esta funcionalidad.
Código para cerrar la sesión de alguien en su cuenta de Google.
function signOut() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function () { console.log('User signed out.'); }); }¿Por qué no redirigir su back-end (o enviar información para que la página pueda redirigir en caso de éxito)?
¿Cuál es la necesidad de volver a cargar la pantalla de inicio de sesión?
También puede consultar la documentación del oyente, parece que esto puede resolver lo que desea. es decir. Escuche el cambio de usuario y active una función o redireccione.
https://developers.google.com/identity/sign-in/web/listeners