Como posso solicitar ao navegador que salve a senha?

Ei, estou trabalhando em um aplicativo Web que possui uma caixa de diálogo de login que funciona assim:

1. O usuário clica em "login"
2. O formulário de login HTML é carregado com AJAX e exibido em DIV na página
3. O usuário insere o usuário / passa nos campos e clica em enviar. NÃO é um <form>- usuário / passe são enviados via AJAX
4. Se usuário / senha estiver correto, a página será recarregada com o usuário conectado.
5. Se o usuário / senha estiver incorreto, a página NÃO será recarregada, mas a mensagem de erro será exibida no DIV e o usuário tentará novamente.

Aqui está o problema: o navegador nunca oferece o prompt usual "Salvar esta senha? Sim / Nunca / Agora não" para outros sites.

Tentei agrupar as tags <div>in <form>com "autocomplete = 'on'", mas isso não fez diferença.

É possível que o navegador ofereça o armazenamento da senha sem uma grande reformulação do meu fluxo de login?

obrigado Eric

ps para adicionar à minha pergunta, eu definitivamente estou trabalhando com navegadores que armazenam senhas e nunca clicou em "nunca para este site" ... esse é um problema técnico, pois o navegador não detecta que é um formulário de login, não erro de operador :-)

Encontrei uma solução completa para esta pergunta. (Eu testei isso no Chrome 27 e Firefox 21).

Há duas coisas a saber:

1. Acione 'Salvar senha' e
2. Restaurar o nome de usuário / senha salvos

1. Acione 'Salvar senha':

No Firefox 21 , 'Salvar senha' é acionado quando detecta que existe um formulário contendo o campo de texto de entrada e o campo de senha de entrada é enviado. Então, só precisamos usar

$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});

someFunctionForLogin()faz o login do ajax e recarrega / redireciona para a página event.preventDefault()conectada enquanto bloqueia o redirecionamento original devido ao envio do formulário.

Se você lida apenas com o Firefox, a solução acima é suficiente, mas não funciona no Chrome 27. Em seguida, você perguntará como acionar 'Salvar senha' no Chrome 27.

Para o Chrome 27 , 'Salvar senha' é acionado após ser redirecionado para a página, enviando o formulário que contém o campo de texto de entrada com o atributo name = 'nome de usuário' e o campo de senha de entrada com o atributo name = 'password' . Portanto, não podemos bloquear o redirecionamento devido ao envio do formulário, mas podemos fazer o redirecionamento após o login no ajax. (Se você deseja que o login do ajax não recarregue a página ou não o redirecione para uma página, infelizmente, minha solução não funciona.) Em seguida, 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>

O botão com o tipo = 'botão' fará com que o formulário não seja enviado quando o botão for clicado. Em seguida, vincule uma função ao botão para login no ajax. Por fim, a chamada $('#loginForm').submit();redireciona para a página conectada. Se a página conectada for a página atual, você poderá substituir 'assinadoIn.xxx' pela página atual para fazer a 'atualização'.

Agora, você descobrirá que o método para o Chrome 27 também funciona no Firefox 21. Portanto, é melhor usá-lo.

2. Restaure o nome de usuário / senha salvos:

Se você já possui o código de login codificado como HTML, não encontrará nenhum problema para restaurar a senha salva no código de login.
No entanto, o nome de usuário / senha salvos não serão vinculados ao formulário de login se você usar js / jquery para criar o formulário de login dinamicamente, porque o nome de usuário / senha salvo será vinculado apenas quando o documento for carregado.
Portanto, você precisava codificar o loginForm como HTML e usar js / jquery para mover / mostrar / ocultar o loginForm dinamicamente.

Observação: se você fizer o login do ajax, não adicione um autocomplete='off'formulário de tag como

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

autocomplete='off' fará com que o nome de usuário / senha da restauração no formulário de login falhe porque você não permite que ele 'complete automaticamente' o nome de usuário / senha.

Usando um botão para fazer login:

Se você usar um type="button"com um onclickmanipulador para fazer login ajax, o navegador não oferecerá o salvamento da senha.

<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 formulário não possui um botão de envio e não possui um campo de ação, o navegador não oferecerá o salvamento da senha.

Usando um botão de envio para fazer login:

No entanto, se você alterar o botão type="submit"e manipular o envio, o navegador oferecerá o salvamento da senha.

<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 esse método, o navegador deve oferecer para salvar a senha.

Aqui está o Javascript usado nos dois 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
}

Eu mesmo tenho lutado com isso e finalmente consegui rastrear o problema e o que estava causando o problema.

Tudo decorria do fato de que meu formulário de login estava sendo injetado dinamicamente na página (usando backbone.js). Assim que incorporei meu formulário de login diretamente ao meu arquivo index.html, tudo funcionou como um encanto.

Acho que é porque o navegador precisa estar ciente de que existe um formulário de login existente, mas como o meu estava sendo injetado dinamicamente na página, ele não sabia que um formulário de login "real" já existia.

