ajax - smart - ¿Cómo puedo solicitar al navegador que guarde la contraseña?
recuperar contraseñas borradas de chrome (18)
Hola, estoy trabajando en una aplicación web que tiene un 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 el usuario / paso en los campos y hace clic en enviar. NO es un
<form>- user / pass enviado a través de AJAX - Si el usuario / pase está bien, la página se vuelve a cargar con el usuario conectado.
- Si el usuario / pase es incorrecto, la página NO vuelve a cargar, pero aparece un mensaje de error en DIV y el usuario puede volver a intentarlo.
Este es el problema: el navegador nunca ofrece el aviso habitual "¿Guardar esta contraseña? Sí / Nunca / No ahora" que hace para otros sitios.
Intenté ajustar las <div> en <form> con "autocomplete = ''on''", pero eso no hizo ninguna diferencia.
¿Es posible hacer que el navegador ofrezca almacenar la contraseña sin una revisión importante de mi flujo de inicio de sesión?
gracias Eric
ps para agregar a mi pregunta, definitivamente estoy trabajando con browers que almacenan contraseñas, y nunca he hecho clic en "never for this site" ... 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 :-)
Usando un botón para iniciar sesión:
Si utiliza un type="button" con un controlador onclick para iniciar sesión utilizando 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>
Como este formulario no tiene un botón de envío y no tiene 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 para type="submit" y manejar 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>
Usando 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
}
El siguiente código se prueba en
- Chrome 39.0.2171.99m: FUNCIONANDO
- Android Chrome 39.0.2171.93: FUNCIONANDO
- Android stock-browser (Android 4.4): NO FUNCIONA
- Internet Explorer 5+ (emulado): FUNCIONANDO
- Internet Explorer 11.0.9600.17498 / Versión de actualización: 11.0.15: FUNCIONAMIENTO
- Firefox 35.0: FUNCIONANDO
JS-Fiddle:
http://jsfiddle.net/ocozggqu/
Código postal:
// modified post-code from https://.com/questions/133925/javascript-post-request-like-a-form-submit
function post(path, params, method)
{
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.id = "dynamicform" + Math.random();
form.setAttribute("method", method);
form.setAttribute("action", path);
form.setAttribute("style", "display: none");
// Internet Explorer needs this
form.setAttribute("onsubmit", "window.external.AutoCompleteSaveForm(document.getElementById(''" + form.id + "''))");
for (var key in params)
{
if (params.hasOwnProperty(key))
{
var hiddenField = document.createElement("input");
// Internet Explorer needs a "password"-field to show the store-password-dialog
hiddenField.setAttribute("type", key == "password" ? "password" : "text");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
var submitButton = document.createElement("input");
submitButton.setAttribute("type", "submit");
form.appendChild(submitButton);
document.body.appendChild(form);
//form.submit(); does not work on Internet Explorer
submitButton.click(); // "click" on submit-button needed for Internet Explorer
}
Observaciones
- Para formularios de inicio de sesión dinámicos, se necesita una llamada a
window.external.AutoCompleteSaveForm - Internet Explorer necesita un campo "contraseña" para mostrar el cuadro de diálogo de contraseña de la tienda
- Internet Explorer parece requerir un clic en el botón de enviar (incluso si es un clic falso)
Aquí hay una muestra de código de acceso ajax:
function login(username, password, remember, redirectUrl)
{
// "account/login" sets a cookie if successful
return $.postJSON("account/login", {
username: username,
password: password,
remember: remember,
returnUrl: redirectUrl
})
.done(function ()
{
// login succeeded, issue a manual page-redirect to show the store-password-dialog
post(
redirectUrl,
{
username: username,
password: password,
remember: remember,
returnUrl: redirectUrl
},
"post");
})
.fail(function ()
{
// show error
});
};
Observaciones
- "cuenta / inicio de sesión" establece una cookie si tiene éxito
- La redirección de página ("manual" iniciada por js-code) parece ser necesaria. También probé una publicación de iframe, pero no tuve éxito con eso.
Encontré una solución bastante elegante (o hackea, lo que sea que encaje) para los usuarios de Prototype.JS, siendo uno de los últimos que usaron Prototype. Una simple sustitución de los métodos jQuery correspondientes debería hacer el truco.
Primero, asegúrese de que haya una etiqueta <form> y un botón de enviar con un nombre de clase que se pueda referenciar más adelante (en este caso faux-submit ) que esté anidado dentro de un elemento con un estilo configurado para display:none , como se muestra a continuación :
<form id="login_form" action="somewhere.php" method="post">
<input type="text" name="login" />
<input type="password" name="password" />
<div style="display:none">
<input class="faux-submit" type="submit" value="Submit" />
</div>
<button id="submit_button">Login</button>
</form>
A continuación, cree un observador de clic para el button , que "enviará" el formulario como se muestra a continuación:
$(''submit_button'').observe(''click'', function(event) {
$(''login_form'').submit();
});
Luego crea un oyente para el evento submit y detentelo. event.stop() detendrá todos los eventos de envío en el DOM a menos que esté envuelto en Event.findElement con la clase del botón de entrada oculto (como arriba, faux-submit ):
document.observe(''submit'', function(event) {
if (event.findElement(".faux-submit")) {
event.stop();
}
});
Esto se prueba como que funciona en Firefox 43 y Chrome 50.
Encontré una solución completa para esta pregunta. (He probado esto en Chrome 27 y Firefox 21).
Hay dos cosas que debe saber:
- Desencadenar ''Guardar contraseña'', y
- Restaurar el nombre de usuario / contraseña guardado
1. Dispara ''Guardar contraseña'':
Para Firefox 21 , se activa ''Guardar contraseña'' 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 tenemos que usar
$(''#loginButton'').click(someFunctionForLogin);
$(''#loginForm'').submit(function(event){event.preventDefault();});
someFunctionForLogin() hace el inicio de sesión de ajax y recarga / redirige a la página de inicio de event.preventDefault() mientras event.preventDefault() bloquea la redirección original debido a enviar el formulario.
Si solo trabajas con Firefox, la solución anterior es suficiente, pero no funciona en Chrome 27. Luego preguntarás cómo activar ''Guardar contraseña'' en Chrome 27.
Para Chrome 27 , se activa ''Guardar contraseña'' después de que se redirige a la página enviando el formulario que contiene el campo de entrada de texto con nombre de atributo = ''nombre de usuario'' y campo de entrada de contraseña con nombre de atributo = ''contraseña'' . Por lo tanto, no podemos bloquear la redirección debido a enviar el formulario, pero podemos hacer la redirección después de que hayamos hecho el inicio de sesión de ajax. (Si desea que el inicio de sesión de ajax no vuelva a cargar la página o no redirija a una página, desafortunadamente mi solución no funciona). Entonces, 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 tipo = ''botón'' hará que el formulario no se envíe cuando se haga clic en el botón. Luego, vinculando una función al botón para el inicio de sesión de ajax. Finalmente, llamando a $(''#loginForm'').submit(); redirige a la página de inicio de sesión. Si la página de inicio de sesión es actual, puede reemplazar ''signedIn.xxx'' por página actual para hacer ''refresh''.
Ahora, descubrirá que el método para Chrome 27 también funciona en Firefox 21. Por lo tanto, es mejor usarlo.
2. Restaure el nombre de usuario / contraseña guardado:
Si ya tiene el loginForm codificado como HTML, no encontrará ningún problema para restaurar la contraseña guardada en el loginForm.
Sin embargo, el nombre de usuario / contraseña guardado no se vinculará al loginForm si usa js / jquery para hacer que loginForm sea dinámicamente, ya que el nombre de usuario / contraseña guardado es vinculante solo cuando se carga el documento.
Por lo tanto, era necesario codificar el loginForm como HTML y usar js / jquery para mover / mostrar / ocultar el loginForm dinámicamente.
Observación: si haces el inicio de sesión de 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 loginForm falle porque no se permite ''autocompleta'' el nombre de usuario / contraseña.
Es posible que el navegador no pueda detectar que su formulario es un formulario de inicio de sesión. De acuerdo con algo de la discusión en esta pregunta previa , un buscador busca campos de formulario que se vean como <input type="password"> . ¿Su campo de formulario de contraseña se implementó de manera similar?
Editar: Para responder a sus preguntas a continuación, creo que Firefox detecta las contraseñas por form.elements[n].type == "password" (iterando a través de todos los elementos del formulario) y luego detecta el campo de nombre de usuario buscando hacia atrás los elementos de formulario para el campo de texto inmediatamente antes del campo de contraseña (más información here ). Por lo que puedo decir, su formulario de inicio de sesión debe ser parte de una <form> o Firefox no lo detectará.
Es probable que su sitio ya esté en la lista donde se le dice al navegador que no solicite guardar una contraseña. En Firefox, Opciones -> Seguridad -> Recordar contraseña para sitios [casilla de verificación] - excepciones [botón]
Esta solución funcionó para mí publicado por Eric en los foros de codificación
La razón por la que no se solicita es porque el navegador necesita que la página vuelva a actualizar físicamente al servidor. Un pequeño truco que puedes hacer es realizar dos acciones con la forma. La primera acción es onsubmit que llame a su código Ajax. También tenga el formulario de destino un iframe oculto.
Código:
<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">
Vea si eso hace que aparezca el mensaje.
Eric
Publicado en http://www.codingforums.com/showthread.php?t=123007
Esto funciona mucho mejor para mí, porque está 100% ajaxed y el navegador detecta el inicio de sesión.
<form id="loginform" action="javascript:login(this);" >
<label for="username">Username</label>
<input name="username" type="text" value="" required="required" />
<label for="password">Password</label>
<input name="password" type="password" value="" required="required" />
<a href="#" onclick="document.getElementById("loginform").submit();" >Login</a>
</form>
Existe una solución definitiva para forzar a todos los navegadores (probado: Chrome 25, Safari 5.1, IE10, Firefox 16) a solicitar guardar la contraseña usando jQuery y ajax request:
JS:
$(document).ready(function() {
$(''form'').bind(''submit'', $(''form''), function(event) {
var form = this;
event.preventDefault();
event.stopPropagation();
if (form.submitted) {
return;
}
form.submitted = true;
$.ajax({
url: ''/login/api/jsonrpc/'',
data: {
username: $(''input[name=username]'').val(),
password: $(''input[name=password]'').val()
},
success: function(response) {
form.submitted = false;
form.submit(); //invoke the save password in browser
}
});
});
});
HTML:
<form id="loginform" action="login.php" autocomplete="on">
<label for="username">Username</label>
<input name="username" type="text" value="" autocomplete="on" />
<label for="password">Password</label>
<input name="password" type="password" value="" autocomplete="on" />
<input type="submit" name="doLogin" value="Login" />
</form>
El truco está en detener el formulario para enviarlo por su cuenta (event.stopPropagation ()), en su lugar envíe su propio código ($ .ajax ()) y en la exitosa devolución de llamada del AJAX envíe el formulario nuevamente para que el navegador lo capture y muestre el solicitud para guardar la contraseña. También puede agregar algún controlador de errores, etc.
Espero que haya ayudado a alguien.
He estado luchando con esto yo mismo, y finalmente pude rastrear el problema y lo que estaba causando que fallara.
Todo se derivó 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 incorporé mi formulario de inicio de sesión directamente en mi archivo index.html, todo funcionó como un amuleto.
Creo que esto se debe a que el navegador debe ser consciente de que existe un formulario de inicio de sesión existente, pero como el mío se inyectó dinámicamente en la página, no sabía que existiera un formulario de acceso "real".
Intenté la respuesta de Spetson, pero no funcionó para mí en Chrome 18. Lo que sí funcionó fue agregar un manejador de carga al iframe y no interrumpir el envío (jQuery 1.7):
function getSessions() {
$.getJSON("sessions", function (data, textStatus) {
// Do stuff
}).error(function () { $(''#loginForm'').fadeIn(); });
}
$(''form'', ''#loginForm'').submit(function (e) {
$(''#loginForm'').fadeOut();
});
$(''#loginframe'').on(''load'', getSessions);
getSessions();
El HTML:
<div id="loginForm">
<h3>Please log in</h3>
<form action="/login" method="post" target="loginframe">
<label>Username :</label>
<input type="text" name="login" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password"/>
<br/>
<button type="submit" id="loginB" name="loginB">Login!</button>
</form>
</div>
<iframe id="loginframe" name="loginframe"></iframe>
getSessions () hace una llamada AJAX y muestra el div de loginForm si falla. (El servicio web devolverá 403 si el usuario no está autenticado).
Probado para trabajar en FF e IE8 también.
La verdad es que no puedes obligar al navegador a preguntar. Estoy seguro de que el navegador tiene su propio algoritmo para adivinar si ingresó un nombre de usuario / contraseña, como buscar una entrada de type="password" pero no puede configurar nada para forzar el navegador.
Podría, como sugieren otros, agregar información de usuario en una cookie. Si hace esto, es mejor encriptarlo como mínimo y no almacenar su contraseña. Tal vez almacenar su nombre de usuario como máximo.
No todos los navegadores (por ejemplo, IE 6) tienen opciones para recordar las credenciales.
Una cosa que puede hacer es (almacenar una vez que el usuario inicie sesión con éxito) almacenar la información del usuario a través de una cookie y tener la opción "Recordarme en esta máquina". De esta forma, cuando el usuario vuelva a ingresar (incluso si se desconectó), su aplicación web puede recuperar la cookie y obtener la información del usuario (ID de usuario + ID de sesión) y le permite seguir trabajando.
Espero que esto pueda ser sugerente. :-)
Pasé mucho tiempo leyendo las diversas respuestas en este hilo, y para mí, en realidad era algo ligeramente diferente (relacionado, pero diferente). En Mobile Safari (dispositivos iOS), si el formulario de inicio de sesión es OCULTADO cuando se carga la página, el aviso no aparecerá (después de mostrar el formulario y luego enviarlo). Puede probar con el siguiente código, que muestra el formulario 5 segundos después de la carga de la página. Retire el JS y la pantalla: ninguno y funciona. Todavía tengo que encontrar una solución a esto, publicada en caso de que alguien más tenga el mismo problema y no pueda descubrir la causa.
JS:
$(function() {
setTimeout(function() {
$(''form'').fadeIn();
}, 5000);
});
HTML:
<form method="POST" style="display: none;">
<input name=''email'' id=''email'' type=''email'' placeholder=''email'' />
<input name=''password'' id=''password'' type=''password'' placeholder=''password'' />
<button type="submit">LOGIN</button>
</form>
Puede adjuntar el cuadro de diálogo al formulario, por lo que todas esas entradas están en un formulario. La otra cosa es hacer el campo de texto de la contraseña justo después del campo de texto de nombre de usuario.
Tuve un problema similar, el inicio de sesión se realizó con ajax, pero los navegadores (Firefox, Chrome, Safari e IE 7-10) no ofrecen guardar la contraseña si el formulario (#loginForm) se envía con ajax.
Como SOLUCIÓN , he agregado la entrada de envío oculto (#loginFormHiddenSubmit) al formulario que fue enviado por ajax y después de que la llamada ajax devolviera el éxito, activaría un clic en la entrada de envío oculto. La página necesita refrescarse. El clic se puede activar con:
jQuery(''#loginFormHiddenSubmit'').click();
La razón por la que agregué el botón de envío oculto es porque:
jQuery(''#loginForm'').submit();
no ofrecería guardar la contraseña en IE (aunque ha funcionado en otros navegadores).
Usar una galleta probablemente sea la mejor manera de hacerlo.
Podría tener una casilla de verificación para "¿Recordarme?" y haga que el formulario cree una cookie para almacenar la // información de inicio de sesión // del usuario. EDITAR: Información de la sesión del usuario
Para crear una cookie, deberá procesar el formulario de inicio de sesión con PHP.
agrega un poco más de información a la respuesta de @Michal Roharik.
si su llamada ajax devolverá una url de retorno, debe usar jquery para cambiar el atributo de acción de formulario a esa url antes de llamar a form.submit
ex.
$(form).attr(''action'', ReturnPath);
form.submitted = false;
form.submit();