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