I give a number of talks on IdentityServer, including ones focused just on SPA Clients, desktop/native clients, MVC clients and APIs. Not long ago I put together a solution that shows Angular clients and MVC clients, both accessing a Web API and using IdentityServer4 as the STS for single sign on (SSO). The last time I presented this ASP.NET Core 1.1 was the latest Core version of ASP.NET.
I've also got a Pluralsight course I am working on titled "Securing Angular Apps with OpenID Connect and OAuth2" that should be out in early December - so keep your eyes out for that.
Well, as you may have heard, .NET Core 2.0 is now out along with corresponding updates to ASP.NET Core and EF Core. So I wanted to make my solution available to anyone interested.
The solution contains 4 projects. Here is a quick breakdown on the role each plays and what is in it:
- SecuringAppsWithIdentityServer4NetCore2: This is the instance of IdentityServer4 hosted on ASP.NET Core 2.0, acting as the STS/SSO server/Identity Provider/Authorization Server/Authentication Server for the two client projects and the API project they call into. This is basically an out-of-the-box ASP.NET Core project with the "Individual User Accounts" authentication option enabled. You then add the IdentityServer4.AspNetIdentity NuGet package, and wire up the Startup.cs ConfigureServices and Configure methods, as described in the quickstarts you can find here: http://docs.identityserver.io/en/release/quickstarts/6aspnetidentity.html. The IdSvrConfig.cs file contains the configuration for the two clients - an MVC client and an Angular client.
- MvcClient: Simple ASP.NET Core 2 MVC project with no security enabled in the create project dialog. Then add the built in OpenId Connect middleware through the Startup file, and the IdentityModel nuget to aid in adding the access tokens to outgoing HttpClient requests to the ClientApi.
- AngularClient: This uses the new templates in .NET Core 2 for building an Angular app on top of ASP.NET Core. It uses the oidc-client library to manage the OIDC redirects and token handling. It demonstrates getting the token into the API requests three different ways - manually adding to the header when a call is made through the Angular Http service, using an AuthHttp wrapper service around the Angular Http service - one of the cleanest ways to auto-add the auth token to the request headers prior to Angular 4.3, and using the new Angular 4.3 HttpClient with an interceptor as the recommended way for any app on 4.3 or later.
- ClientApi - A simple ASP.NET Core API project, no auth in the project dialog, then add the IdentityServer4.AccessTokenValidation and Microsoft.AspNetCore.Cors nugets, and set up the config in Startup.cs to authenticate and validate incoming access tokens.
So you can grab the bits here:
To get it running, do the following:
1. Open the solution in Visual Studio 2017 (after making sure you have installed the .NET Core 2.0 SDK).
2. Rebuild the solution
3. Set each project as startup project, then set the project to start as a console app, see figure below if you don't know how to do that.
4. With the SecuringAppsWithIdentityServer4NetCore2 project set as startup project, open Package Manager Console, make sure that project is selected at the top of that panel, and then run: update-database to create the ASP.NET Identity DB for users, roles, and claims.
5. Right click on solution root, select Set Startup Projects, select multiple projects, and set all to "Start". Move the IdentityServer project up to the top of the start order, and put the Client API project second.
6. Run, hit localhost:4200 for the Angular client and localhost:4201 for the MvcClient.
7. In the MVC client, click on the Secure menu item. You will be redirected to the IdentityServer STS. Before you can log in you have to register (upper right menu). Once you complete registration, you will be logged into the STS. To see the full flow, click logout in the upper right, then go back to localhost:4201 to start the process again. Hit Secure, you will be redirected to the STS, log in with the account you created, you will get prompted for consent to call the client API and access your profile on the STS, and then you will be redirected back to the MVC client secure page.
8. Similar process for the Angular client, hit login and it will redirect to the STS. Note that if you have already logged into the STS from the MVC client, you will not be prompted to login again (cause SSO...).
Hopefully that is enough to get you going.
Ping me on Twitter (@briannoyes) or by email (brian.noyes on Gmail) if you have questions.