Umbraco Members and Identity Server - Part 2

Part two in a three-part series about integrating Umbraco front-end members with Identity Server for authentication and authorization. In Part 2, we're going to plumb in our own login page and create our own minimal account controller

Peter Stokes · Thursday, March 29, 2018

Introduction

In Part 1 of this series I showed how to integrate Identity Server with Umbraco Identity plugin. But what if you already have login pages etc. and don’t need the account views that Umbraco Identity provides?

So, in Part 2 we’re going to plumb in our own login page and create our own minimal account controller.

Setting up Identity Server is identical to the process laid out in the first article so I’m not going to repeat that here.  We’ll start off by installing Umbraco which was also in the first post, but I’ll repeat here because we do divert half way through.


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

Role

First up create a new Member Group in the Members section named Standard User. In a future article, I will show how to return role claims from Identity Server and implement a custom role provider. For simplicity of an already lengthy article, I’ll just use a built-in functionality in Umbraco.

Umbraco Member Group

Login and Access Denied Pages

Next, we need to open the back office and create two document types with associated templates.  Umbraco’s public access feature requires a content login page and an error page.  If you’re familiar with creating document types and content in Umbraco, then skip ahead to the next section.

In Umbraco back office create a new document type with an associated template called Login, allow this one to be created at the root.  Then create another called Access Denied, again let be created at the root.

Create two pages under the content node, one for login and one for access denied using the respective templates for each.

You content tree should now look like this ...

Umbraco Content Tree

Whilst we’re here let’s protect a page from public consumption.  Sorry good people of Umbraco but your mugshots are only going to be available to people logged in.

Right-click the People node and select Public Access.  Choose our member group, login page and error page as per the screenshot below.

Umbraco Public Access

That’s it for the Back-Office part of this article back to Visual Studio.

Add the following razor script to the Login view:

And this to the access denied view:

Owin Startup

That was a fair bit of setup to get through before we can tackle the important parts of setting up the Owin pipeline and handling the external login.

Before we can write any code, we need some NuGet packages:

Install-Package Microsoft.Owin.Security.OpenIdConnect -Version 3.1.0
Install-Package IdentityModel -Version 3.0.0

First up is the Owin pipeline. Create an App_Start folder in the Umbraco solution and add two classes to the folder named AppBuilderExtensions.cs and CustomOwinStartup.cs.

The AppBuilderExtensions.cs class is virtually the same as in the first article in the series, the code listed below:

And the code for CustomOwinStartup.cs is:

Before Umbraco will use the new startup class we need to alter the web.config to point to it.  Locate the line:

<add key="owin:appStartup" value="UmbracoDefaultOwinStartup" />

Change it to:

<add key="owin:appStartup" value="CustomOwinStartup" />

Account Controller

Now let’s move on to the AccountController which is simplified version of UmbracoIdentity’s account controller.

Create a folder in the Umbraco solution called Controllers and add a class called AccountController

The following code is all we need:

Job Done

That's it, run the Umbraco and Identity Server projects.  Try hitting the People page in the site and you will be re-directed to the Identity Server login page.  Login using username: test with password: password and you will be authenticated and allowed to view the page.

That’s it for part 2 of this series.  In this article, we have shown how to setup and integrate Identity Server and Umbraco using the custom Owin startup and simple account controller.

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

If you found this post useful please share and comment.


Share:

Peter Stokes

Peter Stokes

All author posts
;