avatarFuji Nguyen

Summary

The undefined website provides a comprehensive guide on setting up and using the Skoruba.IdentityServer4.Admin template to create an Admin UI for managing IdentityServer4, complete with instructions, code snippets, and screenshots.

Abstract

The undefined website outlines the process for utilizing the Skoruba.IdentityServer4.Admin template to establish a user-friendly Admin UI for IdentityServer4. It details the steps for downloading and running the template, configuring the solution, and understanding the generated source code. The guide emphasizes the template's support for various client application connection types and its ability to manage client apps and WebAPI resources. It also highlights the logical design of the Admin UI, the structure of the Visual Studio solution, and the database configuration required for operation. The article underscores the benefits of using the Skoruba.IdentityServer4.Admin template, such as time and cost savings, and provides resources like screencasts and related stories for further learning.

Opinions

  • The author emphasizes the importance of a well-designed user interface, quoting that "A user interface is like a joke. If you have to explain it, it’s not that good."
  • Jan Škoruba, the creator of IdentityServer4.Admin, expresses his commitment and satisfaction in contributing to the open-source community by providing the Admin UI for over four years.
  • The author suggests that developers can save time and reduce stress by using the Skoruba.IdentityServer4.Admin template, allowing them to focus on feature development rather than authentication and authorization infrastructure.
  • The article conveys appreciation for open-source project developers, encouraging readers to acknowledge their work by giving them a "star" on GitHub.
  • The author provides a personal touch by including direct comments from Jan Škoruba regarding the development and future plans for the IdentityServer4.Admin project.

IdentityServer4 Admin UI from Skoruba.IdentityServer4.Admin Template

Photo by Brooke Cagle on Unsplash

