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 ASPSnippets Facebook API library.
Create Facebook Application and get App Id
You will need to create an application and get an API Key and API Secret.
Download ASPSnippets FaceBook API Library
You can download the latest ASPSnippets.FaceBookAPI.dll from the following link.
Note: You will need to add the reference of ASPSnippets.FaceBookAPI DLL in your project.
Model
Following model class will be used to hold the user profile details returned from FaceBook after authentication.
public class FaceBookUser
{
public string Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public FaceBookUserPicture Picture { get; set; }
public bool IsDisable { get; set; }
}
public class FaceBookUserPicture
{
public Data Data { get; set; }
}
public class Data
{
public string Url { get; set; }
}
Namespaces
You will need to import the following namespaces.
using ASPSnippets.FaceBookAPI;
using System.Web.Script.Serialization;
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, the FaceBookConnect class API_Key, API_Secret and Version properties are set.
Then, a check is performed whether any error or not. If the error is found then, a message is set into the
ViewBag object which is later displayed using JavaScript Alert Message Box.
If there is no error, the access code (access token) is retrieved from the Query String and based on the access code, user’s FaceBook profile details are fetched like FaceBook Id, Name, Email and Profile picture and set in the model class.
Finally, the View is returned.
Action method for handling POST operation for Authentication using Facebook Account
This Action method gets called when the Login Button is clicked.
Inside this Action method, page will be redirected to FaceBook for inputting user details for authentication using the Authorize method of FaceBookConnect class.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
FaceBookConnect.API_Key = "<Your API Key>";
FaceBookConnect.API_Secret = "<Your API Secret>";
FaceBookConnect.Version = "v19.0";
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", "id,name,email,picture");
faceBookUser = new JavaScriptSerializer().Deserialize<FaceBookUser>(data);
faceBookUser.IsDisable = true;
}
}
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 model class is declared as Model for the View.
The Form
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 Login.
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 Form consists of a Submit Button and an HTML Table which is used for displaying the details of the logged in Facebook User.
When the Submit Button is clicked, the Form gets submitted to the Login Action method.
Finally, the
ViewBag object is checked for NULL and if it is not NULL then, the value of the object is displayed using JavaScript Alert Message Box.
@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" disabled="@(Model.IsDisable)"/>
if (!string.IsNullOrEmpty(Model.Id))
{
<hr/>
<table>
<tr>
<td rowspan="5" valign="top">
<img src="@Model.Picture.Data.Url" style="height:70px; width:70px"/>
</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>
Screenshot
![Facebook Authentication MVC: Login with Facebook account in ASP.Net MVC]()
Demo
Downloads
