Click here to Skip to main content
15,867,330 members
Articles / Web Development / ASP.NET

Simple .NET MVC 3 web application with integrated Facebook OAuth API

Rate me:
Please Sign up or sign in to vote.
4.58/5 (18 votes)
11 Apr 2012CPOL1 min read 106.8K   98   26
Integration of Facebook OAuth API with ASP.NET MVC 3 web site.

Introduction

Before creating a .NET MVC application, we have to register the domain name that will be used for the web site at the Facebook development site: http://developers.facebook.com/setup/. After successful registration, we will have a Facebook APIKey and Facebook Secret.

Now let's create a simple ASP.NET MVC application in VS:

net_mvc_facebook_oauth/1_1.png

I will use the Facebook API button in this sample to show an alternative log in option to the user. Let's change the _LogOnPartial.cshtml file in such a way:

HTML
@if(Request.IsAuthenticated) {
    <text>Welcome <strong>@User.Identity.Name</strong>!
    [ @Html.ActionLink("Log Off", "LogOff", "Account") ]</text>
}
else {
    <fb:login-button perms="email,user_checkins" onlogin="afterFacebookConnect();" 
       autologoutlink="false" ></fb:login-button>
    <div id="fb-root" style="display:inline; margin-left:20px;"></div>
    @:[ @Html.ActionLink("Log On", "LogOn", "Account") ]
}
<script language="javascript" type="text/javascript">
    window.fbAsyncInit = function () {
        FB.init({ appId: ' -- YOUR REAL APPLICATION ID SHOUD BE HERE --', 
                  status: true, cookie: false, xfbml: true });
    };
    function afterFacebookConnect() {
        FB.getLoginStatus(function (response) {
            if (response.session) {
                window.location = "../Account/FacebookLogin?token=" + 
                       response.session.access_token;
            } else {
                // user clicked Cancel
            }
        });
    };
    $(document).ready(function () {
        if (document.getElementById('fb-root') != undefined) {
            var e = document.createElement('script');
            e.type = 'text/javascript';
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        }
    });
</script>

