Develop MVC 5 with ASP.NET Identity in Visual Studio 2012

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

This tutorial will start from installing a full MVC 4 project in Visual Studio 2012, upgrading to MVC 5, EF 6 and ASP.NET Identity by updating or adding the Auth.Start, web.config, models, controllers and adding & removing references (NuGet Packages).

Purpose of this tutorial: Visual Studio 2012 Update 4 only gave us a Blank install of MVC 5. This creates a problem for those who don’t want to use Web Developer Express 2013 for development or for those of us who cannot upgrade to 2013 for whatever reason. Everything in the new Full Internet Application MVC 5 template in Visual Studio 2013 is totally fine to run in Visual Studio 2012. So this tutorial will take the easiest way I know how to convert a Full MVC 4 Application to a Full MVC 5 Application as shipped in 2013.

All you will need for this tutorial is Visual Studio 2012 (Doesn’t really make sense to use anything else). You could use Visual Web Developer 2012, but if that is the case why not just download the new version of Visual Web Developer 2013 that has the new template. This is for those who want to keep using Visual Studio 2012 to develop your application.

First let’s take a look at what the difference is from MVC 4 in 2012 to MVC 5 in 2013. The image below (for the most part) will show what has been added, taken away and modified. Everything new in 2013 is on the left and everything old from 2012 is on the right. What we will try to do is get everything on the right looking like the project on the left.

MVC 5-Identity

I am in no way responsible for anything you do to your precious project. If I were you I would follow along for the first time from a new project. I will attempt to get rid of all unnecessary references by finding them individually or finding the highest level item in the dependency that will remove a group of references and simply click uninstall in the NuGet Package Manager. I like to do this there, because it removes the chance of me uninstalling something with dependencies. If I chose the wrong one of the group it will tell me so and give me a list of dependencies which I can use to target the reference I need to uninstall. I will not be going over my thinking while comparing the two instead I will simply give instructions on which references to remove and which files to add and which files to modify until we are done. I figure my introduction has been long winded enough. Here we go.

1) Create a new ASP.NET MVC 4 Web/Internet Application using Razor in Visual Studio 2012.

2) Remove the Microsoft WebPages OAuth library, it requires the most dependencies of the things we need to remove.

You could use the Package Manager Console uninstall-package Microsoft.AspNet.Webpages.OAuth to remove references and libraries but it won’t automatically uninstall all of the dependencies. So instead use Manage NuGet Packages > Go to Installed Packages and look for the NuGet called:

Microsoft WebPages OAuth library

Click manage and uncheck all checkboxes, once it uninstalls, all of the following dependencies will be removed as well:

  • DotNetOpenAuth.AspNet
  • DotNetOpenAuth.OAuth.Consumer
  • DotNetOpenAuth.OAuth.Core
  • DotNetOpenAuth.OAuth.RelyingParty
  • DotNetOpenAuth.OpenId.Core
  • DotNetOpenAuth.Core
  • Microsoft.AspNetWebpages.WebData
  • Microsoft.AspNetWebpages.Data

3) Now remove the Microsoft ASP.NET Web API OData

Use Manage NuGet Packages and look for the NuGet called:

Microsoft ASP.NET Web API OData

Click manage and uncheck all checkboxes and all of the following dependencies will be removed:

  • Microsoft.Data.OData
  • Microsoft.Data.Edm
  • System.Spacial

4) I’m going to remove jQueryUI (Combined Library) & Knockout, because I’m not using them and they are not part of the MVC template in 2013.

Use Management NuGet Packages and look for the packages named:

jQueryUI (Combined Library) & Knockoutjs

you will need to click on manage for each one and remove them separately, but they will have no dependencies so it will be quick.

5) Now since we will be upgrading to MVC 5, let’s get rid of any deprecated packages, should be just one:

Use Management NuGet Packages and look for the NuGet called:

Microsoft ASP.NET MVC Fixed DisplayModes

you will need to click on manage and check all boxes. You will be prompted to also uninstall MVC, Web Pages & Razor. Go ahead and uninstall these.

Lets remove References that is not able to be removed in the Nuget Manager

6) Go to your Solutions Explorer, open References. Right Click and delete the following References:

This is optional, you may want one of these references for a specific reason. I’m only removing them, because they are not used in the 2013 MVC 5 Template.

  • System.Net.Http
  • System.Data.Entity
  • System.Web.Http
  • System.Web.Http.WebHost
  • System.Transactions

