如何让浏览器提示保存密码? [英] How can I get browser to prompt to save password?

问题描述

嘿，我正在开发一个具有登录对话框的网络应用程序，其工作方式如下:

1. 用户点击登录"
2. 登录表单 HTML 加载 AJAX 并显示在页面上的 DIV 中
3. 用户在字段中输入用户/密码并点击提交.它不是
   -- 用户/密码是通过 AJAX 提交的
4. 如果用户/密码没问题，页面会在用户登录时重新加载.
5. 如果用户/密码错误，页面不会重新加载，但 DIV 中会出现错误消息，用户可以重试.

问题在于:浏览器从不提供它对其他网站所做的通常的保存此密码?是/从不/现在不"提示.

我尝试用autocomplete='on'"将

包装在 标签中，但没有任何区别.

是否可以让浏览器提供存储密码而无需对登录流程进行重大修改?

谢谢埃里克

附言补充一下我的问题，我肯定在使用存储密码的浏览器，而且我从来没有点击过从不用于此站点"......这是浏览器的技术问题，没有检测到它是登录表单，而不是操作员错误:-)

解决方案

我找到了这个问题的完整解决方案.(我已经在 Chrome 27 和 Firefox 21 中对此进行了测试).

有两件事要知道:

1. 触发保存密码"，以及
2. 恢复保存的用户名/密码

1.触发保存密码":

对于 Firefox 21，当检测到有包含输入文本字段的表单并提交输入密码字段时，将触发保存密码".所以我们只需要使用

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

someFunctionForLogin() 执行 ajax 登录并重新加载/重定向到登录页面，而 event.preventDefault() 由于提交表单而阻止原始重定向.

如果你只用Firefox，上面的解决方案就够了，但在Chrome 27中不起作用.然后你会问如何在Chrome 27中触发保存密码".

对于Chrome 27，保存密码"被触发之后通过提交包含输入文本字段的表单重定向到页面具有属性 name='username' 和输入密码字段具有属性 name='password'.因此，我们不能因为提交表单而阻止重定向，但我们可以在完成 ajax 登录后进行重定向.(如果你想让ajax登录不重新加载页面或者不重定向到一个页面，不幸的是，我的解决方案不起作用.)然后，我们可以使用

<input type='text' name='username'><input type='password' name='password'><button id='loginButton' type='button'>登录</button></表单><脚本>$('#loginButton').click(someFunctionForLogin);函数 someFunctionForLogin(){if(/*ajax登录成功*/){$('#loginForm').submit();}别的 {//做一些事情来显示登录失败(例如显示失败消息)}}

带有 type='button' 的按钮将使单击按钮时不提交表单.然后，绑定一个函数到ajax登录按钮.最后，调用 $('#loginForm').submit(); 重定向到登录页面.如果登录页面是当前页面，那么你可以用当前页面替换'signedIn.xxx'来'刷新'.

现在，你会发现 Chrome 27 的方法在 Firefox 21 中也可以使用.所以最好使用它.

2.恢复保存的用户名/密码:

如果您已经将loginForm硬编码为HTML，那么您将发现在loginForm中恢复保存的密码没有问题.
但是，如果使用js/jquery动态创建loginForm，保存的用户名/密码不会绑定到loginForm，因为保存的用户名/密码只有在文档加载时才会绑定.
因此，您需要将 loginForm 硬编码为 HTML 并使用 js/jquery 动态移动/显示/隐藏 loginForm.

<小时>

备注:如果你做ajax登录，不要像

一样在标签形式中添加autocomplete='off'

autocomplete='off' 将导致将用户名/密码恢复到 loginForm 中失败，因为您不允许它自动完成"用户名/密码.

Hey, I'm working on a web app that has a login dialog that works like this:

1. User clicks "login"
2. Login form HTML is loaded with AJAX and displayed in DIV on page
3. User enters user/pass in fields and clicks submit. It's NOT a <form> -- user/pass are submitted via AJAX
4. If user/pass are okay, page reloads with user logged in.
5. If user/pass are bad, page does NOT reload but error message appears in DIV and user gets to try again.

Here's the problem: the browser never offers the usual "Save this password? Yes / Never / Not Now" prompt that it does for other sites.

I tried wrapping the <div> in <form> tags with "autocomplete='on'" but that made no difference.

Is it possible to get the browser to offer to store the password without a major rework of my login flow?

thanks Eric

p.s. to add to my question, I'm definitely working with browers that store passwords, and I've never clicked "never for this site" ...this is a technical issue with the browser not detecting that it's a login form, not operator error :-)

解决方案

I found a complete solution for this question. (I've tested this in Chrome 27 and Firefox 21).

There are two things to know:

1. Trigger 'Save password', and
2. Restore the saved username/password

1. Trigger 'Save password':

For Firefox 21, 'Save password' is triggered when it detects that there is a form containing input text field and input password field is submitted. So we just need to use

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

someFunctionForLogin() does the ajax login and reload/redirect to the signed in page while event.preventDefault() blocks the original redirection due to submitting the form.

If you deal with Firefox only, the above solution is enough but it doesn't work in Chrome 27. Then you will ask how to trigger 'Save password' in Chrome 27.

For Chrome 27, 'Save password' is triggered after it is redirected to the page by submitting the form which contains input text field with attribute name='username' and input password field with attribute name='password'. Therefore, we cannot block the redirection due to submitting the form but we can make the redirection after we've done the ajax login. (If you want the ajax login not to reload the page or not to redirect to a page, unfortunately, my solution doesn't work.) Then, we can use

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

Button with type='button' will make the form not to be submitted when the button is clicked. Then, binding a function to the button for ajax login. Finally, calling $('#loginForm').submit(); redirects to the signed-in page. If the signed-in page is current page, then you can replace 'signedIn.xxx' by current page to make the 'refresh'.

Now, you will find that the method for Chrome 27 also works in Firefox 21. So it is better to use it.

2. Restore the saved username/password:

If you already have the loginForm hard-coded as HTML, then you will found no problem to restore the saved password in the loginForm.
However, the saved username/password will not be bind to the loginForm if you use js/jquery to make the loginForm dynamically, because the saved username/password is bind only when the document loads.
Therefore, you needed to hard-code the loginForm as HTML and use js/jquery to move/show/hide the loginForm dynamically.

---

Remark: If you do the ajax login, do not add autocomplete='off' in tag form like

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

autocomplete='off' will make the restoring username/password into the loginForm fails because you do not allow it 'autocompletes' the username/password.

这篇关于如何让浏览器提示保存密码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！