角度表单和密码管理器 [英] Angular forms and password managers

问题描述

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

I use Angular forms to do signup & login on my frontend. It is a classic setup where the POST requests going out of the form are sent to a backend API.

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

The POST requests are sent from the submit function that I register with (ngSubmit)=onSubmit() on the form element.

我希望密码管理器能够发挥作用:在创建用户时保存登录名/密码，在登录时自动填充密码，在更改密码时进行更新.

I'd like password managers to play ball with this: save login/password on user creation, autofill on login, update on password change.

Dashlane一切正常.但是我最近尝试了Lastpass，但没有捕获到请求.我在此帮助页面上看到，他们建议使用裸表单.这不是我的选择，因为我想要一个更好的UX.

Everthing works ok with Dashlane. But I recently tried Lastpass and it didn't catch the requests. I see on this help page that they recommend using bare forms. That is not an option for me, because I'd like a better UX.

我的典型形式是:

<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.

So you see I already use autocomplete attribute, and proper type & name.

我的猜测是，Lastpass不会拦截Submit事件之外的请求.但这不是Angular表单的工作方式. (但是Dashlane似乎可以接受)

My guess is that Lastpass does not intercept requests outside a Submit event. But that's not the way Angular forms work. (but Dashlane seems to be ok with that)

由于我不想使用Angular表单测试每个密码管理器，因此打开了一个问题:

Which opens the question as I do not want to test each and every password manager with my Angular forms:

与大多数密码管理器一起使用的Angular表单的具体准则是什么?

推荐答案

好的Googler，这是经过数小时的痛苦试验后发现的.我希望您永远不必花费的错误.

Alright Googler, here is what I found out after some painful hours of trial & errors that I wish you never have to spend.

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

1. Do page loads. Even if your form does not need a navigation operation, password managers seem to need page loads after submission to properly detect the form submission on a single-page-application. In Angular, it is simply a this.router.navigate call, I guess it adds an entry to the history and that's what the password manager detects.

不要依赖您的请求中的内容.即使您在请求中添加了某些username/password/new_password字段，密码管理器似乎也不会对其进行调查.他们似乎宁愿只看表单字段.好消息是，您后端的API似乎无关紧要.

Do not rely on what's in your requests. Even if you put some username / password / new_password fields in your requests, password managers don't seem to look into them. They seem to rather look at the form fields alone. So good news, the API of your backend does not seem to matter much.

请勿使用某些取消隐藏"按钮(在我的示例中为[type]="hide_password ? 'password' : 'text'"位).事实证明，即使您在提交之前强制隐藏，一旦用户至少取消隐藏字段一次，所有操作都会破坏密码管理器检测机制.

Do not use some "unhide" button (the [type]="hide_password ? 'password' : 'text'" bit in my example). It turns out even if you force hiding before submission, it all screws up the password managers detection mechanism as soon as the user unhides the fields at least once.

使用标准名称输入各种格式的.将name和id属性放在<input>中:username，password，password_confirm，new_password，new_password_confirm.

Use standard names for inputs in your various forms. Put name and id attributes to your <input>: username, password, password_confirm, new_password, new_password_confirm.

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

Use hidden username fields when not shown to the user to let the password manager link the password change to the right account in its database (type="hidden" and another type="email" with a CSS style display: none should have you covered with all password managers).

使用适当的图标在密码管理器中正确设置图标. 这个很棒的网站可让您生成所有需要的材料.

Use proper favicons to have the icons correctly setup in the password manager. This awesome website allows you to generate all needed material.

您还可以在 查看全文