如何让 Chrome 记住 AJAX 表单的密码？

Question

我在登录页面上使用 AJAX 进行快速输入验证。如果一切正确，用户将被重定向。

这是代码：

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
   }
...

它在所有浏览器中都运行良好。但 Chrome 有一个问题。它不提供保存密码的功能。

当 JavaScript 关闭时，密码会被保存，因此问题肯定是重定向到新位置。

我该如何解决这个问题？

Answer 1

我找到了解决此问题的一个肮脏的解决方法，即插入一个不可见的 iframe 并将表单定位到它：

<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>

<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>

相应的 JavaScript：

$('#loginForm').submit(function () {
    $.post('/login', $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
    })
})

诀窍是，实际上发出了两个请求。首先，表单被提交到 /blank.html，这将被服务器忽略，但这会触发 Chrome 中的密码保存对话框。此外，我们发出 ajax 请求并将真实表单提交到 /login。由于第一个请求的目标是不可见的 iframe，因此页面不会刷新。

如果您不想重定向到另一个页面，这当然更有用。如果您想重定向，更改操作属性是更好的解决方案。

编辑：

这是一个简单的JSFiddle版本。与评论部分中的说法相反，不需要重新加载页面，而且它似乎工作非常可靠。我在带有 Chrome 的 Win XP 和带有 Chromium 的 Linux 上测试了它。

Answer 2

您是否可以将表单的 action 值更改为 data.redirectUrl 并让表单照常提交？这应该会触发浏览器提示保存用户名和密码。

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            $("form#name").attr('action', data.redirectUrl);
        }
    }
...

Answer 3

请阅读此处 - 为什么 Chrome 无法识别此登录表单？ .

重要的评论是：

是的，删除后它不起作用
返回假。你需要重写
你的代码。 Chrome 不提供
保存非表单中的密码
“提交”作为一项安全功能。如果
您希望保存密码功能
工作，你将不得不放弃
整个奇特的 AJAX 登录。

因此，您可以考虑删除 Ajax，只让表单发布来登录，这可能是未启用 JavaScript 的用户使用您的表单登录的唯一方法。

Answer 4

我已经用这种方式修复了它：

<form action="/login"></form>

和 JavaScript：

$(form).submit(function () {
   if(-1 !== this.action.indexOf('/login')) {
      var jForm = $(this);
      $.post(this.action, $(this).serialize(), function (data) {
         if (data.status == 'SUCCESS') {

            // change the form action to another url
            jForm[0].action = data.redirectUrl;

            // and resubmit -> so, no AJAX will be used 
            // and function will return true
            jForm.submit();
         }
      });
      return false;
   }
}

Answer 5

就我而言，Chrome 不记得密码，因为在一种表单中有两种不同的密码类型输入（在一种表单中创建/登录）。我的例子中的问题是通过使用 JavaScript 操作删除密码类型的输入之一来解决的，以便浏览器可以决定哪些提交的字段包含凭据数据。

Answer 6

因此，现在在 2019 年，我们可以使用凭据管理 API 来实现此目的。

注意：这是实验性 API！
检查一下：https://developers.google.com/web /fundamentals/security/credential-management/save-forms

基本代码：

function onSubmit() {
    makeAjaxLoginRequest()
    .then((status) => {
        if (status.success) {
            if (window.PasswordCredential) {
                var cr = new PasswordCredential({ id: login, password: password });
                return navigator.credentials.store(cr);
            } else {
                return Promise.resolve();
            }
        }
    }).then(
        () => { // redirect || hide login window, etc... },
        () => { // show errors, etc... }
    )
}

Answer 7

我发现用户名和密码输入字段必须设置名称标签才能让 Chrome 提供保存密码的功能。 此主题是关于简单表单的，但同样修复了我的 jquery AJAX 表单提交。

Answer 8

从昨天（2013 年 10 月 7 日）开始，Chrome 28 现在无需任何技巧即可实现。看来他们解决了...

Answer 9

我遇到了同样的问题 - 如何强制浏览器存储 AJAX 请求的用户凭据。请在此处查看我的答案 - https://stackoverflow.com/a/64140352/994289。

希望有帮助。至少它对我来说在 Windows 上的 Chrome 上运行得很好。