Angular 表单和密码管理器

Question

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

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

我希望密码管理器可以使用此功能：在创建用户时保存登录名/密码，在登录时自动填充，在更改密码时更新。

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 不会拦截 Submit 事件之外的请求。但这不是 Angular 表单的工作方式。 （但 Dashlane 似乎没问题）

这会引发问题，因为我不想用我的 Angular 表单测试每个密码管理器：

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

Answer 1

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

1. 加载页面。即使您的表单不需要导航操作，密码管理器似乎也需要在提交后加载页面才能正确检测单页应用程序上的表单提交。在 Angular 中，它只是一个 this.router.navigate 调用，我猜它会在历史记录中添加一个条目，这就是密码管理器检测到的。

2. 不要依赖请求中的内容。即使您在请求中添加了一些 username / password / new_password 字段，密码管理器似乎也不会调查它们。他们似乎更愿意单独查看表单字段。好消息，您的后端 API 似乎并不重要。

3. 不要使用某些“取消隐藏”按钮（在我的示例中是 [type]="hide_password ? 'password' : 'text'" 位）。事实证明，即使您在提交之前强制隐藏，一旦用户至少取消隐藏字段一次，这一切都会破坏密码管理器的检测机制。

4. 为各种形式的输入使用标准名称。将name 和id 属性添加到<input>：username、password、password_confirm、new_password、new_password_confirm。

5. 在未向用户显示时使用隐藏的用户名字段，让密码管理器将密码更改链接到其数据库中的正确帐户（type="hidden" 和另一个 type="email" CSS 样式 display: none 应该让您拥有所有密码管理器。

6. 使用正确的网站图标在密码管理器中正确设置图标。 This awesome website 允许您生成所有需要的材料。

您还可以在this post 上找到好的一般建议。