Token Based Security: Setting Up IdentityServer UI- Part 6

Introduction

We have been discussing different parts of various Authentication/Authorization requirement scenarios. We also covered some theory and saw some demo code regarding OAUTH, OIDC, Identity Server etc.

In previous post, we learned how to configure IdentityServer, AllowedScope of a client application and how to make a PasswordTokenRequest for the scopes to UserInfo Endpoint.

Currently our IDP is running as a web application without UI. Typically IDP will be needing some UI for different Authentication/Authorization purposes e.g. Login, Logout, Change Password, Consent Screens etc.

Fortunately, IdentityServer team put together a quick start UI on github which is very easy to bring into your project and quickly get started with some UI components.

This repo contains a sample MVC based UI for login, logout, grant management and consent.

In this post, we will see the steps to bring this UI into our IDP project.

Quick Start UI

The quick start UI is available from this github link:

To download, Open a PowerShell window in IDP project folder and execute the following command:

iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/IdentityServer/IdentityServer4.Quickstart.UI/main/getmain.ps1'))

This will download the necessary resources to the IDP project.

Next, updated the Startup.cs file for IDP with following changes:

These changes will set the MVC controllers and view settings resulting in the downloaded UI components wired-up to our IDP project.

Now, if we start our application and navigate to IDP URL in browser, following UI shows up:

It has some useful information, you can find discovery document link and some other links regarding claims and stored grants. As this is just an MVC View, it can be customized as needed, but we will leave it as it is for now.

Claims Information

We can click the link for claims on the above shown UI, it will prompt for Login and I used the login of test user account (we setup this in previous posts) and following claims information was displayed.

Stored Grants

From the link shown on Quick Start UI, it will prompt us to Login as follows:

once login, it will show us a screen with Client Application Permissions as follows:

At this point Quick Start UI is successfully plugged into IDP and we will visit it again as we continue working with Identity Server.

Summary

In this post, we wired up some User Interface for our IDP project. There are some other open source projects on the web which provides some more views and control for IdentityServer UI. You can write the UI yourself e.g. using Angular or just add more MVC Views and Controllers. Quick Start UI is very basic and a good starting point for our purposes.

We will resume our learning in next post in this series. You can download the source code from this git repository. Let me know, if you have some comments or questions. Till next time, happy coding.

My Recent Books