The following elements were added to the control:

  • Facebook login button (fb:login-button).
  • Container which will contain all Facebook scripts (div id="fb-root").
  • FB initialization script (FB.fbAsyncInit). You have to replace the sample appId value with the real one received when registering your app on the Facebook development site.
  • afterFacebookConnect - script which will be called after the user closes the Facebook login dialog window (after successful or failed login).
  • Script for loading Facebook JavaScript libraries (e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';).

After successful login, we will have the access_token value, and now we can load detailed user's info, store this info (if we need to), and authenticate the user. To do this, we will redirect the user to the Account.FacebookLogin action and pass the access_token value as a parameter to this action. So at this stage, we will implement the "FacebookLogin" action. The created action will look like this:

C#
using System.Web.Mvc;
using System.Web.Security;
using MVCOAuth.Models;
using System.Net;
using Newtonsoft.Json.Linq;
using System;

namespace MVCOAuth.Controllers
{
    public class AccountController : Controller
    {
        [HttpGet]
        public ActionResult FacebookLogin(string token)
        {
            WebClient client = new WebClient();
            string JsonResult = client.DownloadString(string.Concat(
                   "https://graph.facebook.com/me?access_token=", token));
            // Json.Net is really helpful if you have to deal
            // with Json from .Net http://json.codeplex.com/
            JObject jsonUserInfo = JObject.Parse(JsonResult);
            // you can get more user's info here. Please refer to:
            //     http://developers.facebook.com/docs/reference/api/user/
            string username = jsonUserInfo.Value<string>("username");
            string email = jsonUserInfo.Value<string>("email");
            string locale = jsonUserInfo.Value<string>("locale");
            string facebook_userID = jsonUserInfo.Value<string>("id");

            // store user's information here...
            FormsAuthentication.SetAuthCookie(username, true);
            return RedirectToAction("Index", "Home");
        }

And that's it! We have integrated alternative Facebook authentication on the MVC site. Before login:

net_mvc_facebook_oauth/R_1.png

After successful Facebook authentication:

net_mvc_facebook_oauth/R_2.png

Hope this will be helpful for someone! 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Comments and Discussions

 
Questionfix Pin
Igor Jas31-Mar-13 0:36
Igor Jas31-Mar-13 0:36 
GeneralMy vote of 5 Pin
Global Analyser17-Mar-13 23:56
Global Analyser17-Mar-13 23:56 
QuestionIs this work with localhost ??? Pin
Ravinder Singh Bhawer15-Mar-13 0:40
Ravinder Singh Bhawer15-Mar-13 0:40 
AnswerRe: Is this work with localhost ??? Pin
Igor Jas31-Mar-13 0:40
Igor Jas31-Mar-13 0:40 
GeneralMy vote of 1 Pin
DavidOwen4-Jan-13 0:00
DavidOwen4-Jan-13 0:00 
GeneralMy vote of 5 Pin
sakola8-Nov-12 21:32
sakola8-Nov-12 21:32 
QuestionWhat is URL REDIRECTION Pin
Member 917112831-Jul-12 19:52
Member 917112831-Jul-12 19:52 
GeneralMy vote of 5 Pin
NaveenNeo16-Jul-12 1:01
NaveenNeo16-Jul-12 1:01 
QuestionFacebook dialog just quickly pops up and closes Pin
rory thompson17-May-12 6:53
rory thompson17-May-12 6:53 
QuestionNot getting the logged in user's info Pin
LockedOut16-May-12 2:39
LockedOut16-May-12 2:39 
Hi, i tried the code and all works fine....it even asks for authonication using pop-up window.
But its not getting refreshed i think...as it doesn't show Welcome "Username" at all and not even LogOff button.

What to do ?
AnswerRe: Not getting the logged in user's info Pin
GKG417-Sep-12 18:58
GKG417-Sep-12 18:58 
GeneralRe: Not getting the logged in user's info Pin
Igor Jas31-Mar-13 0:42
Igor Jas31-Mar-13 0:42 
QuestionFacebookId threws exception Pin
Member 803473410-Apr-12 23:38
Member 803473410-Apr-12 23:38 
AnswerRe: FacebookId threws exception Pin
Sem.Shekhovtsov11-Apr-12 7:16
professionalSem.Shekhovtsov11-Apr-12 7:16 
Questionit was very helpful :) Pin
Indesign-c36018-Feb-12 14:10
Indesign-c36018-Feb-12 14:10 
QuestionFacebook updated to O.Auth 2.0 Pin
kaneXtreme8-Feb-12 5:28
kaneXtreme8-Feb-12 5:28 
GeneralThanks !! Pin
aditya.murthy881-Nov-11 20:54
aditya.murthy881-Nov-11 20:54 
Questioncannot download the source code PinPopular
Nicholas Naddaf28-Oct-11 10:31
Nicholas Naddaf28-Oct-11 10:31 
QuestionRe: cannot download the source code Pin
salsafreakpr29-Dec-11 20:23
salsafreakpr29-Dec-11 20:23 
QuestionCan't see Facebook Login button Pin
pohjoon4-Sep-11 10:16
pohjoon4-Sep-11 10:16 
AnswerRe: Can't see Facebook Login button [modified] Pin
Sem.Shekhovtsov5-Sep-11 0:15
professionalSem.Shekhovtsov5-Sep-11 0:15 
GeneralRe: Can't see Facebook Login button Pin
pohjoon6-Sep-11 6:14
pohjoon6-Sep-11 6:14 
GeneralRe: Can't see Facebook Login button Pin
Sem.Shekhovtsov6-Sep-11 6:26
professionalSem.Shekhovtsov6-Sep-11 6:26 
GeneralRe: Can't see Facebook Login button Pin
pohjoon7-Sep-11 6:17
pohjoon7-Sep-11 6:17 
Questionsummarized and informative Pin
jahmani8-Jun-11 5:52
jahmani8-Jun-11 5:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.