Angular forms and password managers

问题

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.

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.

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.

My typical form is:

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

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

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)

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

What are the spectific guidelines for Angular forms to work with most password managers?

回答1:

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

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.

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

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

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

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

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

And you can find good general advice also on this post.

来源：https://stackoverflow.com/questions/53911864/angular-forms-and-password-managers