Now we will go into the NuGet Package Manager in the Updates section and update the following items:

  • jQuery
  • Json.NET
  • Entity Framework
  • jQuery Validation
  • Modernizr
  • Microsoft HTTP Client Libraries
    • Replaces/Updates Framework 4 HTTP Client Libraries
  • Microsoft ASP.NET Web Optimization Framework
  • Microsoft jQuery Unobtrusive Validation
  • Microsoft jQuery Unobtrusive Ajax

Now Install MVC 5 & Web API 2

PM> Install-Package Microsoft.AspNet.Mvc -Version 5.0.0
PM> Install-Package Microsoft.AspNet.WebApi.Core -Version 5.0.0

This will uninstall and re-install all of the other resources we need.

Close out of your project and reopen it for some of those updates and removed items to take.

7) Now that everything in our project is up to date, even things that were not absolutely necessary we did anyways like Web API 2 and jQuery. Let’s add the Microsoft ASP.NET Identity packages and their dependencies.

Open the Nuget Package Manager Console and enter the rest of these installs there. It will be faster to install them here. Only run the highlighted code. The text in parenthesis is the Package Name (id) for reference in case you wish to install in the NuGet Package Manager instead of the Nuget Package Manager Console. Do what you are comfortable with.

01) Install-Package Microsoft.AspNet.Identity.Core (ASP.NET Identity Core)
02) Install-Package Microsoft.AspNet.Identity.EntityFramework (ASP.NET Identity EntityFramework)
03) Install-Package Microsoft.AspNet.Identity.Owin (ASP.NET Identity Owin)
04) Install-Package Microsoft.Owin.Security.Facebook (Owin.Security.Facebook)
05) Install-Package Microsoft.Owin.Security.Google (Owin.Security.Google)
06) Install-Package Microsoft.Owin.Security.MicrosoftAccount (Owin.Security.MicrosoftAccount)
07) Install-Package Microsoft.Owin.Security.Twitter (Owin.Security.Twitter)
08) Install-Package Microsoft.Owin.Host.SystemWeb (Owin.Host.SystemWeb)
09) Install-Package Respond (Respond JS)
10) Install-Package bootstrap (Bootstrap)

OK, now we have all the packages installed. What we need now are the physical files that make up the Accounts view, controller, model, css and partials.

Now let’s create the files that make up Visual Studio 2013′s MVC 5 Web Application’s Account Login and Registration System.

8) Go to the App_Start folder and delete AuthConfig. Then right click on App_Start folder and Add > Class. Name it: Startup.Auth.cs
Dont forget the dot between Startup & Auth “Startup.Auth.cs”
place the following code in your file:

using System.Web;
using System.Web.Mvc;

using Microsoft.AspNet.Identity;
using Microsoft.Owin;
using Microsoft.Owin.Security.Cookies;
using Owin;

namespace Upgrade2013
{
public partial class Startup
{
// For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864
public void ConfigureAuth(IAppBuilder app)
{
// Enable the application to use a cookie to store information for the signed in user
app.UseCookieAuthentication(new CookieAuthenticationOptions
{
AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
LoginPath = new PathString("/Account/Login")
});
// Use a cookie to temporarily store information about a user logging in with a third party login provider
app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

// Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
// clientId: "",
// clientSecret: "");

//app.UseTwitterAuthentication(
// consumerKey: "",
// consumerSecret: "");

//app.UseFacebookAuthentication(
// appId: "",
// appSecret: "");

//app.UseGoogleAuthentication();
}
}
}

9) Go to the App_Start folder and open: BundleConfig.cs

place the following code in your file:

using System.Web;
using System.Web.Optimization;

namespace Upgrade2013
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
}

10) Right Click on the root directory and add a class. Name it Startup.cs Inside that file put the following code:

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(Upgrade2013.Startup))]
namespace Upgrade2013
{
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
ConfigureAuth(app);
}
}
}

The rest of the code for this project I am going to simply put in a .Zip file and let you install manually, because it is too much code to put on the tutorial. Simply extract the .zip file and copy the files from the Controllers folder to the controllers folder in your project, and so on.

Upgrade2013_Tut_Files

So I simply opened up the folder of this Zip File and drag & Dropped them into the solution. I did not have to include the files, Visual Studio made them available upon dropping them in. If a file already exists like the AccountController.cs, just overwrite it or delete it then move the new file in. It is important that you replace or add every file in this zip file, otherwise your project will not build.

