Как защитить Asp.net core 2.1 и одностраничное приложение Vue.js с помощью Identity Server 4

Question

На самом деле у меня небольшая путаница, связанная с архитектором, поскольку у меня есть 2 отдельных приложения и 1 приложение Identity Server4, одно из API-решений AspNet core 2.1, которое работает в другом домене и на сервере и то же самое с другими 2. Теперь у меня есть следующие пункты:

1. Добавил мое клиентское приложение (которое является Vue.js SPA) в качестве клиента в Identity Server4 с неявным режимом, поскольку это Js клиент
2. Нужно ли добавлять приложение API в качестве клиента на сервере IDP.
   3. Если да, то Как вызвать любой API из VUE.js с помощью Axios, как при входе в систему из приложения Vue.js, он получит токен для этого клиента и будет использован для показа скрытия кнопки или моего раздела веб-страницы. ,
   4. Я немного озадачен тем, что мне следует использовать утверждения, которые я получил для клиента vue.js, для проверки API.
   5. Если я регистрирую API-клиент в Identity Server 4, то как вызвать API-интерфейс из клиентского приложения vue.js.

Answer 1

1. Вы должны добавить API как ApiResource, а не как Клиент, а затем зарегистрировать его при запуске. Вы можете проверить быстрый старт для приложения JS, где все настроено здесь: https://github.com/IdentityServer/IdentityServer4.Samples/tree/master/Quickstarts/6_JavaScriptClient.

2. В клиенте javascript вам необходимо вызвать Identity Server и пройти аутентификацию. Есть библиотека, которая делает это для вас: https://github.com/IdentityModel/oidc-client-js. Он также используется в быстром запуске, чтобы вы могли увидеть, как это делается.

3. При каждом вызове API заголовок авторизации должен быть установлен на «Носитель» с токеном доступа, который вы получили с Identity Server. Также не забудьте настроить аутентификацию Jwt Bearer в API.

Существует пример кода для всего, что я сказал в Quickstart, о котором я упоминал ранее.