Question

有没有办法告诉浏览器是否已显示登录表单，是否应填写保存凭据的字段？

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

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

Answer 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

Answer 2

问题分为两部分，即用保存的凭证填充字段和提示用户保存凭证。如果有保存的登录/密码对，它将自动填充到密码的<body> <input id="a"></input> <input type="password" id="b"></input> <input type="button" onclick=redirect()>GO</input> </body>输入和登录的前一个输入字段。请注意，如果名称或ID属性或它不起作用，则必须使用这两个字段。这是一个简单的例子：

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

要提示用户保存凭据，必须将此2个字段传递到另一个URL并获得成功的回复。最简单的方法是使用一个表单与一些PHP的动作。这是一个简单的ajax回调重定向：

<div class="small-6 columns">
   <img src="img.png" />
   <p>Title</p>
   <p>Desc</p>
   <a href="#">abc</a>
</div>

Answer 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>

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

3 个答案: