我怎样才能得到浏览器提示保存密码？ [英] How can I get browser to prompt to save password?

问题描述

嘿，我正在一个web应用程序，有一个登录对话框，是这样的：

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

1. 在用户点击登录
2. 在登录表单HTML装有AJAX和页面上显示的DIV
3. 在用户输入用户名/密码的字段并点击提交。这不是一个＆LT;形式GT; - 用户名/密码通过AJAX提交
4. 如果用户名/密码都还好，页面重新加载与用户登录。
5. 如果用户名/密码是坏的，页面不会重新加载，但出现在DIV错误消息，并且用户获取重试。

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.

我试过包裹＆LT; D​​IV＆GT; 在＆LT;形式GT; 标签与自动完成='上' 但并没有区别。

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?

谢谢 埃里克

P.S。添加到我的问题，我肯定正在与存储密码browers，我从来没有点击从来没有为这个网站的......这是与浏览器还没有检测到，这是一个登录表单，而不是运营商的技术问题错误： - ）

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

推荐答案

我发现这个问题的完整解决方案。 （我已经在Chrome 27和Firefox 21测试这一点）

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

有两件事情知道的：

1. 在触发保存密码，和
2. 恢复已保存的用户名/密码

对于的火狐21 的，保存密码检测到存在是一个包含输入文本字段，并输入密码字段提交一个表单时被触发。因此，我们只需要使用

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（）做了ajax登录和重新载入/重定向到签署页，而事件。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.

如果你处理的Firefox只，上述方案是足够的，但它并没有在Chrome 27工作，那么你会问如何触发保存密码在Chrome 27

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.

对于的 Chrome浏览器27 的，保存密码被触发的在它是通过提交包含输入文本字段的形式重定向到页属性名='用户名'并输入密码字段的属性名='密码'。因此，我们不能阻止重定向由于提交的形式，但我们可以做的重定向，我们已经做了AJAX登录后。 （如果你想在AJAX登录不要刷新页面或者不重定向到一个页面，不幸的是，我的解决办法是行不通的。），然后，我们可以使用

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>

按钮类型='按钮'就会使窗体不单击该按钮时提交。 然后，装订功能，为AJAX的登录按钮。最后，调用 $（'＃登录表单）提交（）; 重定向到登录的页面。如果登录的页面是当前页面，那么你就可以取代signedIn.xxx由当前页面进行刷新。

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

现在，你会发现，该方法适用于Chrome 27也适用在Firefox 21。因此，它是更好地使用它。

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

如果您已经有登录表单硬codeD为HTML，那么你会发现没有问题的登录表单恢复保存​​的密码。
但是，保存的用户名/密码不会被绑定到登录表单，如果你使用的js / jquery的动态让登录表单，因为保存的用户名/密码，绑定的文件只加载时。
因此，你需要硬code中的登录表单HTML和用js / jQuery的移动/显示/隐藏动态的登录表单。

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.

注：的 如果你这样做了ajax登录，不要在标签的形式加入自动完成=关闭喜欢

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