Admin tool for ASP.NET Identity integrated with EPiServer CMS 8

Introduction

When you integrate ASP.NET Identity with EPiServer you will get a new database for the users, which will be created by the Entity Framework. First time you run the solution this database will be created and will be clean. We need an editor to be able to create and manage users and roles. Since I didn't find any editor that suited my need, I ended up building one myself. The result you can see in the picture below.

I have worked with EPiServer since early 2000's, but I can’t remember the Admin has changed much. Sure could need some love. I wish that all the links under “Access Rights” could disappear except “Set Access Rights”, when the ASP.NET membership was disabled and that you could add plugins to the “Access Rights” area. Nevertheless, for now we must add it to the “Tools” area.

NB! Before you go on, you should take a look at “How to integrate ASP.NET Identity with EPiServer 8”, if you haven't read this first.

Source Code

Demo source code for this solution can be downloaded, which also includes the Admin tool:
https://github.com/saandahl/IdentityDemo

Install necessary Nuget Packages

First, we need to install some nuget packages. Open the Tools > Nuget Package Manager > Package Manager Console and run this commands:

PM> Install-Package PagedList

PM> Install-Package PagedList.Mvc

PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax

The PagedList will add a new folder “Content” and the jQuery package will add a folder called “Scripts”. All need for the Admin tool. 

Source code for the Admin Tool

To avoid getting the reward for the longest blog post ever, I stored the source code for both ASP.NET Identity integration and the Admin Tool on Github. You can find that here.

Here is an overview what files that was added or changed to make this work in the Alloy Demo:

Content > Site.css

This CSS was created to fix some missing tags, but most the CSS is reused from EPiServer.

Models > Account > AccountViewModels.cs
Includes models for both editor and login view.

Helpers > HtmlHelpers.cs

The ActivePage function was added to get the tabs correct in the editor.

Views > Identity 
This folder include all the views for the editor.

Views > Shared > Layout > _LayoutIdentity.cshtml

Master page for the editor. Some of the CSS could get wrong url if you use a different version of EPiServer. Could probably use some other CSS files. But, it works for the demo.

Web.config

NB! Do not apply this code snippet before you have created an admin user with both WebAdmins and WebEditors role.

  <location path="Identity">

    <system.web>

      <authorization>

        <allow roles="WebAdmins, Administrators" />

        <deny users="*" />

      </authorization>

    </system.web>

  </location>

How to create an user?

So when you can got all the files and code in place and build is succesfull. Open the startpage and then add "/Identity/Index" in the URL. If you got all the code correct you should be able to get something like this up in you browser:

Then click on the Create User tab and create a new account.

Then go to the Manage Roles tab. Add both “WebAdmins” and “WebEditors”.

Then Click on the Account overview tab and hit “Roles for user” button. Here you can add the roles you just added.

Now you should be able to login at this URL /Account/Login.

NB! Don’t forget to add the web.config snippet after you have verify that your user have managed to login or else everyone can do the same as you just did.