Esta solução funcionou para mim postada por Eric nos fóruns de codificação

A razão pela qual isso não é solicitado é porque o navegador precisa da página para atualizar phiscisicamente de volta ao servidor. Um pequeno truque que você pode fazer é executar duas ações com o formulário. A primeira ação é enviada e chame seu código Ajax. Também faça com que o formulário direcione um iframe oculto.

Código:

<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">

Veja se isso faz com que o prompt apareça.

Eric

Postado em http://www.codingforums.com/showthread.php?t=123007

Existe uma solução definitiva para forçar todos os navegadores (testados: chrome 25, safari 5.1, IE10, Firefox 16) a solicitar salvar a senha usando jQuery e 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>

O truque é parar o formulário para enviar seu próprio caminho (event.stopPropagation ()), em vez disso, envie seu próprio código ($ .ajax ()) e, no retorno de chamada bem-sucedido do ajax, envie o formulário novamente para que o navegador o pegue e exiba o solicitação para salvar a senha. Você também pode adicionar algum manipulador de erros, etc.

Espero que tenha ajudado alguém.

Tentei a resposta do spetson, mas isso não funcionou para mim no Chrome 18. O que funcionou foi adicionar um manipulador de carga ao iframe e não interromper o envio (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();

O 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 () faz uma chamada AJAX e mostra a div loginForm, se ela falhar. (O serviço da web retornará 403 se o usuário não estiver autenticado).

Testado para trabalhar em FF e IE8 também.

O navegador pode não conseguir detectar que seu formulário é um formulário de login. De acordo com algumas das discussões nesta pergunta anterior , um navegador procura campos de formulário que se pareçam <input type="password">. Seu campo de formulário de senha é implementado de forma semelhante a isso?

Edit: Para responder às suas perguntas abaixo, acho que o Firefox detecta senhas form.elements[n].type == "password"(repetindo todos os elementos do formulário) e, em seguida, detecta o campo de nome de usuário pesquisando os elementos do formulário no campo de texto imediatamente antes do campo da senha (mais informações aqui ). Pelo que sei, seu formulário de login precisa fazer parte de um <form>Firefox ou não o detectará.

Abordagem simples de 2020

Isso ativará automaticamente o preenchimento automático e salvará a senha nos navegadores.

• autocomplete="on" (Formato)
• autocomplete="username" (entrada, email / nome de usuário)
• autocomplete="current-password" (insira a senha)

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

Confira mais na documentação da Apple: Habilitando o preenchimento automático de senha em um elemento de entrada HTML

Passei muito tempo lendo as várias respostas neste tópico e, para mim, era algo um pouco diferente (relacionado, mas diferente). No Mobile Safari (dispositivos iOS), se o formulário de login estiver ESCONDIDO quando a página carregar, o prompt não aparecerá (depois que você mostrar o formulário e enviá-lo). Você pode testar com o código a seguir, que exibe o formulário 5 segundos após o carregamento da página. Remova o JS e a tela: none e ele funciona. Ainda estou para encontrar uma solução para isso, postada apenas no caso de alguém ter o mesmo problema e não conseguir descobrir a 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>

Nenhuma das respostas já deixa claro que você pode usar a API de histórico do HTML5 para solicitar o salvamento da senha.

Primeiro, você precisa ter pelo menos um <form>elemento com uma senha e um campo de email ou nome de usuário. A maioria dos navegadores lida com isso automaticamente, desde que você use os tipos de entrada corretos (senha, email ou nome de usuário). Mas, para ter certeza, defina os valores de preenchimento automático corretamente para cada elemento de entrada.

Você pode encontrar uma lista dos valores de preenchimento automático aqui: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

O que você precisa são: username, emailecurrent-password

Então você tem duas possibilidades:

• Se você navegar para um URL diferente após o envio, a maioria dos navegadores solicitará que salve a senha.
• Se você não deseja redirecionar para um URL diferente ou até mesmo recarregar a página (por exemplo, um aplicativo de página única). Apenas evite os padrões do evento (usando e.preventDefault) em seu manipulador de envio do formulário. Você pode usar a API de histórico do HTML5 para enviar algo ao histórico para indicar que você 'navegou' dentro do aplicativo de página única. O navegador agora solicitará que você salve a senha e o nome de usuário.

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

Você também pode alterar o URL da página, mas isso não é necessário para solicitar a gravação da senha:

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

Documentação: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Isso tem o benefício adicional de que você pode impedir o navegador de salvar a senha se o usuário digitar a senha incorretamente. Observe que em alguns navegadores, o navegador sempre pede para salvar as credenciais, mesmo quando você chama .preventDefault e não usa a API de histórico.

Se você não quiser navegar para fora e / ou modificar o histórico do navegador, use o replaceState (isso também funciona).

O código a seguir é testado em

• Chrome 39.0.2171.99m: TRABALHANDO
• Android Chrome 39.0.2171.93: TRABALHANDO
• Navegador de ações do Android (Android 4.4): NÃO FUNCIONA
• Internet Explorer 5+ (emulado): TRABALHANDO
• Internet Explorer 11.0.9600.17498 / Versão da atualização: 11.0.15: TRABALHANDO
• Firefox 35.0: TRABALHANDO

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
}

