HTML单页应用，用浏览器填写用户名和密码答案

【问题标题】：HTML Single Page Application, fill username and passwords with browserHTML单页应用，用浏览器填写用户名和密码
【发布时间】：2013-11-03 07:47:55
【问题描述】：

有没有办法告诉浏览器已经显示了一个登录表单，并且它应该使用保存的凭据填写该字段？

我有这个 SPA，它在加载文档后使用 ajax 加载登录视图。成功登录后，我设法让 Firefox 保存凭据，但是当我再次尝试登录时，字段未填写。

此外，我似乎无法让 Chrome 提示保存密码，因为我无法重定向浏览器并且 Chrome 似乎绑定到该事件。

【问题讨论】：

我有同样的问题——javascript SPA 和 Chrome 没有保存用户的密码。我检查了表单在用户名（name="username"）和密码（name="password"）字段上有“name”属性。似乎是断断续续的。如何帮助 Chrome 将其识别为登录表单并提供保存密码？
@Rich 您是否在 chrome、chromium 设置中启用了Autofill？
@guest271314 是的，Chrome 中启用了自动填充功能，并且大多数网站都可以保存密码。我在询问我编写的 SPA 网站，其中 Chrome 似乎无法识别或不喜欢我的登录表单。
stackoverflow.com/questions/5430129/… 的副本？
请提供您的代码

标签： javascript html browser login single-page-application

【解决方案1】：

在识别表单和保存登录数据时，浏览器有其特殊的默认行为。正确构建表单时，您所要求的很容易实现。

示例 1：

将您的输入元素包装在一个表单标签中：

<form method="post" action="/form">
 <input type="password" id="name"></input>
  ect...
</form>

这样浏览器才能识别您的表单并关联默认行为。

示例 2：

为您的输入元素制作标签并将它们与名称/ID 相关联：

<form method="post" action="/form">
<label for="pssw-1" >Name : </label> 

 <input name="password" type="password" id="pssw-1" ></input>

  ect...
</form>

示例 3：

如果需要，在表单和输入元素上应用自动完成属性：

<form method="post" action="/form" autocomplete="on">
<label for="pssw-1" >Name : </label> 

 <input name="password" type="password" id="pssw-1" autocomplete="password"></input>

  ect...
</form>

启用自动完成后，浏览器会将加密的密码/登录数据存储在会话浏览器历史记录中，通常位于 %APPDATA%\..\Local\Google\Chrome\User Data\Default\Login Data（至少对于 Chrome）。

一旦用户点击提交按钮或验证凭据后，通常会调用此原生函数。

仅供参考：我有两个使用这种语法的 spa 桌面应用程序，自动填充/自动完成没有问题。

浏览器如何存储登录数据：

http://raidersec.blogspot.com/2013/06/how-browsers-store-your-passwords-and.html

最佳实践：

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en

【讨论】：

谢谢。我相当确定我的应用程序遵循所有这些准则，但我仍然看到不一致的密码保存行为。奇怪的是，不同主机名上的应用程序的不同实例之间似乎有所不同。我想知道我是否有一些导致问题的本地状态（以前保存的密码或冲突的密码等）。

【解决方案2】：

问题分为两部分，即使用已保存的凭据填充字段并提示用户保存凭据。如果有保存的登录名/密码对，它会自动填充到type=password id='whatever' 输入与密码和登录与先前的输入字段。请注意，这两个字段必须是名称或 id 属性，否则它将不起作用。这是一个简单的例子：

<body>
  <input id="a"></input>
  <input type="password" id="b"></input>
  <input type="button" onclick=redirect()>GO</input>
</body>

要提示用户保存凭据，这两个字段必须传递到另一个 URL 并获得成功回复。最简单的方法是对某些 php.ini 使用带有操作的表单。这是一个简单的 ajax 回调重定向：

redirect = () => $.ajax({
    url: './someValidationURL',
    data: {username: a.value,password: b.value},
    success: () => window.location.href = './someProtectedURL'
});

【讨论】：

【解决方案3】：

一般来说，存储用户名和密码是一种非常糟糕的做法，但是如果您希望它长期存在，您可以将其存储在 localStorage 中，或者如果您希望只在浏览器打开时将其存储在 sessionStorage 中，（请注意适用于 IE8 及更高版本）但不再支持 IE7，因此它不应该成为问题。这就是你要做的。我不建议将密码存储在会话存储中我会将其存储为 cookie，因为 cookie 或者如果您有权访问服务器，则使用会话变量来存储密码，但无论哪种方式，我都会发布代码，即使存储了会话和本地存储中的信息是不好的做法。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
    <form action="">
        <input type="text" name="username" id="username" value="username@login">
        <input type="password" name="password" id="password" value="password">
    </form>
</body>
</html>
<script>

    window.onload = function(){

        if(window.sessionStorage){
            //depending on which one you would want to use 
            var form = document.getElementsByTagName('form')[0];
            //optionally you can use querySelector instead
            var user = document.getElementById('username');
            var password = document.getElementById('password'); 

            console.log(user);
            console.log(password);

            if(!sessionStorage.getItem("username")){

                sessionStorage.setItem("username", user.value);


            } else {

                user.value = sessionStorage.getItem("username");


            }

            if(!sessionStorage.getItem("password")){

                sessionStorage.setItem("password", password.value);

            } else {

                password.value = sessionStorage.getItem("password");

            }
        }

        console.log(sessionStorage);

    }

</script>

【讨论】：

谢谢，但我正在寻找更多保存密码的浏览器功能，您通常会在大多数使用普通表单登录的网站上看到这些功能。我可能最终会将它保存在 localStorage 中，即使它不是最好的方法。再次感谢
不要将密码保存在本地存储、cookie 或其他任何未加密的内容中：我认为这不能回答问题，因为问题是如何让浏览器填写信息。当浏览器存储密码时，它们至少会加密这些密码，这就是为什么它实际上是可以的。但是，这种方法会使您的密码未加密地挂在本地存储中..
浏览器本身不会这样做，再次使用 localStorage 是非常糟糕的做法，因为一旦关闭浏览器，您仍然可以在 localStorage 中存储和未加密的数据，我强烈建议如果您可以访问服务器以使用服务器端编程将变量存储为会话变量并通过 ajax 加载它们。
为什么浏览器不做呢？没有办法触发和事件告诉浏览器登录表单现在可见吗？并且输入 ID 与保存凭据时的 ID 相同
您必须使用 javascript 来执行此操作，出于安全原因，浏览器不会存储密码，除非用户允许。当浏览器询问他们是否要存储密码和登录时，此人必须单击确定系统上使用登录信息加密并调用它的 cookie。所有浏览器都为用户提供了通过浏览器选项存储表单数据和密码的选项，但无法通过客户端 javascript 访问