IdentityServer4 in ASP.NET Core — Javascript Client configuration
The following post provides information on how to set up an IdentityServer4 using ASP.NET Core.
The sample code presented in this post is a combination of different QuickStarts referenced in IdentityServer4 Samples. The code here is intended to be used for initial Development as it uses InMemory storage options — you might want to take a look at Entity Framework storage
#1 Introduction
IdentityServer4 is an implementation of OpenID Connect and is built on top of OAuth2. Its powerful feature is that it provides Identity, Authentication + OAuth2 (Authorization). For more information, refer to this site and I recommend looking at the following descriptive video:
After this quick introduction, now let’s do some coding.
#2 Getting an ASP.NET Core Template
If you followed my previous posts, you’ll see that I always try to provide templates and this post won’t be the exception. The following repo contains a clean template for an ASP.NET Core application, this template has been created using Visual Studio 2017 Community Edition and works in Visual Studio for Mac, Visual Studio Code and obviously on Visual Studio 2017 Community Edition.
#3 Adding IdentityServer4 references
The following references needs to be added to our template in order to have our IdentityServer4 application working properly.
Open up your csproj file — by using any text editor, I use Visual Studio Code — and paste the following references there.
<PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="1.1.0" /><PackageReference Include="IdentityServer4" Version="1.4.2" /><PackageReference Include="Microsoft.Extensions.Logging.Console" Version="1.1.1" /><PackageReference Include="Microsoft.Extensions.Configuration.EnvironmentVariables" Version="1.1.1" /><PackageReference Include="Microsoft.Extensions.Configuration.FileExtensions" Version="1.1.1" /><PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="1.1.1" /><PackageReference Include="Microsoft.Extensions.Configuration.CommandLine" Version="1.1.0" />
Next, let’s restore our packages — If you are on Visual Studio 2017 or for Mac the packages will get restored automatically — otherwise you’ll have to run the following command:
dotnet restore
Make sure you run the command using elevated rights as sometimes you’ll face restore issues.
#4 Adding the necessary code
The following section outlines the folders/classes that needs to be added to the initial template from above to have our IdentityServer4 application working properly.
NOTE: You can skip this whole section and just clone this repo as it has all the necessary code for our IdentityServer4 to work with a JS Client that is using oidc-client.
Let’s create the following folders:
- Caching — Will contain a caching strategy to reduce the State parameter size in the URL, Azure AD does not properly handles long URLs
- Configuration —For Prod or Dev settings
- CustomAttributes — Will contain a custom attribute to inject header properties
- Models — Will contain View Model, Service and Option classes for our IdentityServer4 application
Once you have created the different folders, let’s proceed to add the different classes — like shown below:
#5 Javascript Client Configuration (oidc-client)
Since the repo included above contains all the necessary code, I won’t be pasting the code again here, instead I will focus on relevant information to properly configure our IdentityServer4 to work with a Javascript Application (like Angular2, refer to this post for more information)
RedirectUris:
If you followed my previous post, then you already have a callback component created, here we have to make sure that your RedirectUri matches the one configured under oidc-client settings — I spent quite some time getting an invalid request and the reason was that I did not include the correct RedirectUri.
Client configuration is like a whitelist that allows your Client to make requests to IdentityServer and to be able to request specific claim information (AllowedScopes).
#6 Account Controller
As mentioned above, this sample code is meant for initial Development, you might want to use a more robust storage mechanism than In Memory.
If you open up AccountController.cs you will notice the line that initializes the user store. This user store contains a List<User>, I recommend using Microsoft Identity with any datasource storage.
#7 Startup.cs
Another important configuration is the one where we will set middlewares and inject service dependencies, this configuration is located in Startup.cs -> ConfigureServices and Configure methods.
ConfigureServices method:
In this method you’ll be adding the following services to the IoC (by using Dependency Injection):
- Cors, this example is granting access to all methods, all origins — if you know the specific Origins (clients making a request) then you can add the proper IPs or DNSs instead of allowing access to everyone
- MVC, IdentityServer4 Host will be running under MVC
- Distributed Cache, this cache helps reducing the size of “State” property (instead of including the entire State value, just the cache key is included in the URL and our code will fetch the value from the cache in order to retrieve the State value)
- IdentityServer, injects IdentityServer4 service
Configure method:
This method contains all the different middleware registrations (the registration order matters! each middleware is going to be executed — during the request pipeline — in the order that it was registered)
#8 Conclusion
This code demonstrates the configuration of IdentityServer4 — using a JS Client. Now you are ready to secure your Resource Api (i.e. Web Api), in my next post I will show how to configure your Web Api to use IdentityServer4 as the authorization authority.
