¿Cómo puedo hacer que el navegador me solicite guardar la contraseña?
Oye, estoy trabajando en una aplicación web que tiene un cuadro de diálogo de inicio de sesión que funciona así:
- El usuario hace clic en "iniciar sesión"
- El formulario de inicio de sesión HTML se carga con AJAX y se muestra en DIV en la página
- El usuario ingresa los campos de usuario/contraseña y hace clic en enviar. NO es un
<form>usuario/contraseña que se envía a través de AJAX - Si el usuario/contraseña están bien, la página se recarga con el usuario conectado.
- Si el usuario/contraseña son incorrectos, la página NO se recarga pero aparece un mensaje de error en DIV y el usuario puede volver a intentarlo.
Aquí está el problema: el navegador nunca ofrece el mensaje habitual "¿Guardar esta contraseña? Sí / Nunca / Ahora no" que ofrece para otros sitios.
Intenté envolver las etiquetas <div>in <form>con "autocomplete='on'" pero eso no hizo ninguna diferencia.
¿Es posible hacer que el navegador ofrezca almacenar la contraseña sin tener que modificar mi flujo de inicio de sesión?
gracias eric
PD: para agregar a mi pregunta, definitivamente estoy trabajando con navegadores que almacenan contraseñas y nunca hice clic en "nunca para este sitio"... este es un problema técnico con el navegador que no detecta que es un formulario de inicio de sesión, no error del operador :-)
Encontré una solución completa para esta pregunta. (He probado esto en Chrome 27 y Firefox 21).
Hay dos cosas que debes saber:
- Active 'Guardar contraseña' y
- Restaurar el nombre de usuario/contraseña guardado
1. Active 'Guardar contraseña':
Para Firefox 21 , 'Guardar contraseña' se activa cuando detecta que hay un formulario que contiene un campo de texto de entrada y se envía el campo de contraseña de entrada. Entonces solo necesitamos usar
$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});
someFunctionForLogin()realiza el inicio de sesión ajax y recarga/redirecciona a la página iniciada mientras event.preventDefault()bloquea la redirección original debido al envío del formulario.
Si solo utiliza Firefox, la solución anterior es suficiente, pero no funciona en Chrome 27. Luego le preguntará cómo activar 'Guardar contraseña' en Chrome 27.
Para Chrome 27 , 'Guardar contraseña' se activa después de redirigirlo a la página enviando el formulario que contiene un campo de texto de entrada con el atributo nombre='nombre de usuario' y un campo de contraseña de entrada con el atributo nombre='contraseña' . Por lo tanto, no podemos bloquear la redirección debido al envío del formulario, pero podemos realizar la redirección después de haber iniciado sesión en ajax. (Si desea que el inicio de sesión ajax no recargue la página o no redirija a una página, desafortunadamente, mi solución no funciona). Luego, podemos usar
<form id='loginForm' action='signedIn.xxx' method='post'>
<input type='text' name='username'>
<input type='password' name='password'>
<button id='loginButton' type='button'>Login</button>
</form>
<script>
$('#loginButton').click(someFunctionForLogin);
function someFunctionForLogin(){
if(/*ajax login success*/) {
$('#loginForm').submit();
}
else {
//do something to show login fail(e.g. display fail messages)
}
}
</script>
El botón con type='button' hará que el formulario no se envíe cuando se haga clic en el botón. Luego, vincular una función al botón para iniciar sesión en ajax. Finalmente, la llamada $('#loginForm').submit();redirige a la página de inicio de sesión. Si la página de inicio de sesión es la página actual, puede reemplazar 'signedIn.xxx' por la página actual para realizar la 'actualización'.
Ahora encontrarás que el método para Chrome 27 también funciona en Firefox 21. Así que es mejor usarlo.
2. Restaure el nombre de usuario/contraseña guardado:
Si ya tiene el formulario de inicio de sesión codificado como HTML, no encontrará ningún problema para restaurar la contraseña guardada en el formulario de inicio de sesión.
Sin embargo, el nombre de usuario/contraseña guardados no se vincularán al formulario de inicio de sesión si usa js/jquery para crear el formulario de inicio de sesión dinámicamente, porque el nombre de usuario/contraseña guardados se vinculan solo cuando se carga el documento.
Por lo tanto, necesitaba codificar el formulario de inicio de sesión como HTML y usar js/jquery para mover/mostrar/ocultar el formulario de inicio de sesión dinámicamente.
Observación:
Si inicia sesión ajax, no agregue autocomplete='off'en forma de etiqueta como
<form id='loginForm' action='signedIn.xxx' autocomplete='off'>
autocomplete='off'hará que la restauración del nombre de usuario/contraseña en el formulario de inicio de sesión falle porque no permite que 'completa automáticamente' el nombre de usuario/contraseña.
Usando un botón para iniciar sesión:
Si utiliza un type="button"controlador onclickpara iniciar sesión usando ajax, entonces el navegador no ofrecerá guardar la contraseña.
<form id="loginform">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="doLogin" type="button" value="Login" onclick="login(this.form);" />
</form>
Dado que este formulario no tiene un botón de envío ni un campo de acción, el navegador no ofrecerá guardar la contraseña.
Usando un botón de enviar para iniciar sesión:
Sin embargo, si cambia el botón type="submit"y maneja el envío, el navegador le ofrecerá guardar la contraseña.
<form id="loginform" action="login.php" onSubmit="return login(this);">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="doLogin" type="submit" value="Login" />
</form>
Con este método, el navegador debería ofrecer guardar la contraseña.
Aquí está el Javascript utilizado en ambos métodos:
function login(f){
var username = f.username.value;
var password = f.password.value;
/* Make your validation and ajax magic here. */
return false; //or the form will post your data to login.php
}
Yo mismo he estado luchando con esto y finalmente pude localizar el problema y qué estaba causando que fallara.
Todo surgió del hecho de que mi formulario de inicio de sesión se estaba inyectando dinámicamente en la página (usando backbone.js). Tan pronto como incrusté mi formulario de inicio de sesión directamente en mi archivo index.html, todo funcionó de maravilla.
Creo que esto se debe a que el navegador debe ser consciente de que existe un formulario de inicio de sesión, pero como el mío se estaba inyectando dinámicamente en la página, no sabía que alguna vez existió un formulario de inicio de sesión "real".
