Click here to Skip to main content
15,127,003 members
Articles / Web Development / ASP.NET
Posted 5 Jun 2011


98 bookmarked

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
Integration of Facebook OAuth API with ASP.NET MVC 3 web site.


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: After successful registration, we will have a Facebook APIKey and Facebook Secret.

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


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:

@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=" + 
            } 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 + '//';
            e.async = true;

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 + '//';).

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:

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
        public ActionResult FacebookLogin(string token)
            WebClient client = new WebClient();
            string JsonResult = client.DownloadString(string.Concat(
                   "", token));
            // Json.Net is really helpful if you have to deal
            // with Json from .Net
            JObject jsonUserInfo = JObject.Parse(JsonResult);
            // you can get more user's info here. Please refer to:
            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:


After successful Facebook authentication:


Hope this will be helpful for someone! 


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


About the Author

Comments and Discussions

Questionfix Pin
Igor Jas31-Mar-13 1:36
MemberIgor Jas31-Mar-13 1:36 
GeneralMy vote of 5 Pin
Global Analyser18-Mar-13 0:56
MemberGlobal Analyser18-Mar-13 0:56 
QuestionIs this work with localhost ??? Pin
Ravinder Singh Bhawer15-Mar-13 1:40
MemberRavinder Singh Bhawer15-Mar-13 1:40 
Is this work with localhost Or is it mandatory to upload on server ??

Thanks in advance
AnswerRe: Is this work with localhost ??? Pin
Igor Jas31-Mar-13 1:40
MemberIgor Jas31-Mar-13 1:40 
GeneralMy vote of 1 Pin
DavidOwen4-Jan-13 1:00
MemberDavidOwen4-Jan-13 1:00 
GeneralMy vote of 5 Pin
sakola8-Nov-12 22:32
Membersakola8-Nov-12 22:32 
QuestionWhat is URL REDIRECTION Pin
Member 917112831-Jul-12 20:52
MemberMember 917112831-Jul-12 20:52 
GeneralMy vote of 5 Pin
NaveenNeo16-Jul-12 2:01
MemberNaveenNeo16-Jul-12 2:01 
QuestionFacebook dialog just quickly pops up and closes Pin
rory thompson17-May-12 7:53
Memberrory thompson17-May-12 7:53 
QuestionNot getting the logged in user's info Pin
LockedOut16-May-12 3:39
MemberLockedOut16-May-12 3:39 
AnswerRe: Not getting the logged in user's info Pin
GKG417-Sep-12 19:58
MemberGKG417-Sep-12 19:58 
GeneralRe: Not getting the logged in user's info Pin
Igor Jas31-Mar-13 1:42
MemberIgor Jas31-Mar-13 1:42 
QuestionFacebookId threws exception Pin
Member 803473411-Apr-12 0:38
MemberMember 803473411-Apr-12 0:38 
AnswerRe: FacebookId threws exception Pin
Sem.Shekhovtsov11-Apr-12 8:16
professionalSem.Shekhovtsov11-Apr-12 8:16 
Questionit was very helpful :) Pin
Indesign-c36018-Feb-12 15:10
MemberIndesign-c36018-Feb-12 15:10 
QuestionFacebook updated to O.Auth 2.0 Pin
kaneXtreme8-Feb-12 6:28
MemberkaneXtreme8-Feb-12 6:28 
GeneralThanks !! Pin
aditya.murthy881-Nov-11 21:54
Memberaditya.murthy881-Nov-11 21:54 
Questioncannot download the source code PinPopular
Nicholas Naddaf28-Oct-11 11:31
MemberNicholas Naddaf28-Oct-11 11:31 
QuestionRe: cannot download the source code Pin
salsafreakpr29-Dec-11 21:23
Membersalsafreakpr29-Dec-11 21:23 
QuestionCan't see Facebook Login button Pin
pohjoon4-Sep-11 11:16
Memberpohjoon4-Sep-11 11:16 
AnswerRe: Can't see Facebook Login button [modified] Pin
Sem.Shekhovtsov5-Sep-11 1:15
professionalSem.Shekhovtsov5-Sep-11 1:15 
GeneralRe: Can't see Facebook Login button Pin
pohjoon6-Sep-11 7:14
Memberpohjoon6-Sep-11 7:14 
GeneralRe: Can't see Facebook Login button Pin
Sem.Shekhovtsov6-Sep-11 7:26
professionalSem.Shekhovtsov6-Sep-11 7:26 
GeneralRe: Can't see Facebook Login button Pin
pohjoon7-Sep-11 7:17
Memberpohjoon7-Sep-11 7:17 
Questionsummarized and informative Pin
jahmani8-Jun-11 6:52
Memberjahmani8-Jun-11 6: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.