如何使用Identity Server 4保护Asp.net Core 2.1和Vue.js单页应用程序 [英] How to protect Asp.net core 2.1 and Vue.js single page application with Identity Server 4
问题描述
实际上，我与架构师有些困惑，因为我有2个独立的应用程序和1个Identity Server4应用程序，这是AspNet核心2.1 API解决方案之一，它在不同的域和服务器上运行，并且与其他2个相同.现在，我有以下几点:
Actually I am having a small confusion related to architect as I have 2 separated application and 1 Identity Server4 Application, one of AspNet core 2.1 API solution which is running on different domain and server and same with other 2. Now I have below points:
- 已将我的客户端应用程序(即Vue.js SPA)添加为Identity Server4中具有隐式模式的客户端，因为它是Js客户端
- 我是否需要将API应用程序添加为IDP服务器中的客户端.
- Have added my Client Application (which is Vue.js SPA) as client in Identity Server4 with Implicit mode as it is Js client
- Do I need to add The API application as a client in IDP Server.
- 如果是的话，那么当从Vue.js应用程序登录时如何使用Axios从VUE.js调用任何API时，它将获得此客户端的令牌，并将用于显示隐藏按钮或我的网页部分.
- 对于是否应该使用我从vue.js客户端获得的Claims来验证API感到很困惑.
- 如果我在Identity Server 4中注册了客户端的API，如何从vue.js客户端应用程序调用api.
推荐答案
-
您应该将API作为ApiResource添加而不是作为客户端添加，然后在Startup中注册它.您可以在此处配置所有内容的JS应用程序快速入门: https://github.com/IdentityServer/IdentityServer4.Samples/tree/master/Quickstarts/6_JavaScriptClient .
在javascript客户端中，您需要调用Identity Server并进行身份验证.有一个库可以为您执行此操作: https://github.com/IdentityModel/oidc-client-js .快速入门中也使用了它，因此您可以看到它是如何完成的.
In the javascript client you need to call the Identity Server and authenticate. There's a library that does this for you: https://github.com/IdentityModel/oidc-client-js . It is also used in the quickstart so you can see how it is done.
在每次调用API时，必须使用从Identity Server获得的访问令牌将授权标头设置为"Bearer".同样不要忘记在API中设置Jwt Bearer Authentication.
On every call to the API the authorization header must be set to "Bearer " with the access token you got from the Identity Server. Also don't forget to setup Jwt Bearer Authentication in the API.
在前面提到的快速入门"中，我所说的所有内容都有示例代码.
There is example code for everything I said in the Quickstart I mentioned before.
这篇关于如何使用Identity Server 4保护Asp.net Core 2.1和Vue.js单页应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