If you named your Application anything other than “Upgrade2013″ you will need to run a find and replace to change all the namespaces and other areas of the code you just installed by copying those files into your project. failure to do this will cause your project not to build.

Ok we should have all of those files in the project now, go through each one and open them one by one and make sure there are no errors or squiggly lines. If we did our job at providing all of the right references before dropping these files in there should be no errors.

11) Lets delete the Filters folder and it’s lone file (InitializeSimpleMembershipAttribute.cs). We do not need it anymore for the accounts. IF you have a need for that folder you can keep it but at least remove the cs file or your build will fail.

12) Also go into the Global.asax and remove the line that says:

AuthConfig.RegisterAuth();

We have a few lines to change in the Web.Config file in the Views directory.

13) Lines 5, 6 & 7 of the web.config file in the Views directory

Change:
Version=2.0.0.0

To: 
Version=3.1.0.0

Now Change these version numbers in the web.config file in the Root directory.

14)
Change:

<appSettings>
<add key=”webpages:Version” value=”2.0.0.0” />

To:
<appSettings>
<add key=”webpages:Version” value=”3.1.0.0” />

15)
Remove:

<dependentAssembly>
<assemblyIdentity name=”DotNetOpenAuth.Core” publicKeyToken=”2780ccd10d57b246″ />
<bindingRedirect oldVersion=”1.0.0.0-4.0.0.0″ newVersion=”4.1.0.0″ />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name=”DotNetOpenAuth.AspNet” publicKeyToken=”2780ccd10d57b246″ />
<bindingRedirect oldVersion=”1.0.0.0-4.0.0.0″ newVersion=”4.1.0.0″ />
</dependentAssembly>

16)
Change:

<assemblyIdentity name=”System.Web.Helpers” publicKeyToken=”31bf3856ad364e35″ />
<bindingRedirect oldVersion=”1.0.0.0-2.0.0.0” newVersion=”2.0.0.0” />

To:
<assemblyIdentity name=”System.Web.Helpers” publicKeyToken=”31bf3856ad364e35″ />
<bindingRedirect oldVersion=”1.0.0.0-3.0.0.0” newVersion=”3.0.0.0” />

17)
Change:

<assemblyIdentity name=”System.Web.Mvc” publicKeyToken=”31bf3856ad364e35″ />
<bindingRedirect oldVersion=”1.0.0.0-4.0.0.0” newVersion=”4.0.0.0” />

To:
<assemblyIdentity name=”System.Web.Mvc” publicKeyToken=”31bf3856ad364e35″ />
<bindingRedirect oldVersion=”1.0.0.0-5.1.0.0” newVersion=”5.1.0.0” />

18)
Change:

<assemblyIdentity name=”System.Web.WebPages” publicKeyToken=”31bf3856ad364e35″ />
<bindingRedirect oldVersion=”1.0.0.0-2.0.0.0” newVersion=”2.0.0.0” />

To:
<assemblyIdentity name=”System.Web.WebPages” publicKeyToken=”31bf3856ad364e35″ />
<bindingRedirect oldVersion=”1.0.0.0-3.1.0.0” newVersion=”3.1.0.0” />

If you get an error on build that says something like “Could not load file or assembly ‘DotNetOpenAuth.Core, Version=4.0.0.0″

I simply clicked on show all files at the top of the solution explorer, deleted my bin folder, ran a build to populate the startup.dll in the bin again and then:

19)
shut down Visual Studio 2012 and restarted it.

20) Once Restarted, let’s do a final build and then hit Ctrl+F5. We should have a working Bootstrap website using MVC5, with an updated account registration & Login using ASP.NET IDentity and it should be pretty close to what a VS 2013 user would see upon generating a new MVC 5 Internet Application

If you would like to replace the bootstrap theme with Foundation 5 you can pick up where this tutorial leaves off with Remove Bootstrap and Add Foundation 5 to an MVC 5 Application. This would be the same as starting an MVC 5 Internet Application in Visual Studio 2013 and removing Bootstrap and adding Foundation 5.

Link to this article with our Easy URL:
ta.gd/MVC4to5

Share this with your friends:

TwitterFacebookGoogle+tumblrEmail

Leave a Reply

You must be logged in to post a comment.