Вход в Angular SPA с API asp .net core 3 без перенаправления за пределы SPA

Question

Я пытался создать Angular SPA с серверной точкой dot net core 3 для вызовов API, я хотел бы защитить API и SPA с помощью логина.

Во всех найденных примерах (например, новый базовый шаблон 3 Angular, и этот ), код использует Identity Server. У меня нет проблем с этим ИСКЛЮЧЕНИЕМ, поскольку в каждом примере процесс входа в систему оставляет SPA для аутентификации / входа в систему, а затем перенаправляет обратно в SPA.

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

Итак, мой вопрос: как мне войти в систему с Angular 7+, asp.net core 3, и не иметь какого-либо перенаправления от SPA. Если я не могу сделать это с Identity Server, есть ли другие варианты?

Обновление - я решил это, отредактировав приложение SPA и выяснив, как работает процесс идентификации по умолчанию, чтобы у меня была форма для входа и регистр. Форма в приложении. А затем тихо сделайте звонок и перенаправьте вход в систему IS в фоновом режиме, чтобы пользователь никогда не покинул страницу.

Answer 1

Вы можете реализовать вход / выход из системы / etc в вашем SPA и использовать Identity Server. Перенаправьте из вашего SPA в ваш SPA, установив соответствующие urls в опциях AddIdentityServer. Попробуйте заменить страницы по умолчанию из этого образца по одной. Вам также придется изменить контроллеры .

Answer 2

Использовать JWT (веб-токен JSON). Это идеальное решение для аутентификации SPA.

.NET Core Side:

• Создание конечной точки API для предоставления токена JWT. IdentityServer по умолчанию выдает токены доступа в формате JWT (JSON Web Token).
• Добавьте Схема авторизации JWT в ваш проект веб-API.
• Добавьте атрибут Authorize к API, которые вы хотите защитить.

Angular SPA Side:

• Вызовите вновь созданный API с предоставленными пользователем учетными данными (например, адрес электронной почты и пароль)и сохраните предоставленный токен.
• Для каждого HTTP-вызова к любому защищенному API для HTTP-запроса необходим заголовок авторизации, поставляемый с токеном JWT с использованием схемы Bearer .