Login using Facebook account in Asp.net MVC | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF 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>



Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget