How to use ASP.NET Core MVC with Angular using Identity Server 4 to connect to web API

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!

For this scenario, I'd use an implicit flow. With this flow, the MVC app will redirect to your client app with the access token in the callback URI (by definition of the OpenID Connect protocol).

From reading your question on github, I believe you're concerned about the security of passing the access token in this way? I assume that your UI is accessed via HTTP/S? If so, the access token will be secure in transit. Also, the access token is in the fragment portion of the URI, so shouldn't be transmitted to your UI's webserver. In any case, the initial request will include a nonce, which is there to mitigate replay attacks.

As for accessing the token, I use the excellent OIDC Javascript Client.