OpenID Connect Interactive authentication with Authorization Code Flow (OIDC Part 3)

Share on facebook
Share on google
Share on twitter
Share on linkedin

In part 2 we created a simple OIDC setup using hard-coded client credentials for the client to obtain an access token, so it could invoke the resource API. In this post, we are gonna enable interactive login on the identity server with hard-coded test users using authorization flow. After the users have successfully logged in, the requested scopes will be provided to the client app using the callback URL. This will enable the client app to display the users’ claims on an authorized MVC view.

To enable this, we will need to do some changes to the authorization server and client app:

The OpenID connect with IdentityServer4 and Angular series

This series is learning you OpenID connect with Angular with these parts:

Authorization server – setup interactive login

The easiest way to get started with an interactive login is to download the quickstart controllers and view supporting this by running the below script (as administrator) in the command prompt inside the authorization server folder:

After this the authorization server project should have a folder structure like this:

This provides you with controllers and views for managing accounts, consent and gives you a standard MVC homepage (of course with cringe-worthy bootstrap styling!).

For the login, we are going to create an authorization code grant client in the Config.cs file:

Here we are making this use authorization code flow by setting the AllowedGrantTypes to Code. Because we use authorization code flow we also need to specify a client secret, to be shared with the client app. The redirect urls are just set to identity server defaults. The allowed scopes is containing the resourceApi as well as two IdentityResources resources that are added to the Config.cs file as:

Where an APIResource grants access to resources on an API, Identity Resources grants access to information about the user. These Identity Resources enables scopes for getting a unique id of the users, called subject id, as well as users basic profile information such as name, address etc.

We are setting these new configurations up in the Startup.cs file that should look like this:

Since the last part, we have now added MVC and static files middleware as well as AddInMemoryIdentityResources for the identity resources.

Client app – Create an authorized view with user information

For the client app we are gonna create an authorized view for displaying user information contained in the id token.

First we are setting the authentication middleware up for our new authorization code flow client:

Here we are disabling the Jwt Claim type mapping before we call the middlewareJwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear(); Otherwise the claim names would have long URI names instead of how they are in the JWT payload. For ease, we are using cookies here that will be send to the app client server on every request. It is specified that the client should use authorization flow with: options.ResponseType = “code” We are connecting to the identity server client by specifying the corresponding client id and client secret. options.SaveTokens = true is saving the tokens in the authentication cookie. That way the tokens can easily be access from the HTTPContext.

The IdentityController from last part is to be rewritten a little to return the claims from basic authentication to view by encapsulating the logic in a private method:

The Index action is now an authorized endpoint only accessible if the authentication middleware accepts the request (valid authentication of user).

This is simply getting the user claims from the resourceApi using access token obtained with clientCredential authentication. The data is passed to the view using a simple view model containing a property for user claims with client credentials.

Also, we create a logout action for logging out the user by clearing the authentication cookie and sign out of OpenID connect session:


Finally we create a simple view for showing the client credentials from the resource API alongside with client credentials obtained using the new authorization code client:

Notice that in the bottom of the view we also add a button for logging out the user with the logout action.

Running it all

We can now run the whole application by right-clicking the solution in the Solution Explore->Properties and select Start for the three projects as:

We should now be able to go to “http://localhost:5002/identity” and be prompted for login, which we do with one of the test users. Hereafter we will be redirected to the identity view looking like:

Great job following along this far! Next time we will set up a hybrid flow client that can call the resource API.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments


How To Become An In-Demand Angular Architect & Accelerate Your Career In 8 Weeks The Angular Architect Accelerator online program’s next cohort will soon be kicked off! Sign up now by email to learn more and secure a seat for the free warmup workshop. Enrollment is currently closed but the next cohort will start soon…  Sign up to get notified about the

Read More »

Walkthrough: Building An Angular App Using Tailwind CSS and Nx

In this video, we will cover a walk-through from scratch covering how to Build and Angular app using Tailwind CSS and Nx including Angular standalone components. 🖌 Tailwind CSS setup and usage⚙️ Nx monorepo configuration🧍‍♂️ Standalone components✅ Building a complete app in less than 2 hours with best practices ⏳ Timestamps:0:00 – Intro1:00 – Tailwind

Read More »
Key principles for a successful Angular project

Key Principles for a Successful Angular Project

Learn the key principles to improve your Angular project including industry best practices and practical examples. This post covers all the things you’d need, ranging from monorepos, continuous delivery, to design systems and performance optimizations.

Read More »