如何使用Identity Server 4将ASP.NET Core MVC与Angular结合使用以连接到Web API [英] How to use ASP.NET Core MVC with Angular using Identity Server 4 to connect to web API

问题描述

从在此处发布收到回复后，我正在写信

--------------------------------------

我正在开发一个具有MVC核心应用程序的应用程序，该应用程序仅加载有角度的应用程序.然后，角度应用程序将连接到Web API以执行CRUD操作.

我知道可以结合使用cookie身份验证和Odic混合流来生成Cookie，但不确定角度应用程序如何获取对访问令牌的引用并在访问令牌到期时对其进行更新以连接到我的网站api.

我阅读了这篇文章 https://www.youtube.com/watch?v=5OUQZAvxZuA&feature=youtu.be&t=30m40s ，但没有一个说明角度应用程序如何获得访问令牌的所有权以查询其他API.

如果你们中的某人能解释获得访问令牌的最佳方法，并使用刷新令牌定期进行更新，我将不胜感激.

解决方案

我正在编写类似的解决方案.我同意你和你的担心.任何对访问令牌和API知识不多的人都可以从浏览器中获取令牌，并使用它来调用您的Web API.他们甚至在文档中都说混合解决方案.

解决方案:

您可以从Visual Studio 2017 SPA模板创建混合应用程序(MVC + angular 2).遵循本教程

https://long2know.com/2017/04/net-core-angular-vs2017-templates/

这为您提供了所有设置，并且还具有调用控制器方法并获取数据的示例组件.

以与在此为mvc客户端描述的方式相同的方式在启动类中添加身份服务器配置

http://docs.identityserver.io/en/latest/quickstarts/5_hybrid_and_api_access.html

最后只用Authorize属性装饰HomeController.这将首先与您的身份服务器进行核对，然后根据您的配置将您重定向到授权中心.例如:

[Authorize]
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Error()
    {
        return View();
    }
}

要调用API，您可以从angular应用程序中调用controller方法(它们在组件之一中具有示例调用)，并获取访问令牌并最终通过服务器调用API.

仍在努力寻找完整的解决方案.希望对您有帮助！

I am writing after the response recieved from the post here

--------------------------------------

I am in the process of developing an application that has an MVC core app that simply loads the angular application. The angular application will then connect to a Web API to perform CRUD operations.

Im aware its possible to use cookie authentication in conjuction with odic hybrid flow to generate a cookie, but not sure how the angular app can get a reference to the access token and renew it when it expires in order to connect to my web api.

I read through this article https://damienbod.com/2017/05/06/secure-asp-net-core-mvc-with-angular-using-identityserver4-openid-connect-hybrid-flow/ and watched this video https://www.youtube.com/watch?v=5OUQZAvxZuA&feature=youtu.be&t=30m40s but none of it explains how the angular app can get a hold of the access token to query other APIs.

I would greatly appreciate if someone of you could explain the best procedure to gain access to the access token, and also periodically renew it using the refresh token.

解决方案

I am in the process of writing similar solution. I agree with you and your concerns. Anyone with little more knowledge about access token and APIs can grab the token from the browser and use it to call your Web APIs. Even in the documentation they say go with the Hybrid solution.

Solution:

You can create the hybrid app (MVC + angular 2 ) from the Visual studio 2017 SPA templates. Follow this tutorial

https://long2know.com/2017/04/net-core-angular-vs2017-templates/

This has everything setup for you and also have sample component that calls the controller method and gets the data.

Add the identity server configuration in startup class the same way they have described for the mvc client here

http://docs.identityserver.io/en/latest/quickstarts/5_hybrid_and_api_access.html

Lastly just decorate the HomeController with Authorize attribute. This will first checks with your identity server and redirects you to the Authority based on you configuration.Example:

[Authorize]
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Error()
    {
        return View();
    }
}

For calling your APIs you can call the controller method from your angular app ( they have sample call in one of the components ) and grab the access token and eventually call your API through server.

Still working on having a complete solution. Hope it helps!

这篇关于如何使用Identity Server 4将ASP.NET Core MVC与Angular结合使用以连接到Web API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！