¿Cómo puedo hacer que el navegador solicite guardar la contraseña?

Hola, estoy trabajando en una aplicación web que tiene un cuadro de diálogo de inicio de sesión que funciona así:

1. El usuario hace clic en "iniciar sesión"
2. El formulario de inicio de sesión HTML se carga con AJAX y se muestra en DIV en la página
3. El usuario ingresa user / pass en los campos y hace clic en enviar. NO es un <form>usuario / pase enviado a través de AJAX
4. Si el usuario / pase está bien, la página se vuelve a cargar con el usuario conectado.
5. Si el usuario / pase es incorrecto, la página NO se vuelve a cargar, 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 / No ahora" que ofrece para otros sitios.

He intentado envolver el <div>de <form>etiquetas con "autocomplete = 'on'", pero que no hizo ninguna diferencia.

¿Es posible hacer que el navegador ofrezca almacenar la contraseña sin una modificación importante de 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 he hecho 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:

1. Desencadenar 'Guardar contraseña' y
2. Restaurar el nombre de usuario / contraseña guardado

1. Activar 'Guardar contraseña':

Para Firefox 21 , 'Guardar contraseña' se activa cuando detecta que hay un formulario que contiene el 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()hace el inicio de sesión ajax y vuelve a cargar / redirigir a la página de inicio de sesión mientras event.preventDefault()bloquea la redirección original debido al envío del 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 , 'Guardar contraseña' se activa después de que se redirige a la página enviando el formulario que contiene el campo de texto de entrada con el nombre de atributo = 'nombre de usuario' y el campo de contraseña de entrada con el nombre de atributo = '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 realizado el inicio de sesión ajax. (Si desea que el inicio de sesión 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 type = 'button' hará que el formulario no se envíe al hacer clic en el botón. Luego, vincula 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 'firmadoIn.xxx' por la página actual para hacer la 'actualización'.

Ahora, encontrará 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, entonces 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 el loginForm dinámicamente, porque el nombre de usuario / contraseña guardado se vincula solo cuando se carga el documento.
Por lo tanto, debe codificar el loginForm como HTML y usar js / jquery para mover / mostrar / ocultar el loginForm dinámicamente.

Observación: si hace el inicio de sesión ajax, no agregue autocomplete='off'en forma de etiqueta como

<form id='loginForm' action='signedIn.xxx' autocomplete='off'>

autocomplete='off' hará que el nombre de usuario / contraseña de restauración en el formulario de inicio de sesión falle porque no permite que 'autocomplete' el nombre de usuario / contraseña.

Usando un botón para iniciar sesión:

Si usa un type="button"con un onclickcontrolador para iniciar sesión 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 enviar y no tiene 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
}

He estado luchando con esto yo mismo, y finalmente pude rastrear el problema y lo que estaba causando que fallara.

Todo se debió al hecho de que mi formulario de inicio de sesión se inyectaba dinámicamente en la página (usando backbone.js). Tan pronto como inserto 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 existente, pero dado que el mío se estaba inyectando dinámicamente en la página, no sabía que existía un formulario de inicio de sesión "real".

Esta solución funcionó para mí publicada por Eric en los foros de codificación

La razón por la que no lo solicita es porque el navegador necesita que la página se actualice físicamente para volver a actualizar al servidor. Un pequeño truco que puedes hacer es realizar dos acciones con el formulario. La primera acción es enviar, haga que llame a su código Ajax. También haga que la forma apunte a 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

Hay una solución definitiva para obligar a todos los navegadores (probado: Chrome 25, Safari 5.1, IE10, Firefox 16) a solicitar que se guarde la contraseña con jQuery y ajax solicitud :

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 consiste en detener el formulario para enviarlo a su manera (event.stopPropagation ()), en su lugar envíe su propio código ($ .ajax ()) y en la devolución de llamada exitosa del ajax envíe el formulario nuevamente para que el navegador lo capture y muestre el solicitud de guardar contraseña. También puede agregar algún controlador de errores, etc.

Espero que haya ayudado a alguien.

Intenté la respuesta de Spetson, pero eso no funcionó para mí en Chrome 18. Lo que funcionó fue agregar un controlador 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 () realiza una llamada AJAX y muestra el div loginForm si falla. (El servicio web devolverá 403 si el usuario no está autenticado).

Probado para trabajar en FF e IE8 también.

Es posible que el navegador no pueda detectar que su formulario es un formulario de inicio de sesión. De acuerdo con parte de la discusión en esta pregunta anterior , un navegador busca campos de formulario similares <input type="password">. ¿Su campo de formulario de contraseña implementado es similar a eso?

Editar: para responder a sus preguntas a continuación, creo que Firefox detecta las contraseñas form.elements[n].type == "password"(iterando a través de todos los elementos del formulario) y luego detecta el campo del nombre de usuario buscando hacia atrás a través de los elementos del formulario para el campo de texto inmediatamente antes del campo de la contraseña (más información aquí ). Por lo que puedo decir, su formulario de inicio de sesión debe ser parte de <form>o Firefox no lo detectará.

Enfoque simple 2020

Esto habilitará automáticamente el autocompletado y guardará la contraseña en los navegadores.

• autocomplete="on" (formar)
• autocomplete="username" (entrada, correo electrónico / nombre de usuario)
• autocomplete="current-password" (contraseña de entrada)

<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

Vea más en la documentación de Apple: Habilitación de Autocompletar contraseña en un elemento de entrada HTML

Pasé mucho tiempo leyendo las diferentes 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 está OCULTADO cuando se carga la página, el mensaje 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, solo publicado 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>

