Login using Facebook account in Asp.net MVC

In this article I am going to explain how to integrate Facebook login in Asp.net MVC website.

In previous article I have explained how to create Facebookapp for website, how to insert multiple tables data into one table in sqlserver and how to add Facebook like, share and comment box in asp.net website.

Description:

I want to add Facebook login to MVC website. I am using Facebook JavaScript SDK. To use Facebook JavaScript you need an Application (App) ID. To create and get App id check this article: How to Create Facebook app forwebsite.

 Implementation:

Create new MVC project.

Add controller

I have add an empty controller to project. I have create new action FBlogin.

LoginController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace MVC_Project.Controllers

{

    public class LoginController : Controller

    {

        //

        // GET: /Login/

     

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult FBLogin()

        {

            return View();

        }      

      

    }

}

Add View

Now add view for FBlogin method.

Complete source of FBLogin.cshtml

@{

    ViewBag.Title = "Facebook Login";

}

<h2>Facebook Login</h2>

<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: 'FB_App_Id', //Replace with App ID

            channelUrl: '//' + window.location.hostname + '/channel', 

            status: true, // check login status

            cookie: true, // enable cookies to allow the server to access the session

            xfbml: true  // parse XFBML

        });

        FB.Event.subscribe('auth.statusChange', function (response) {

            if (response.authResponse) {

                // user has auth'd your app and is logged into Facebook

                var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture";

                var newid = response.authResponse.userID;

                FB.api('/me', { fields: 'name,email,first_name,last_name,gender,location ' }, function (me) {

                    document.getElementById('auth-displayname').innerHTML = me.name;

                    document.getElementById('email').innerHTML = me.email;

                    document.getElementById('profileImg').src = uid;

                    document.getElementById('Gender').innerHTML = me.gender;

                    document.getElementById('firstname').innerHTML = me.first_name;

                    document.getElementById('lastname').innerHTML = me.last_name;

                    document.getElementById('Location').innerHTML = me.location;

                })

                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';

            }

        });

        $("#auth-logoutlink").click(function () { FB.logout(function () { window.location.reload(); }); });

    }

</script>

<table align="center">

    <tr>

        <td>

            <div id="auth-status">

                <div class="fb-login-button" autologoutlink="true" scope="email,public_profile">Login with Facebook</div>

            </div>

            <div id="auth-loggedin" style="display: none">

                First Name: <span id="firstname"></span> <br />

                Last Name: <span id="lastname"></span> <br />

                                Username:<span id="auth-displayname"></span><br />

                                Email:<span id="email"></span><br />

                                Gender: <span id="Gender"></span><br />

                                Location: <span id="Location"></span><br />

                                Profile Image: <img id="profileImg" /><br />

            </div>

            <div id="auth-loggedout">

            </div>

        </td>

    </tr>

</table>