Click here to Skip to main content
Click here to Skip to main content

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

, 11 Apr 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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:

@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:

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)

Share

About the Author

Sem.Shekhovtsov
Software Developer (Senior)
France France
No Biography provided

Comments and Discussions

 
Questionfix PinmemberIgor Jas31-Mar-13 0:36 
GeneralMy vote of 5 PinmemberHeaven202017-Mar-13 23:56 
QuestionIs this work with localhost ??? PinmemberRavinder Singh Bhawer15-Mar-13 0:40 
AnswerRe: Is this work with localhost ??? PinmemberIgor Jas31-Mar-13 0:40 
GeneralMy vote of 1 PinmemberDavidOwen4-Jan-13 0:00 
GeneralMy vote of 5 Pingroupsakola8-Nov-12 21:32 
QuestionWhat is URL REDIRECTION PinmemberMember 917112831-Jul-12 19:52 
GeneralMy vote of 5 PinmemberNaveenNeo16-Jul-12 1:01 
QuestionFacebook dialog just quickly pops up and closes Pinmemberrory thompson17-May-12 6:53 
QuestionNot getting the logged in user's info PinmemberLockedOut16-May-12 2:39 
AnswerRe: Not getting the logged in user's info PinmemberGKG417-Sep-12 18:58 
GeneralRe: Not getting the logged in user's info PinmemberIgor Jas31-Mar-13 0:42 
QuestionFacebookId threws exception PinmemberMember 803473410-Apr-12 23:38 
AnswerRe: FacebookId threws exception PinmemberSemyuel87***11-Apr-12 7:16 
Questionit was very helpful :) PinmemberIndesign-c36018-Feb-12 14:10 
QuestionFacebook updated to O.Auth 2.0 PinmemberkaneXtreme8-Feb-12 5:28 
GeneralThanks !! Pinmemberaditya.murthy881-Nov-11 20:54 
Questioncannot download the source code PinmemberNicholas Naddaf28-Oct-11 10:31 
QuestionRe: cannot download the source code Pinmembersalsafreakpr29-Dec-11 20:23 
QuestionCan't see Facebook Login button Pinmemberpohjoon4-Sep-11 10:16 
AnswerRe: Can't see Facebook Login button [modified] PinmemberSemyuel87***5-Sep-11 0:15 
GeneralRe: Can't see Facebook Login button Pinmemberpohjoon6-Sep-11 6:14 
GeneralRe: Can't see Facebook Login button PinmemberSemyuel87***6-Sep-11 6:26 
GeneralRe: Can't see Facebook Login button Pinmemberpohjoon7-Sep-11 6:17 
Questionsummarized and informative Pinmemberjahmani8-Jun-11 5:52 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 11 Apr 2012
Article Copyright 2011 by Sem.Shekhovtsov
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid