ASP.NET Core Web API + Angular 2 Authorization and Authentication

Question

I have Angular 2 application which talks to the Web API and does some basic CRUD operations. I have few questions:

1. Is any way I can create a Login/Register page on Angular 2 using ASP.NET Identity?
2. How do I manipulate with a data only relates to the logged in user? (Token Based Authentication? How it works? Where to read about it?)
3. How can I implement login/register process on actual Angular 2 application without redirecting me to Identity Server?

I looked at IdentityServer4, OAuth2 and OpenID examples, it is a bit too complex to understand. I went thru every single step in quick start, it works but I don't understand how and what it does.

Can someone give me any resources where I can start from? Blogs, websites, books, step-by-step guides.

Answer 1

You're correct that at this point the most comprehensive solutions for authentication and authorization in systems that rely heavily on HTTP are based on OAuth 2.0 and OpenID Connect. This of course includes your specific scenario of a SPA calling a Web API back-end. For further read on this generic case you can check the Auth0 SPA + API Architecture Scenario or give a look at the quickstarts focused on your selected technologies:

• Angular2 Quickstart
• ASP.NET Core Web API Quickstart

Note: Auth0 supports OAuth 2.0/OpenID Connect so even though the docs may have additional features that are provider-specific, you may find them useful if you do indeed decide to go the OAuth 2.0/OpenID Connect route. It's one of the advantage points of relying on standards, it's easier to switch between implementation/providers.

However, you should also consider if you really need to go full OAuth 2.0/OpenID Connect as they aim to solve a lot of different use cases and as such also bring significant complexity with them. If you go that route, it's recommended that you leverage existing libraries like IdentityServer or cloud providers like Auth0, because doing your own implementation carries a lot of risk and requires significant effort.

In order to meet your requirement of providing an integrated login from within your own Angular2 front-end you could probably look into the resource owner password credentials grant specified by OAuth2.

Another alternative is doing your own custom solution, this is generally frowned upon, because it's easy to get wrong, but the theory would be:

1. Handle user authentication and registration (possibly using ASP .NET Identity)
2. Upon login exchange user credentials with some a token that you can later use to call into the API

The token could just be a random (not guessable) value used as a reference to some server-side storage that would contain information about the associated user.