Login using Facebook account in Asp.net MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial


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.


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>



What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon