Token-Based Security Part 6: Configuring Identity Server UI.

Introduction

We are discussing different parts of the scenario requiring different authentication / permission. We also covered some theories and saw some demo code regarding OAUTH, OIDC, ID server etc.

In the previous post, we learned how to configure the allowed scope of an identity server, a client application, and how to create a password token request for scopes at user info and point.

Currently, our IDP is running as a web application without UI. Generally IDP will need some UI for various authentication / permission purposes like Login, Logout, Change Password, Consent screen etc.

Fortunately, the IdentityServer team put a quick start UI on GitHub that is very easy to get into your project and get started quickly with some UI components.

This repo has a model MVC based UI for login, logout, grant management, and consent.

In this post, we will look at the steps to bring this UI into your IDP project.

Quick Start UI.

The Quick Start UI is available from this GitHub link.

To download, open a. Power shell In the IDP Project folder window and follow the following command:

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

It will download the resources required for the IDP project.

Screenshot of the resource.

Next, update Startup.cs File for IDP with the following changes:

Updating screenshot of startup file.

These changes will set up MVC controllers and see the settings so that the downloaded UI components will be wired to our IDP project.

Now, if we start our application and navigate to the IDP URL in the browser, the following UI appears.

ID Server 4 Welcome screenshot.

It has some useful information, you can find links to the discovered document and some other links regarding claims and stored grants. Since this is just an MVC view, it can be customized as needed, but we’ll leave it as it is now.

Claim information.

We can click on the link. Claims On the UI shown above, it will indicate the login and I used the test user account login (we set it up in previous posts), and the following claims information was displayed.

Confirmation cookie screenshot.

Stored grants.

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

Login screenshot.

Once you are logged in, it will show us a screen with client application permission.

Screenshot of client request permission.

At this point, the QuickStart UI has been successfully plugged into IDP and we’ll see it again as we continue to work with the ID server.

Abstract

In this post, we wired some user interfaces for our IDP project. There are other open source projects on the web that provide more feedback and control for the IdentityServer UI. You can write the UI yourself, such as using Ang Angular, or add more MVC views and controllers. Quick Start UI is very basic and a good starting point for our purposes.

We will resume our education in the next post in this series. You can download source code from this gut repository. Let me know if you have any comments or questions. Until next time, happy coding!

.

Leave a Reply

Your email address will not be published.