In this article I will explain with an example, how to login with FaceBook account in ASP.Net Website using C# and VB.Net.
The user will be authenticated using FaceBook account and get FaceBook profile details like UserId, Name, Email and Profile picture in ASP.Net using the ASPSnippets FaceBook API.
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
You can download the latest ASPSnippets FaceBook API from the following link..
Note: You will need to add the reference of ASPSnippets FaceBook API DLL in your project.
HTML Markup
Following HTML Markup consists of:
Button – For authenticate the user through FaceBook.
The Button has been assigned with an OnClick event handler.
Image – For displaying Profile picture.
Label – For displaying FaceBook Id, Name and Email.
<asp:Button ID="btnLogin" runat="server" Text="Login with FaceBook" OnClick="Login" />
<asp:Panel ID="pnlFaceBookUser" runat="server" Visible="false">
<hr/>
<table>
<tr>
<td rowspan="5" valign="top">
<asp:Image ID="ProfileImage" runat="server" Width="70" Height="70" />
</td>
</tr>
<tr>
<td>ID:<asp:Label ID="lblId" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>Name:<asp:Label ID="lblName" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>Email:<asp:Label ID="lblEmail" runat="server" Text=""></asp:Label></td>
</tr>
</table>
</asp:Panel>
Namespaces
You will need to import the following namespaces.
C#
using ASPSnippets.FaceBookAPI;
using System.Web.Script.Serialization;
VB.Net
Imports ASPSnippets.FaceBookAPI
Imports System.Web.Script.Serialization
Property Classes
Following class will be used to hold the user profile details returned from FaceBook after authentication.
C#
public class FaceBookUser
{
public string Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public FaceBookUserPicture Picture { get; set; }
}
public class FaceBookUserPicture
{
public Data Data{ get; set; }
}
public class Data
{
public string Url { get; set; }
}
VB.Net
Public Class FaceBookUser
Public Property Id As String
Public Property Name As String
Public Property Email As String
Public Property Picture As FaceBookUserPicture
End Class
Public Class FaceBookUserPicture
Public Property Data As Data
End Class
Public Class Data
Public Property Url As String
End Class
Authenticating user using FaceBook account
When the Login button is clicked, page will be redirected to FaceBook for inputting user details for authentication using the Authorize method of FaceBookConnect class.
C#
protected void Login(object sender, EventArgs e)
{
FaceBookConnect.Authorize("user_photos,email", Request.Url.AbsoluteUri.Split('?')[0]);
}
VB.Net
Protected Sub Login(sender As Object, e As EventArgs)
FaceBookConnect.Authorize("user_photos,email", Request.Url.AbsoluteUri.Split("?"c)(0))
End Sub
Fetching the user’s FaceBook Profile details
Inside the Page_Load event handler, the FaceBookConnect class API_Key, API_Secret and Version properties are set.
Then, inside the not IsPostBack condition, a check is performed whether any error or not.
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 respective controls.
Finally, the Login button is disabled.
C#
protected void Page_Load(object sender, EventArgs e)
{
FaceBookConnect.API_Key = "<Your API Key>";
FaceBookConnect.API_Secret = "<Your API Secret>";
FaceBookConnect.Version = "v19.0";
if (!this.IsPostBack)
{
if (Request.QueryString["error"] == "access_denied")
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('User has denied access.')", true);
return;
}
string code = Request.QueryString["code"];
if (!string.IsNullOrEmpty(code))
{
string data = FaceBookConnect.Fetch(code, "me", "id,name,email,picture");
FaceBookUser faceBookUser = new JavaScriptSerializer().Deserialize<FaceBookUser>(data);
pnlFaceBookUser.Visible = true;
lblId.Text = faceBookUser.Id;
lblName.Text = faceBookUser.Name;
lblEmail.Text = faceBookUser.Email;
ProfileImage.ImageUrl = faceBookUser.Picture.Data.Url;
btnLogin.Enabled = false;
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
FaceBookConnect.API_Key = "<Your API Key>"
FaceBookConnect.API_Secret = "<Your API Secret>"
FaceBookConnect.Version = "v19.0"
If Not Me.IsPostBack Then
If Request.QueryString("error") = "access_denied" Then
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('User has denied access.')", True)
Return
End If
Dim code As String = Request.QueryString("code")
If Not String.IsNullOrEmpty(code) Then
Dim data As String = FaceBookConnect.Fetch(code, "me", "id,name,email,picture")
Dim faceBookUser As FaceBookUser = New JavaScriptSerializer().Deserialize(Of FaceBookUser)(data)
pnlFaceBookUser.Visible = True
lblId.Text = faceBookUser.Id
lblName.Text = faceBookUser.Name
lblEmail.Text = faceBookUser.Email
ProfileImage.ImageUrl = faceBookUser.Picture.Data.Url
btnLogin.Enabled = False
End If
End If
End Sub
Screenshot
![Login with FaceBook account in ASP.Net Website]()
Demo
Downloads
