Angular 8 - как предложить браузеру сохранить информацию для входа, когда процесс входа разделен на 2 этапа?

Я создал портал входа в систему, который мы используем для многих приложений.

Это не стандартная форма входа с 2 inputs, один для имени пользователя и один для пароля.

Это одностраничное приложение со следующей структурой:

Начальная страница: input поле для электронной почты

Как только пользователь вводит электронную почту и продолжает, могут произойти 2 вещи:

  • электронная почта недействительна (мы делаем вызов API, чтобы проверить, присутствует ли электронная почта в нашей БД), в этом случае вы получаете сообщение об ошибке
  • электронная почта действительна, и теперь вам предоставляется несколько кнопок, одна из которых — вход с паролем (поскольку пользователь также может войти, например, в Office365, где мы перенаправляем пользователя на страницу Microsoft
    ).
  • если выбран вход с паролем, теперь отображается input из type="password"

Наконец, пользователь нажимает «Войти», и если пароль правильный, он вошел в систему.

Все это происходит в одном файле .html/.ts, все делается с помощью ngIf для отображения и скрытия частей.

Я хочу реализовать, что когда пользователь успешно входит в систему с паролем, браузер спросит, хочет ли он сохранить комбинацию username + password, но я не знаю, как, обычно я знаю, что это работает, когда оба поля ввода (имя пользователя и пароль ) находятся один под другим, но в моем случае не знаю что делать!

изменить: я видел, что в Chrome есть флаг, разрешающий: имя пользователя-первый-поток, который по описанию выглядит так, как я хочу, поэтому должен быть способ реализовать то, что я ищу


authentication javascript angular input
person AJ989    schedule 24.06.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я предполагаю, что не нужно сохранять комбинацию в браузере. Вместо этого вы должны создать токен в своей серверной части после успешного входа в систему, а затем вернуть его клиенту, сохранить его в файле cookie, который имеет флаги безопасности и тот же сайт для строгости.

Затем этот токен можно использовать после возвращения пользователя для аутентификации и, таким образом, пропуска процесса входа в систему.

Подробнее о процессе аутентификации читайте здесь: https://auth0.com/

person mikegross    schedule 24.06.2020
comment
Я также рассмотрю это, но сначала я хотел бы узнать, есть ли способ сохранить его напрямую в браузере, поэтому, когда пользователь фокусирует ввод электронной почты, он спрашивает его, хочет ли он использовать сохраненную электронную почту, и то же самое, когда он фокусирует ввод пароля. Могу ли я добиться этого в своем приложении с его структурой? - person AJ989; 24.06.2020

arrow_upward
0
arrow_downward

Комбинация будет сохранена при нажатии кнопки отправки, поэтому, если вы можете поместить имя пользователя в localStorage, тогда, когда пользователь выберет пароль и заполнит его правильно, вы просто вызовете событие отправки, но форма должна иметь ввод имени пользователя и ввод пароля внутри него, так что эта работа. Любой вопрос?

person SaboSuke    schedule 24.06.2020
comment
как только я поместил имя пользователя в локальное хранилище, как мне его получить, когда пользователь нажимает кнопку входа в систему после ввода пароля? И это должна быть форма, или я могу просто иметь 2 отдельных FormControl (один для ввода имени пользователя, один для ввода пароля)? - person AJ989; 25.06.2020
comment
он должен быть в той же форме, чтобы комбинация работала автоматически, как я сказал выше. для хранения данных в локальном хранилище: localStorage.setItem('item_name', yourData.toString()). Для извлечения данных выполните var myData=localStorage.getItem('item_name'), и отсюда вы можете либо преобразовать данные в то, что хотите, потому что вы можете хранить только строки в localStorage, поэтому я использовал toString, либо вы можете просто оставить его. - person SaboSuke; 25.06.2020