In this article I will explain with an example, how to integrate and implement Facebook Authentication in ASP.Net MVC Razor i.e. Login with Facebook account in ASP.Net MVC Razor.
The Facebook Authentication in ASP.Net MVC Razor will be implemented using the Free ASPSnippets Facebook API.
Note: You can download the latest ASPSnippets.FaceBookAPI.dll clicking the download link below.
          Download DLL file
 
 
Create Facebook Application and get App Id
You will need to create an application and get an API Key and API Secret.
 
 
Namespaces
You will need to import the following namespaces.
using ASPSnippets.FaceBookAPI;
using System.Web.Script.Serialization;
 
 
Model
The following is the Model class which will be used to populate the details of the Facebook user.
public class FaceBookUser
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string PictureUrl { get; set; }
    public string Email { get; set; }
}
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, the API Key and Secret is set for the ASPSnippets Facebook API. Then a check is made to detect error from Facebook API which occurs when the Facebook user denies access permission to the Facebook App. If the error is found then a message is set into the ViewBag object which is later displayed using JavaScript Alert Message Box.
And if no error found then the CODE received from the Facebook API is used for generating the Access Token and then using the Access Token to fetch the details of the User.
The fetched details are finally returned to the View.
 
Action method for handling POST operation for Authentication using Facebook Account
This Action method gets called when the Login Button is clicked. The user is redirected to Facebook website where he is asked to grant the permission to access his details.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        FaceBookConnect.API_Key = "<Your API Key>";
        FaceBookConnect.API_Secret = "<Your API Secret>";
 
        FaceBookUser faceBookUser = new FaceBookUser();
        if (Request.QueryString["error"] == "access_denied")
        {
            ViewBag.Message = "User has denied access.";
        }
        else
        {
            string code = Request.QueryString["code"];
            if (!string.IsNullOrEmpty(code))
            {
                string data = FaceBookConnect.Fetch(code, "me?fields=id,name,email");
                faceBookUser = new JavaScriptSerializer().Deserialize<FaceBookUser>(data);
                faceBookUser.PictureUrl = string.Format("https://graph.facebook.com/{0}/picture", faceBookUser.Id);
            }
        }
 
        return View(faceBookUser);
    }
 
    [HttpPost]
    public EmptyResult Login()
    {
        FaceBookConnect.Authorize("user_photos,email", string.Format("{0}://{1}/{2}", Request.Url.Scheme, Request.Url.Authority, "Home/Index/"));
        return new EmptyResult();
    }
}
 
 
View
Inside the View, in the very first line the FaceBookUser class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The View consists of an HTML Submit Button which when clicked will POST the data to the Login Action method.
There is an HTML Table which is used for displaying the details of the logged in Facebook User.
@model FaceBook_Login_MVC.Models.FaceBookUser
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Login", "Home", FormMethod.Post))
    {
        <input type="submit" value="Login with FaceBook"/>
        if (!string.IsNullOrEmpty(Model.Id))
        {
            <hr/>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td rowspan="5" valign="top">
                        <img src="@Model.PictureUrl" style="height:50px;width:50px"/>
                    </td>
                </tr>
                <tr>
                    <td>ID: @Model.Id</td>
                </tr>
                <tr>
                    <td>Name: @Model.Name</td>
                </tr>
                <tr>
                    <td>Email: @Model.Email</td>
                </tr>
            </table>
        }
    }
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                alert('@ViewBag.Message');
            }
        </script>
    }
</body>
</html>
 
 
Screenshots
Facebook App Permission page
Facebook Authentication MVC: Login with Facebook account in ASP.Net MVC
 
Message displayed when User denies permission
Facebook Authentication MVC: Login with Facebook account in ASP.Net MVC
 
Successful Facebook Login
Facebook Authentication MVC: Login with Facebook account in ASP.Net MVC
 
 
Downloads