Integrating Facebook Authentication for your website using WebMatrix 2 Beta

In the recently concluded WebCamps, Delhi, I was demonstrating Facebook Authentication implementation for your website using WebMatrix 2 Beta.  You can read about my earlier post on WebMatrix 2 Beta from here

Using the new WebMatrix 2 Beta, we can create a decent looking starter site with a few clicks as explained in my above post.  Once we have the site up and running, we would want to implement authentication.

Now, like ASP.NET 4, ASP.NET MVC 3 etc., WebMatrix comes with default Membership infrastructure.  For the sake of simplicity, lets create the site now.  Fire up WebMatrix and from the Start up screen, click on “Templates”

image

Select the “Starter Site” template and give it a name, say “Web 3” and click “Ok”

image

Navigate to the “Files” tab in the left bottom and when you expand the “Account” folder under the root in the top, you can get to see all the Membership related files, as below:-

image

Infact, if you run the default site as is, it would show up the home page with the “Login” link in the right top alongside “Register”.  The logic for registering an user, and thereafter verifying login credentials, change password etc., are all pre-coded in the Membership files showcased earlier and one has to just start using it.  By default, this uses the “StarterSite.sdf” (SQL Compact Edition) database that is created when you create the site using “Starter Site” template. 

Now, if you want to implement Facebook or Twitter authentication, the code for the same is pre-configured and just has to be enabled.

Lets see the steps first.  Open up the Login.cshtml page and when you scroll down to the bottom, you can see a “Login in using another service” setting commented.  Uncomment the section and then run the page.  You can now see the links for these in the Login Page.

image

The next step is to enable the OAuth code that is available in _AppStart.cshtml page in the root folder.  Open the page and uncomment the section that has “BuiltinOAuthClient.Facebook” as below:-

image

Now, we have some work to do in Facebook.  Facebook authentication requires us to create an application before it provides the consumerKey & consumerSecret values that is needed in the above code.  You would need a Facebook Developer Account. Register for one, if you don’t have already. 

Visit Facebook.com/developers and login with your facebook id.  Click on the “Apps” link in the top.  On the “Apps” page, click on the “Create New App” button in the right top.

image

On the dialog that opens up, provide a “App Display Name”.  You can skip the “App Namespace” and check to accept the “Facebook Platform Policies” and click “Continue”.  Verify the captcha screen that comes up next and then the configuration screen opens up.  It already has the values you provided for “App Name” and the email address associated with the account.

Click on the “Website” link which reads “I want to allow people to log in to my website using Facebook” .  In the box that shows up, we need to provide the ROOT url of our application.  The good part is, it works with localhost URLs too.  In my case, I have entered, as follows:-

image

Once you click on “Save Changes” the screen refreshes and shows up the “App Id” and “App Secret” key in the top.  We need these to put in the _AppStart.cshtml file in our site.

Now, switch to WebMatrix and open up the _AppStart.cshtml file.  In the section that we uncommented, provide the “AppId” in the consumerkey setting and “App Secret Key” in the consumerSecret setting.  Once this is done, run the site and click on the “Login” link in the top.

On the right side of the Login page where you see the “Facebook”, Twitter” etc., links, click on the “Facbeook” link".   Since you are already logged in to Facebook, it would take you through the verification page, as follows

image

Next would be the “Associate” screen where it takes to link the App with your Facebook credentials. 

image

Once the above step is done, you can see that the application logged me in using Facebook and it shows up the Hello message with my name

image

 That’s it, your website is now using Facebook authentication to validate users.

Facebook Connect has been there for a while but with the new WebMatrix 2 Beta, integrating Facebook Connect with your website is much much simplified as explained in this post.

Download WebMatrix 2 Beta from http://bit.ly/webvnext

Cheers !!!

Print | posted on Friday, October 7, 2011 12:43 PM

Comments on this post

# re: Integrating Facebook Authentication for your website using WebMatrix 2 Beta

Requesting Gravatar...
very useful info...we can also make a full fledged website using the starter site
Left by Abhishek Luv on Oct 07, 2011 2:27 PM

# re: Integrating Facebook Authentication for your website using WebMatrix 2 Beta

Requesting Gravatar...
I really appreciate your whole information and the suggestions that how this service we can use.Very helpful and interesting sharing it is.
Left by kitchen doors glasgow on Oct 10, 2011 2:40 PM

# re: Integrating Facebook Authentication for your website using WebMatrix 2 Beta

Requesting Gravatar...
the login to facebook is not working when i publish my website to server and i specify the server name in the fb apps settings with the domain !!

Exception Details: System.Net.WebException: The remote server returned an error: (400) Bad Request.


Source Error:

Line 46: }
Line 47: else {
Line 48: var result = OAuthWebSecurity.VerifyAuthentication();
Line 49: if (result.IsSuccessful) {
Line 50: // put the ExtraData into the App property bag


Source File: e:\web\user217\htdocs\Account\RegisterService.cshtml Line: 48



lei awlak??
Left by TKT on Nov 01, 2011 2:23 PM

# re: Integrating Facebook Authentication for your website using WebMatrix 2 Beta

Requesting Gravatar...
How can I get from Facebook the user email in addition to the user name?

thanks in advance
Left by kike on Apr 10, 2012 4:03 AM

Your comment:

 (will show your gravatar)