Umbraco Members and Identity Server - Part 1

Welcome to the first in a three-part series about integrating Umbraco front-end members with Identity Server for authentication and authorization. In Part 1, we will be extending the Umbraco Identity plugin to use Identity Server for external authentication.

Peter Stokes · Tuesday, January 30, 2018

Introduction

Welcome to the first in a three-part series about integrating Umbraco front-end members with Identity Server for authentication and authorization.

I’ve been working for the last 6 months or so on migrating a SharePoint based portal to Umbraco.  As part of this move we wanted the Umbraco site to use the company’s existing Identity Server authentication system.

Integrating a pure MVC site with Identity Server is a trivial exercise but a quick google search for terms Umbraco and Identity Server returns several posts on the forums without any real solutions.

https://our.umbraco.org/forum/developers/extending-umbraco/74636-use-identityserver-with-user-membership

Including this post from my colleague Leo

https://our.umbraco.org/forum/extending-umbraco-and-using-the-api/86929-umbraco-authentication-based-on-openid-connect-oauth2-protocols

A lot of the solutions posted are for Back Office users and not for Front End Members.

I’ve written this series of articles to cover some of the solutions I came up with in solving this problem.

In Part 1, we will be extending the Umbraco Identity plugin to use Identity Server for external authentication.

In Part 2, I will show you how to automatically register members and assign the user to a member group, ideal if you just want to protect pages.

Finally, in Part 3, we will remove the need for a local member and implement a custom role provider.


Setting Up Identity Server

The first step is to set up the Identity Server project. For the purposes of this article, I’m going to follow the instructions for setting up a basic Identity Server solution.

If you're already familiar with setting up Identity Server or already have an existing implementation the feel free to skip ahead to the configuring Umbraco section below.

https://identityserver4.readthedocs.io/en/release/quickstarts/0_overview.html

Next, we need to add some users and resources.  We’ll use in-memory configuration for demo purposes.  Add a class named Config.cs to the project and then insert the following code

Alter the configure services function to use the config we have just created

Now we need to add the UI to the Identity Server project so that we have login and logout pages.  Following the instructions on the Identity Server page https://identityserver4.readthedocs.io/en/release/quickstarts/3_interactive_login.html

As per the instructions, we will run the command from our project folder

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

Keep following the instructions to add the MVC pipeline.  Our ConfigureServices and Configure functions should now look like:

You should now be able to run the application and login.  Navigate to http://localhost:5000/account/login

Identity Server Login

Use the credentials Username: test Password: password

That’s it we’re done with Identity Server now onto Umbraco !!


Setting Up Umbraco

If you are not familiar with installing Umbraco then follow the instructions https://our.umbraco.org/documentation/getting-started/setup/install/install-umbraco-with-nuget to get started.

I’ve set up Umbraco to use SQL CE and installed the default starter kit.

Firstly, let's change the default port to 5001 so that it matches up with the config we set up in Identity Server earlier

 

Umbraco Project Properties

 

Shannon Deminick has an excellent project https://shazwazza.com/post/aspnet-identity-for-umbraco/ which provides integration with Social Media authentication providers.

Follow the instructions on his GitHub repo to install and setup. 

Before we can add some code, we need to install a couple of Nuget packages

Install-Package Microsoft.Owin.Security.OpenIdConnect
Install-Package IdentityModel

Now add a class to the App_Start folder named AppBuilderExtensions.cs and add the following code to it:

This class sets up the OpenIdConnect implementation to point to our Identity Server instance.  Then in UmbracoIdentityStartup class uncomment the external cookie line and add the following immediately after:

JwtSecurityTokenHandler.InboundClaimTypeMap = new Dictionary<string, string>();

app.UseIdentityServerAuthentication("http://localhost:5000", "umbraco", "http://localhost:5001/");

That’s it all done, let’s fire up Umbraco and navigate to the account view.  Don’t forget to also start the Identity Server project.

Umbraco Identity Account - Pre Login

Clicking the OpenIdConnect button takes you to the login page.  Use the credentials test and password again and you will be redirected back to the account page but this time you are logged in.

Umbraco Identity Account - Post Login

That’s it for part 1 of this series.  In this article, we have shown how to setup and integrate Identity Server and Umbraco using the Umbraco Identity plugin.

You can find the complete source code for this on my github repo https://github.com/stokesy43/umbracoidentityserver-part1

If you found this post useful please share and comment.


 

Share:

Peter Stokes

Peter Stokes

All author posts
;