Retrieve Facebook User Profile Details for Login in Asp.Net

Leave a Comment
In this article, we learn how to retrieve Facebook user profile details for website authentication in asp.net website.

Creating a Facebook App

First of all we need to create an app through which the website will connect with users.
Visit https://developers.facebook.com/apps and click on 'Create New App'.

Fill in the desired App Name and Namespace. Remember these must be unique.

Retrieve Facebook User Profile Details for Login in Asp.Net

On the basic settings page look for 'Select how your app integrates with Facebook' section and choose 'Website with Facebook Login'. Here, you can also add your favicon and many details.

Retrieve Facebook User Profile Details for Login in Asp.Net

In the Site URL field, enter your site address. I am working locally, so I added http://studyoverflow.org.

Retrieve Facebook User Details using Asp.net C#

First you have to download Facebook API dll from below website -
http://facebookapi.codeplex.com/releases/view/76672

then, add above dll to bin folder of your web application. you can also get this API dll from downloading demo code.

Next, add Deafult.aspx page in your web application. then add below code -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Facebook Login Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <h1>Facebook Login Example</h1><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>
    <br />
    <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>
    </form>
</body>
</html>

Now, go to code behind file of Default.aspx.cs and add below code -
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ASPSnippets.FaceBookAPI;using System.Web.Script.Serialization;
public partial class login : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        FaceBookConnect.API_Key = "641340762546148"; // Facebook App Key        FaceBookConnect.API_Secret = "245bb9ced6bdaaf4992eaa36d15ed412";
                  // Facebook Secret App Key        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;
            }
        }
    }
    protected void Login(object sender, EventArgs e)
    {
        FaceBookConnect.Authorize("user_photos,email", Request.Url.AbsoluteUri.Split('?')[0]);
    }
   
}
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; }
}


Demo
Retrieve Facebook User Profile Details for Login in Asp.Net

Download Source Code

0 comments:

Post a Comment