10

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

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

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

4

3 回答 3

4

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

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

于 2016-06-02T20:03:36.153 回答
0

该问题有 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'
});
于 2016-06-02T03:47:27.633 回答
-4

一般来说，对于要存储的用户名和密码来说，这是一个非常糟糕的做法，但是如果你希望它长期存在，你可以将它存储在 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>
于 2013-10-24T15:28:54.347 回答