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

问题描述

我使用 Angular forms 进行注册和在我的前端登录.这是一个经典的设置，将表单外的 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，但它没有收到请求.我在 此帮助页面 上看到他们建议使用裸表单.这不是我的选择，因为我想要更好的用户体验.

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 &名称.

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 表单与大多数密码管理器配合使用的具体准则是什么?

推荐答案

好的谷歌人，这是我经过几个小时的痛苦试验后发现的我希望您永远不必花费这些错误.

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"code> 和另一个具有 CSS 样式 display: none 的 type="email" 应该让您使用所有密码管理器.

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.

您还可以在 这篇文章.

这篇关于Angular 表单和密码管理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！