d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Token-Based Security Part 6: Setting Up Identity-Server UI

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 the 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, the 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 the 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 for the IDP project.

Resources screenshot.

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

Updating the start-up file screenshot.

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 the browser, the following UI shows up:

Identity Server 4 welcome screen screenshot.

It has some useful information, you can find the discovery document links 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 set up this in previous posts), and the following claims information was displayed.

Authentication Cookie screenshot.

Stored Grants

From the link shown on QuickStart UI, it will prompt us to log in as follows:

Login screen screenshot.

Once you log in, it will show us a screen with Client Application Permissions as follows:

Client Application Permissions screenshot.

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 Interfaces for our IDP project. There are some other open-source projects on the web which provide 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 the next post in this series. You can download the source code from this git repository. Let me know if you have any comments or questions. Until next time, happy coding!

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this