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!
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.
