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 不会拦截提交事件之外的请求。但这不是 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" 和另一个带有CSS 样式 type="email" 应该让您了解所有密码管理器)。

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

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