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”
Select the “Starter Site” template and give it a name, say “Web 3” and click “Ok”
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:-
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.
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:-
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.
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:-
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
Next would be the “Associate” screen where it takes to link the App with your Facebook credentials.
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
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 !!!