A user interface is like a joke. If you have to explain it, it’s not that good (:

Update

On April 26, 2021, developer Jan Škoruba released IdentityServer4 Admin UI version 2.0.1 which supports ASP.NET CORE v5. I have published an updated tutorial Run IdentityServer4 Admin UI local and Azure.

The IdentifyServer4 is a free, open-source OpenID Connect and OAuth 2.0 framework for ASP.NET Core. If you are in the market for a robust admin user interface (UI) to manage the IdentityServer4, you come to the right place. In this story, I will provide

  1. Instructions to set up the beautiful Admin UI using the open-source Skoruba.IdentityServer4.Admin template
  2. Walk-thru of the generated source code and run it on localhost

Open Source Project Highlights

To develop this story, I have reviewed and integrated tools and techniques from the following high-quality opensource projects

  1. IdentityServer4 — this project has 7.7K stars on Github. It is the #1 opensource project for securing enterprise ASP.NET WebAPI by Brock Allen
  2. IdentityServer4.Admin — this project has 2.5K stars on GitHub. It is the best Admin UI of the IdentityServer4 and Asp.Net Core Identity by Jan Škoruba

One way you can show your appreciation to open-source project developers is by giving them a “star” on Github.

For this story, I reached out Jan Škoruba, the creator of IdentityServer4.Admin for his comments. See below for Jan’s response. Bless his heart!

I have been working on this open source Admin UI for more than 4 years. I really like the IdentityServer4 and I am happy that I am able to share this Admin UI to others. 😊

Currently, I am working on version 2.0.0 — which contains upgrade IdentityServer4 to version 4 and convert UI part into Razor Class Library.

After IS4 Admin version 2.0.0 I will continue on porting this Admin UI to Duende Identity Server.

— Jan Škoruba

What is Skoruba.IdentityServer4.Admin template?

.NET Core developers can use the Skoruba.IdentityServer4.Admin template to generate a Visual Studio solution that provides Admin UI to the IdentityServer4. Via the Admin UI, you can register client apps and WebAPI resources.

A variety of client application connection types are supported by IdentityServer4

  1. PKCE flow — for Mobile, SPA application connection
  2. Hybrid flow — for Server-Side Web application connection
  3. Resource Owner Password flow— for Machine/Robot application connection
  4. Client Credentials flow — for Server to Server application connection
  5. Device flow —for Limited-Input Device Application connection

Part I — Download and Run the Template

The dotnet command is used to download and run the template.

Task 1 — Download the template

The template can be downloaded and installed via the dotnet new command with parameter -i (for install). For example, open the command prompt and enter the command below to download the Skoruba template version 1.0.0

dotnet new -i Skoruba.IdentityServer4.Admin.Templates::1.0.0

Task 2 — Run the template

To generate the Visual Studio solution, run the dotnet new, specify the template name and template parameters. Suppose you want to generate the source code for a project named “MyProject” and place the project source code in the folder C:\apps\skoruba, follow the instruction below

  1. Open a command prompt and navigate to folder C:\apps\skoruba
  2. Run the script donet new script below to generate the project
dotnet new skoruba.is4admin --name MyProject --title MyProject --adminemail "[email protected]" --adminpassword "Pa$$word123" --adminrole MyRole --adminclientid MyClientId --adminclientsecret MyClientSecret --dockersupport true

See below for the explanation of template parameters (from https://github.com/skoruba/IdentityServer4.Admin)

--name: [string value] for project name
--adminpassword: [string value] admin password
--adminemail: [string value] admin email
--title: [string value] for title and footer of the administration in UI
--adminrole: [string value] for name of admin role, that is used to authorize the administration
--adminclientid: [string value] for client name, that is used in the IdentityServer4 configuration for admin client
--adminclientsecret: [string value] for client secret, that is used in the IdentityServer4 configuration for admin client
--dockersupport: [boolean value] include docker support

Once the script is completed, you will find the source code in C:\apps\skoruba as shown in Figure 1.

Figure 1— Source code folder

Launch Visual Studio and open the solution file MyProject.AdminUI.sln. You should see the solution projects as shown in Figure 2

Figure 2— Solution Structure

In the Solution Explorer, right mouse click on the solution name, select Properties, and set “Multiple startup projects” to three projects

  1. MyProject.Admin
  2. MyProject.Admin.Api
  3. MyProject.STS.Identity

See Figure 3 for a screenshot of enabling “Multiple startup projects” in Visual Studio.

Figure 3— Set Multiple startup projects in Visual Studio

To run the solution, make sure the setting is Multiple Startup Projects, and then click on Start as shown in Figure 4.

Figure 4— Start the solution with the Multiple Startup Projects option

Your development workstation will launch three instances of the web browsers. Locate the one with the login screen as shown in Figure 5, and log in with the account (admin, Pa$$word123). The password is set in the parameter “adminpassword” when you ran the template earlier.

Figure 5— Admin UI login screen

After login, click on IdentifyServer Admin menu as shown in Figure 6

Figure 6— Menu taking to Admin UI after login

You should see the Admin UI running on port 44303 as shown in Figure 7.

Figure 7— Admin UI features

Part II — Walk-thru of generated source code

Before doing a deep dive into the solution source code, let’s get familiar with the Admin UI logical design. The Visual Studio solution source code provides three major functions in support of OpenID Connect and OAuth 2.0 framework.

1. Client — an ASP.NET Core web application making protected resource requests with its authorization in the form of the JSON Web Token (JWT)

2. Token Service — an ASP.NET Core web application, issuing JWT to clients and validating access tokens upon request access to ApiResources

3. ApiResources — the ASP.NET Core WebAPI capable of accepting and responding to protected resource requests using access tokens

Figure 8 depicts the relationship between three startup projects and their running ports.

  1. MyProject.Admin — port 44303
  2. MyProject.STS.Identity — port 44310
  3. MyProject.Admin.API — port 44302
Figure 8 — Functional diagram and localhost ports in Admin UI solution

Each project has its own port which allows Multiple Projects Startup in Visual Studio. If you want to change the port number, update the port in the launchSettings.json in the project > Properties folder. Figure 9 shows the launchSettings.json in the MyProject.Admin project

Figure 9 — Project runtime port number in the launchsettings.json file

Solution Structure

As shown in Figure 2, the solution contains 9 projects. Below is a high-level description of each project.

  1. MyProject.Admin — ASP.NET Core MVC application that displays Admin UI
  2. MyProject.Admin.Api — ASP.NET WebAPI that exposes REST API for MyProject.Admin to consume
  3. MyProject.Admin.EntityFramework.MySql — DB provider for MySql
  4. MyProject.Admin.EntityFramework.SqlServer — DB provider for SqlServer
  5. MyProject.Admin.EntityFramework.PostgreSQL — DB provider for PostgreSQL
  6. MyProject.Admin.EntityFramework.Shared — DB context and entity models used in EntityFramework
  7. MyProject.Shared — shared Dtos, Helpers, Services, and Configurations
  8. MyProject.STS.Identity — an instance of IdentityServer4 code to support Admin UI authentication and authorization for incoming requests
  9. docker-compose — contains docker-compose scripts

Database Configuration

The connection string is specified in the appsettings. json file. The default database name is “IdentityServer4Admin”. If you want to update the connection string, be sure to update the appsettings. json in all three projects MyProject.Admin, MyProject.Admin.Api and MyProject.STS.Identity. See Figure 10 for a screenshot of the appsettings. json file. Notice that line 17 indicates the default database type SqlServer. You can change the setting to another type such as MySQL or PostgreSQL.

Also from Figure 10, the left side of the screenshot shows a set of tables behind Admin UI. These tables are setup automatically by EntityFramework when you first run the project. You can get to the SQL Server Object Explorer from the Visual Studio > View menu.

Figure 10 — Screenshot of appsettings. json in MyProject.Admin project

Seed Data

Two json files are the source to seed the data and you can find them in the MyProject.Admin project. You can customize or add new seed data in these two files before starting the project the first time.

  1. identitydata.json — seeding default users and roles (Figure 11)
  2. identityserverdata.json — seeding clients and api resources (Figure12)
Figure 11 — Screenshot of the identitydata.json
Figure 12 — Screenshot of identityserverdata.json

Source Code

You can get the generated source code in GitHub https://github.com/workcontrolgit/MyProject.AdminUI

Screencast

Watch the Youtube screencast (no voice yet) to see how to

  1. Install Skoruba.IdentityServer4.Admin template
  2. Generate Admin UI solution from template
  3. Run the Visual Studio solution
  4. Log in to the Admin UI

Related Stories

  1. IdentityServer4 with Admin UI, ASP.NET WebAPI, and Angular Tutorial
  2. Register Clients and ApiResources in IdentityServer4 | Tutorial 2
  3. ASP.NET WebAPI JWT validation against IdentityServer4 | Tutorial 4
  4. Angular SPA authentication against IdentityServer4 | Tutorial 5

Summary

One of the most prevailing features of IdentityServer4 is its ability to provide a single, centralized Identity and Access Management (IAM) solution across multiple applications. The Skoruba.IdentityServer4.Admin template provides Admin UI to streamline the configuration of oAuth2 client applications and API resources. Developers can focus on writing code for new software features and less on cross-cutting code for authentication and authorization. It saves time and money and alleviates the developer's stress. Give it a try!

Identityserver4
Recommended from ReadMedium
avatarHilal Yazbek
Blazor Server App Authentication — Simplifying Authentication in .NET Core API with JWT — Part II

In this blog post, I will walk you through implementing an Authentication State Provider in a Blazor Server Application by calling an…

7 min read
avatarAlbert Starreveld
Set up a SPA+BFF with ASP.NET Core and Angular in 3 steps (.NET 8)

Last year I wrote an article about how to set up a SPA + BFF with .NET 7. In short, to scaffold an ASP.NET Angular project in .NET 7 and…

4 min read
avatarMohsin Afzal
Blazor Web App .NET 8 Apply Custom Authentication by using an API

To Apply Custom Authentication on a Blazor Web App we need to Follow below steps.

1 min read
avatarChandrashekhar Singh
Build a RESTful Web API with .NET 8

In this article, I’ll show you how to construct a RESTful Web API using ASP.NET Core in .NET 8.0 alongside Entity Framework Core.

11 min read
avatarAnkit Sahu
Authentication and Authorization in .NET 8 Web API

Previous Article

9 min read
avatarKerim Kara
Authentication and Authorization in ASP.NET Core: A Comprehensive Guide

Authentication and authorization are essential components of any web application, ensuring the security and proper access control for…

20 min read