Ninguna de las respuestas ya deja en claro que puede usar la API de historial HTML5 para solicitar que se guarde la contraseña.

Primero, debe asegurarse de tener al menos un <form>elemento con una contraseña y un campo de correo electrónico o nombre de usuario. La mayoría de los navegadores manejan esto automáticamente siempre que use los tipos de entrada correctos (contraseña, correo electrónico o nombre de usuario). Pero para estar seguro, configure los valores de autocompletar correctamente para cada elemento de entrada.

Puede encontrar una lista de los valores de autocompletar aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Los que necesita son: username, emailycurrent-password

Entonces tienes dos posibilidades:

• Si navega a una URL diferente después de enviar, la mayoría de los navegadores le pedirán que guarde la contraseña.
• Si no desea redirigir a una URL diferente o incluso volver a cargar la página (por ejemplo, una sola aplicación de página). Simplemente evite los valores predeterminados del evento (usando e.preventDefault) en su controlador de envío del formulario. Puede usar la API de historial HTML5 para insertar algo en el historial para indicar que 'navegó' dentro de su aplicación de página única. El navegador le pedirá que guarde la contraseña y el nombre de usuario.

history.pushState({}, "Your new page title");

También puede cambiar la URL de la página, pero eso no es necesario para solicitar que guarde la contraseña:

history.pushState({}, "Your new page title", "new-url");

Documentación: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Esto tiene el beneficio adicional de que puede evitar que el navegador solicite guardar la contraseña si el usuario la ingresó incorrectamente. Tenga en cuenta que en algunos navegadores el navegador siempre le pedirá que guarde las credenciales, incluso cuando llame a .preventDefault y no use la API de historial.

Si no desea navegar y / o modificar el historial del navegador, puede usar replaceState en su lugar (esto también funciona).

El siguiente código se prueba en

• Chrome 39.0.2171.99m: TRABAJANDO
• Android Chrome 39.0.2171.93: FUNCIONANDO
• Android stock-browser (Android 4.4): NO FUNCIONA
• Internet Explorer 5+ (emulado): TRABAJANDO
• Internet Explorer 11.0.9600.17498 / Actualización-Versión: 11.0.15: TRABAJANDO
• Firefox 35.0: TRABAJANDO

JS-Fiddle:
http://jsfiddle.net/ocozggqu/

Código postal:

// modified post-code from /programming/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 window.external.AutoCompleteSaveFormse necesita una llamada a
• Internet Explorer necesita un campo de "contraseña" para mostrar el diálogo de contraseña de la tienda
• Internet Explorer parece requerir un clic en el botón Enviar (incluso si es un clic falso)

Aquí hay un ejemplo de código de inicio de sesión 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
• Parece que se requiere redireccionamiento de página ("manualmente" iniciado por js-code). También probé una publicación de iframe, pero no tuve éxito con eso.

Encontré una solución bastante elegante (o pirateo, lo que sea apropiado) para los usuarios de Prototype.JS, siendo uno de los últimos holdouts con Prototype. Una simple sustitución de los métodos jQuery correspondientes debería ser suficiente.

Primero, asegúrese de que haya una <form>etiqueta y un botón de envío con un nombre de clase al que se pueda hacer referencia más adelante (en este caso faux-submit) que esté anidado dentro de un elemento con un estilo establecido display:none, como se ilustra 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>

Luego cree un observador de clics para el button, que "enviará" el formulario como se ilustra:

$('submit_button').observe('click', function(event) {
    $('login_form').submit();
});

Luego cree un oyente para el submitevento y deténgalo. event.stop()detendrá todos los eventos de envío en el DOM a menos que esté envuelto Event.findElementcon 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 funcionando en Firefox 43 y Chrome 50.

Probablemente 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]

agregue 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(); 

Tuve un problema similar, el inicio de sesión se realizó con ajax, pero los navegadores (firefox, chrome, safari e IE 7-10) no ofrecerían guardar la contraseña si el formulario (#loginForm) se envía con ajax.

Como SOLUCIÓN , agregué una entrada de envío oculta (#loginFormHiddenSubmit) al formulario que envió ajax y, después de que la llamada ajax devolviera el éxito, activaría un clic para ingresar la entrada oculta. La página de cualquier manera necesitaba actualizarse. 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).

No todos los navegadores (por ejemplo, IE 6) tienen opciones para recordar credenciales.

Una cosa que puede hacer es (una vez que el usuario inicia sesión con éxito) almacenar la información del usuario a través de cookies y tener la opción "Recordarme en esta máquina". De esa manera, cuando el usuario vuelve (incluso si ha cerrado la sesión), su aplicación web puede recuperar la cookie y obtener la información del usuario (ID de usuario + ID de sesión) y permitirle continuar trabajando.

Espero que esto pueda ser sugerente. :-)

La verdad es que no puedes obligar al navegador a preguntar. Estoy seguro de que el navegador tiene su propio algoritmo para adivinar si ha ingresado un nombre de usuario / contraseña, como buscar una entrada de type="password"pero no puede configurar nada para forzar el navegador.

Como otros sugieren, podría agregar información de usuario en una cookie. Si hace esto, es mejor que lo cifre al menos y no almacene su contraseña. Quizás almacene su nombre de usuario como máximo.

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 contraseña justo después del campo de texto de nombre de usuario.

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>

Usar una cookie probablemente sería 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 sesión de usuario

Para crear una cookie, deberá procesar el formulario de inicio de sesión con PHP.