Chrome 在重置页面上记住密码的问题

Question

在我们的网站（MVC Razor，C#）上，我们有一个带有密码重置功能的登录页面。这会向用户发送一封带有重置链接的电子邮件。当他们单击此按钮时，他们会进入一个页面，在该页面中输入他们的电子邮件地址、新密码和密码确认。我们遇到的问题是 Chrome 提供使用他们的电子邮件地址记住他们的登录详细信息。但是，这是无效的，因为用户使用用户名和密码登录，而不是他们的电子邮件。

在用户可以编辑其个人信息的网站的另一个页面上，我们也有可以更新密码的字段。有了这个，我们在第一个密码字段之前添加了一个 input[type=text] 字段，其中包含他们的用户名。这是通过 css 向左移动的。当用户点击保存时，浏览器将提供更新他们的登录信息，这次使用正确的详细信息（用户名和密码）。在添加偏移字段之前，它会记住用户地址中的最后一行以及密码。

虽然这种偏移用户名字段方法也适用于我们在 Firefox 中的密码重置页面，但它不适用于 Chrome。 Chrome 似乎区分了编辑数据的页面和创建新信息的页面。在用户编辑其数据的页面上，Chrome 提供了更新他们的登录详细信息。然而，在我们的密码重置页面上，它总是询问用户是否要保存此信息。在测试中，我删除了偏移用户名字段的 css，使其再次可见。如果我将用户名字段与预先填充的数据一起保存并保存，则没有任何区别。然而，当我手动编辑数据，重新输入已经存在的数据时，Chrome 提供保存正确的信息（用户名和密码）。

所以我尝试了两件事： 1. 添加Javascript逻辑，尝试模拟手动编辑的字段。我使用 jQuery 并尝试调用 keypress()、keydown() 和 change() 的组合。 2. 添加向左偏移的包含预填充数据的字段，以便 Chrome 可能认为这是一个正在“编辑”的页面。

这两种方法都不起作用。如果有人有任何想法或建议，我们将不胜感激。

Answer 1

这是我们想出的解决方案。我们将偏移字段和 2 个密码字段移至页面顶部。这使得偏移用户名输入页面中的第一个字段。然后我们将这些字段包装在一个 div 元素中。我们还将电子邮件字段包装在（单独的）div 中。最后我们添加了css来相对定位2个包装器div，这样页面的外观就和以前一样了。这一次 Chrome 提出要记住正确的值。

请注意，我们需要编辑表单字段的 tabindexes 以确保 tab 键按预期工作。

补充一点，我们遇到了另一个类似的问题。也就是说，我们有几个页面要求用户输入他们的密码（通常作为页面中的最后一个字段）作为验证他们正在完成的过程的一部分。即使他们已经登录，这也是必需的。虽然这些页面不是登录表单，但大多数浏览器会提供更新/记住信息，但用户名再次完全无效。

我们为此提出的解决方案是在密码字段下方添加一个隐藏的表单字段。单击提交按钮时，我们将密码复制到隐藏字段。当实际的表单提交事件发生时，我们检查表单是否有效，如果有效，则将页面中的密码字段替换为包含一系列“•”字符的纯文本字段。由于提交表单时页面中没有密码字段，因此浏览器不再提供记住登录信息。