javascript - HTML 单页应用,用浏览器填写用户名和密码

标签 javascript html browser authentication single-page-application

有没有办法告诉浏览器已显示登录表单并且应该使用保存的凭据填写该字段?

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

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

最佳答案

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

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

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

一旦用户点击提交按钮或验证凭据,通常会调用此 native 函数。

仅供引用:我有两个使用此语法的 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

关于javascript - HTML 单页应用,用浏览器填写用户名和密码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19568719/

相关文章:

javascript - 了解返回映射子组件的 React 功能组件

javascript - 在运行时最小化 JS 还是生成静态?

jquery - 在单个元素上使用的类之间的多个过渡属性实例

css - "force"用户更新浏览器是个好习惯吗?

html - 如何修复<div>元素,使其仅在调整浏览器窗口大小时缩放?

javascript - 加入和着色 TR

javascript - 如何用 Jest 编写 javascript 揭示模块模式的单元测试?

javascript - 将元素数据传递给 Bootstrap 模态

html - Hexo 博客中的 Markdown 文本对齐

css - 平板电脑上的复选框奇怪的错误