MVC3 + EF CodeFirst +
Facebook Authentication (Oauth) Part 1

Lets mix
all together in one project

First step
create new MVC3 project

Create new MVC3 project

Next step -
selecting project type , creating test project (if you needed)

Download packages

I prefer
new Razor View Engine with HTML5 semantic markup.

For next
step I will use Nuget to install some
package to project

List of
package

1) http://nuget.org/List/Packages/EntityFramework/4.1.10715.0

2) http://nuget.org/List/Packages/jQuery/1.6.3

3) http://nuget.org/List/Packages/Facebook/5.2.1.0

4) http://nuget.org/List/Packages/FacebookWeb/5.2.1.0

5) http://nuget.org/List/Packages/FacebookWebMvc/5.2.1.0

 

Installing codefirstmembership

Now we need to install codefirstmembership

Go to http://codefirstmembership.codeplex.com/releases/61794/download/212575
and download latest version.

Copy
this source code (Code and Data directories) to your MVC3 application

Delete
default connection string from Web.Config

Replace
Web.Config values for default Membership, Profile and Role with this:

<membership defaultProvider=”CodeFirstMembershipProvider”>

<providers>

<clear />

<add name=”CodeFirstMembershipProvider” type=”CodeFirstMembershipDemo.CodeFirstMembershipProvider” connectionStringName=”CodeFirstContext” applicationName=”/” />

</providers>

</membership>

 

<profile enabled=”false”>

<providers>

<clear />

</providers>

</profile>

 

<roleManager enabled=”true” defaultProvider=”CodeFirstRoleProvider”>

<providers>

<clear />

<add name=”CodeFirstRoleProvider” type=”CodeFirstMembershipDemo.CodeFirstRoleProvider” connectionStringName=”CodeFirstContext” applicationName=”/” />

<add applicationName=”/” name=”AspNetWindowsTokenRoleProvider” type=”System.Web.Security.WindowsTokenRoleProvider” />

</providers>

</roleManager>

Add this to your Global.asax page in the Application_Start

protected
void Application_Start()

{

 

 

Database.DefaultConnectionFactory
= new SqlCeConnectionFactory(“System.Data.SqlServerCe.4.0″);

Database.SetInitializer(new CodeFirstContextInit());

//’Used to
preinitialize database, remove on production

var
Context = new CodeFirstContext();

Context.Users.FirstOrDefault();

}

Open AccountController
and replace LogOn and LogOff methods with this:

[HttpPost()]

public ActionResult LogOn(LogOnModel model, string returnUrl)

{

if
(ModelState.IsValid)

{

if
(CodeFirstSecurity.Login(model.UserName, model.Password, model.RememberMe))

{

if
(!string.IsNullOrEmpty(returnUrl) &&
Url.IsLocalUrl(returnUrl))

{

return Redirect(returnUrl);

}

else

{

return RedirectToAction(“Index”,
“Home”);

}

}

else

{

ModelState.AddModelError(“”, “The
user name or password provided is incorrect.”);

}

}

// If we
got this far, something failed, redisplay form

return
View(model);

}

public ActionResult LogOff()

{

CodeFirstSecurity.Logout();

return
RedirectToAction(“Index”, “Home”);

}

Try logging in with: Username: “Demo“
Password: “Demo” or with Email: “demo@demo.com“
(password is case-sensitive)

Some additional fix

1)
Replace
CodeFirstMembershipDemoSharp with solution name

2)
Remove
using System.Data.Entity.Database; from CodeFirstContextInit.cs

3)
Add using
System.Data.Entity;

Facebook

Now we move to Facebook

1.
Create
your application on Facebook. You can do so here: http://www.facebook.com/developers/createapp.php

2.
We
have to set a few settings on our newly created Facebook Application. First,
lets set the Site Url in the Web Site tab. Set the site url to http://localhost:3434/.
After you have entered the information click save changes.

3.
After
you save the changes you will be take to the app info page. Leave this open as
we will need some of the settings later.

4.
We
also need to set our application so that it runs on the same port every time.
So lets set our app to run on port 3434 (same as we already configured in the
Facebook Application settings). I am using IIS Express with Visual Studio 2010
SP1. I would highly recommend using IIS Express yourself rather than Visual
Studio Development server because there are some issues and difficulties. See
below how to set the port in IIS Express.

5.
We
now need to edit a few of our web config settings. So open your web.config file
and find the section called facebookSettings. It will most likely be at the
very bottom of you config file.

<facebookSettings appId=”{app id}” appSecret=”{app secret}” />

6.
From
the Facebook Application info page you had open on step 3 find your App ID and
App Secret. Set these settings in your web.config file as shown.

<facebookSettings appId=”134035780002122″ appSecret=”a7adde41a7fd6228b656db70e0ba9d7c” />

To be continue (Extending Code first user, Autorisation Action etc)