Facebook Login Integration in ASP.NET MVC

  1. Obtain App Id from Facebook site.
    http://developers.facebook.com/apps
  2. Create new ASP.NET MVC 4 Web Application project (with Internet Application template).

  3. Open the _LoginPartial.cshtml file under Views\Shared folder.
    b
  4. Comment out all code and insert the following:
    <div id="fb-root"></div>
    <script>
        // Load the SDK Asynchronously
        (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        }(document));
    
        // Init the SDK upon load
        window.fbAsyncInit = function() {
            FB.init({
                appId      : '<app_id>', // App ID
                channelUrl : '//' + window.location.hostname + '<port>/Home/Channel', // Path to your Channel File
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                xfbml      : true  // parse XFBML
            });
    
            // listen for and handle auth.statusChange events
            FB.Event.subscribe('auth.statusChange', function(response) {
                if (response.authResponse) {
                    // user has auth'd your app and is logged into Facebook
                    FB.api('/me', function(me){
                        if (me.name) {
                            document.getElementById('auth-displayname').innerHTML = me.name;
                        }
                    })
                    document.getElementById('auth-loggedout').style.display = 'none';
                    document.getElementById('auth-loggedin').style.display = 'block';
                } else {
                    // user has not auth'd your app, or is not logged into Facebook
                    document.getElementById('auth-loggedout').style.display = 'block';
                    document.getElementById('auth-loggedin').style.display = 'none';
                }
            });
    
            // respond to clicks on the login and logout links
            document.getElementById('auth-loginlink').addEventListener('click', function(){
                FB.login();
            });
            document.getElementById('auth-logoutlink').addEventListener('click', function(){
                FB.logout();
            });
        }
    </script>
    
    <div id="auth-status">
        <div id="auth-loggedout">
            <a href="#" id="auth-loginlink">Login</a>
        </div>
        <div id="auth-loggedin" style="display:none">
            Hi, <span id="auth-displayname"></span>
            (<a href="#" id="auth-logoutlink">logout</a>)
        </div>
    </div>
    
  5. Replace <app_id> in above code with your own app id.
  6. Replace <port> in above code with your application’s port.
    You can get application’s port under Project’s properties window. In the screenshot, it’s 6270.

  7. Create new Action in Home controller, name it Channel.
  8. Add the view for Channel action with no layout or master page (uncheck “Use a layout or master page”).
  9. Edit Channel.cshtml to look as following.
    <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
    

  10. On Facebook Developer App Settings, set the app to interact with Website. Then set the site’s URL to your application full URL.
  11. Compile and run your ASP.NET MVC application.
  12. Login button on the top right corner should take your users to Facebook login page.
Resource and more readings:
Advertisements

7 thoughts on “Facebook Login Integration in ASP.NET MVC”

  1. Today, I went to the beach front with my children.

    I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to
    her ear and screamed. There was a hermit crab inside and it pinched
    her ear. She never wants to go back! LoL I know this is entirely off topic but I
    had to tell someone!

  2. Wow, this article is pleasant, my younger sister is analyzing these
    things, therefore I am going to inform her.

  3. Wow, thank you so much, this was so helpful and easy to follow, I really helped me out a year after it was published

    Nice work

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s