Angular 表单和密码管理器

Question

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

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

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

一切都可以与 Dashlane 配合使用。但是我最近尝试了 Lastpass，但它没有捕捉到请求。我在这个帮助页面上看到他们推荐使用裸表单。这对我来说不是一个选择，因为我想要一个更好的用户体验。

我的典型形式是：

<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

好吧，谷歌员工，这是我在经历了一些痛苦的试验和错误后发现的，我希望你永远不必花费这些。

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. 使用适当的图标在密码管理器中正确设置图标。这个很棒的网站允许您生成所有需要的材料。

你也可以在这篇文章中找到很好的一般建议。