In this article I will explain how to authenticate user using its FaceBook account and get its FaceBook Profile details like UserId, Username, Name, Email and Profile picture in ASP.Net using the Free ASPSnippets FaceBook API.
Note: You can download the latest ASPSnippets.FaceBookAPI.dll clicking the download link below.
Create FaceBook Application and get App Id
You will need to create an application and get an API Key and API Secret
HTML Markup
In the below HTML Markup I have placed an ASP.Net Button btnLogin to authenticate the user through FaceBook and get its profile details like FaceBook UserId, Username, Name, Email and Profile picture.
<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="50" Height="50" />
</td>
</tr>
<tr>
<td>ID:<asp:Label ID="lblId" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>UserName:<asp:Label ID="lblUserName" 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
Data Class
You will need to create the following class which 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 UserName { get; set; }
public string PictureUrl { get; set; }
public string Email { get; set; }
}
VB.Net
Public Class FaceBookUser
Public Property Id() As String
Get
Return m_Id
End Get
Set(value As String)
m_Id = value
End Set
End Property
Private m_Id As String
Public Property Name() As String
Get
Return m_Name
End Get
Set(value As String)
m_Name = value
End Set
End Property
Private m_Name As String
Public Property UserName() As String
Get
Return m_UserName
End Get
Set(value As String)
m_UserName = value
End Set
End Property
Private m_UserName As String
Public Property PictureUrl() As String
Get
Return m_PictureUrl
End Get
Set(value As String)
m_PictureUrl = value
End Set
End Property
Private m_PictureUrl As String
Public Property Email() As String
Get
Return m_Email
End Get
Set(value As String)
m_Email = value
End Set
End Property
Private m_Email As String
End Class
Authenticate user using FaceBook account
On the click of the ASP.Net Button btnLogin we redirect the User to FaceBook and ask him to authenticate himself as wells as provide permission to access to his FaceBook profile details like FaceBook UserId, Username, Name, Email and Profile picture
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
![]()
Fetch the user’s FaceBook Profile details
The below code checks for access code (access token) in Query string and then based on the access code it fetches the user’s FaceBook profile details like FaceBook UserId, Username, Name, Email and Profile picture
C#
protected void Page_Load(object sender, EventArgs e)
{
FaceBookConnect.API_Key = "<Your API Key>";
FaceBookConnect.API_Secret = "<Your API Secret>";
if (!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");
FaceBookUser faceBookUser = new JavaScriptSerializer().Deserialize<FaceBookUser>(data);
faceBookUser.PictureUrl = string.Format("https://graph.facebook.com/{0}/picture", faceBookUser.Id);
pnlFaceBookUser.Visible = true;
lblId.Text = faceBookUser.Id;
lblUserName.Text = faceBookUser.UserName;
lblName.Text = faceBookUser.Name;
lblEmail.Text = faceBookUser.Email;
ProfileImage.ImageUrl = faceBookUser.PictureUrl;
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>"
If Not 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")
Dim faceBookUser As FaceBookUser = New JavaScriptSerializer().Deserialize(Of FaceBookUser)(data)
faceBookUser.PictureUrl = String.Format("https://graph.facebook.com/{0}/picture", faceBookUser.Id)
pnlFaceBookUser.Visible = True
lblId.Text = faceBookUser.Id
lblUserName.Text = faceBookUser.UserName
lblName.Text = faceBookUser.Name
lblEmail.Text = faceBookUser.Email
ProfileImage.ImageUrl = faceBookUser.PictureUrl
btnLogin.Enabled = False
End If
End If
End Sub
![]()
Demo
Downloads
