Angular 表单和密码管理器

Question

我使用 Angular forms 在我的前端进行注册和登录。这是一个经典的设置，其中 POST 超出表单的请求被发送到后端 API。

POST 请求是从我在 form 元素上使用 (ngSubmit)=onSubmit() 注册的 submit 函数发送的。

我希望密码管理器能够处理这个问题：创建用户时保存 login/password，登录时自动填充，更改密码时更新。

Dashlane 一切正常。但我最近尝试了 Lastpass，但没有收到请求。我在 this help page 上看到他们建议使用裸表单。这不是我的选择，因为我想要更好的用户体验。

我的典型形式是：

<form [formGroup]="signupFormModel" (ngSubmit)="onSubmit()"...>
  <input matInput
           placeholder="Email"
           formControlName="email"
           type="email"
           name="email"
           autocomplete="username"
           autofill>
  <input matInput
           placeholder="Password"
           [type]="hide_password ? 'password' : 'text'"
           formControlName="password"
           autocomplete="new-password"
           name="new-password"
           autofill>
  <input matInput
           placeholder="Confirm password"
           [type]="hide_password ? 'password' : 'text'"
           formControlName="password_confirmation"
           autocomplete="new-password"
           name="new-password-confirmation"
           autofill>
  <input mat-raised-button
         type="submit"
         value="Sign up">
</form>

所以你看我已经使用了 autocomplete 属性，并且正确 type & name.

我的猜测是 Lastpass 不会拦截提交事件之外的请求。但这不是 Angular 表单的工作方式。（但 Dashlane 似乎对此没有意见）

这打开了问题，因为我不想用我的 Angular 表格测试每个密码管理器：

Angular 表单与大多数密码管理器配合使用的具体准则是什么？

Answer 1

好的，Google 员工，这是我经过数小时的痛苦试验和错误后发现的，我希望你永远不必花费这些时间。

加载页面。即使您的表单不需要导航操作，密码管理器似乎也需要在提交后加载页面以正确检测单页应用程序上的表单提交。在 Angular 中，它只是一个 this.router.navigate 调用，我猜它会在历史记录中添加一个条目，这就是密码管理器检测到的内容。
不要依赖请求中的内容。即使您在请求中添加了一些 username / password / new_password 字段，密码管理器似乎也不会查看它们。他们似乎更愿意单独查看表单域。好消息，你后台的API好像没什么大不了的
不要使用某些 "unhide" 按钮 （我的示例中的 [type]="hide_password ? 'password' : 'text'" 位）。事实证明，即使您在提交前强制隐藏，只要用户至少取消隐藏字段一次，密码管理器的检测机制就会全部搞砸。
对各种形式的输入使用标准名称。将 name 和 id 属性添加到您的 <input>：username、password、password_confirm、new_password、new_password_confirm .
在不向用户显示时使用隐藏的用户名字段让密码管理器link将密码更改为数据库中的正确帐户（type="hidden" 和另一个具有 CSS 风格的 type="email" display: none 应该让您了解所有密码管理器）。
使用正确的网站图标 在密码管理器中正确设置图标。 This awesome website 允许您生成所有需要的 material.

您还可以在 this post.

上找到好的一般性建议

Angular 表单和密码管理器

Angular forms and password managers

forms

passwords

angular