Observações

• Para formulários de login dinâmicos, window.external.AutoCompleteSaveFormé necessária uma chamada para
• O Internet Explorer precisa de um campo "senha" para mostrar a caixa de diálogo senha da loja
• O Internet Explorer parece exigir um clique no botão enviar (mesmo que seja um clique falso)

Aqui está um exemplo de código de login do 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
    });
};

Observações

• "conta / login" define um cookie se for bem-sucedido
• O redirecionamento de página ("manualmente" iniciado pelo código js) parece ser necessário. Também testei um iframe-post, mas não obtive sucesso com isso.

Encontrei uma solução bastante elegante (ou hack, o que couber) para os usuários do Prototype.JS, sendo um dos últimos a usar o Prototype. Uma simples substituição dos métodos jQuery correspondentes deve fazer o truque.

Primeiro, verifique se há uma <form>tag e um botão de envio com um nome de classe que possa ser referenciado posteriormente (neste caso faux-submit) que esteja aninhado dentro de um elemento com um estilo definido display:nonecomo, conforme ilustrado abaixo:

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

Em seguida, crie um observador de cliques para o button"que" enviará o formulário conforme ilustrado:

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

Em seguida, crie um ouvinte para o submitevento e pare-o. event.stop()interromperá todos os eventos de envio no DOM, a menos que estejam envolvidos Event.findElementcom a classe do botão de entrada oculto (como acima, faux-submit):

document.observe('submit', function(event) {
    if (event.findElement(".faux-submit")) { 
        event.stop();
    }
});

Isso foi testado como funcionando no Firefox 43 e Chrome 50.

Provavelmente, seu site já está na lista em que o navegador é solicitado a não solicitar o salvamento de uma senha. No firefox, Opções -> Segurança -> Lembrar senha dos sites [caixa de seleção] - exceções [botão]

adicione um pouco mais de informação à resposta de @Michal Roharik.

se sua chamada ajax retornar um URL de retorno, você deve usar o jquery para alterar o atributo de ação do formulário para esse URL antes de chamar form.submit

ex.

$(form).attr('action', ReturnPath);
form.submitted = false;
form.submit(); 

Eu tive um problema semelhante, o login foi feito com o ajax, mas os navegadores (firefox, chrome, safari e IE 7-10) não ofereceriam salvar a senha se o formulário (#loginForm) fosse enviado com o ajax.

Como SOLUÇÃO , adicionei uma entrada de envio oculta (#loginFormHiddenSubmit) ao formulário enviado pelo ajax e após a chamada do ajax retornar sucesso, acionaria um clique na entrada de envio oculta. A página de qualquer maneira necessária para atualizar. O clique pode ser acionado com:

jQuery('#loginFormHiddenSubmit').click();

A razão pela qual eu adicionei o botão de envio oculto é porque:

jQuery('#loginForm').submit();

não ofereceria salvar senha no IE (embora tenha funcionado em outros navegadores).

Nem todo navegador (por exemplo, IE 6) tem opções para lembrar credenciais.

Uma coisa que você pode fazer é (uma vez que o usuário efetue login) armazenar as informações do usuário via cookie e ter a opção "Lembrar-me nesta máquina". Dessa forma, quando o usuário voltar novamente (mesmo se estiver desconectado), seu aplicativo da Web poderá recuperar o cookie e obter as informações do usuário (ID do usuário + ID da sessão) e permitir que ele continue trabalhando.

Espero que isso possa ser sugestivo. :-)

A verdade é que você não pode forçar o navegador a perguntar. Tenho certeza de que o navegador possui seu próprio algoritmo para adivinhar se você digitou um nome de usuário / senha, como procurar uma entrada de, type="password"mas não pode definir nada para forçar o navegador.

Você pode, como outros sugerem, adicionar informações do usuário em um cookie. Se você fizer isso, é melhor criptografá-lo pelo menos e não armazena sua senha. Talvez armazene o nome de usuário no máximo.

Você pode anexar a caixa de diálogo ao formulário, para que todas essas entradas estejam em um formulário. A outra coisa é tornar o campo de texto da senha logo após o campo de texto do nome de usuário.

Isso funciona muito melhor para mim, porque é 100% ajax e o navegador detecta o login.

<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 um cookie provavelmente seria a melhor maneira de fazer isso.

Você pode ter uma caixa de seleção para 'Lembrar de mim?' e faça com que o formulário crie um cookie para armazenar as informações de // login do usuário //. EDIT: Informações da sessão do usuário

Para criar um cookie, você precisará processar o formulário de login com PHP.