In this article I will explain with an example, how to get Facebook details i.e. Name, Email and Profile Picture in ASP.Net Core MVC.
The Facebook details will be fetched after Authentication and it will be implemented using the ASPSnippets Core Facebook API library.
Note: For beginners in ASP.Net Core MVC, please refer my article ASP.Net MVC Core Hello World Tutorial with Sample Program example.
 
 
Create Facebook Application and get App Id
You will need to create an application and get an API Key and API Secret.
For more details, please refer Create FaceBook App and Facebook Application Id ( AppId ) and Secret Key.
 
 
Download ASPSnippets Core FaceBook API Library
You can download the latest ASPSnippets.FaceBookAPI.dll from the following link.
Download DLL file
Note: You will need to add the reference of ASPSnippets.Core.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.Core.FaceBookAPI;
using Newtonsoft.Json;
 
 
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
{
    public IActionResult Index()
    {
        FaceBookConnect.API_Key = "<API_Key>";
        FaceBookConnect.API_Secret = "<API_Secret>";
        FaceBookConnect.Version = "v19.0";
 
        FaceBookUser faceBookUser = new FaceBookUser();
        if (Request.Query["error"] == "access_denied")
        {
            ViewBag.Message = "User has denied access.";
        }
        else
        {
            string code = Request.Query["code"];
            if (!string.IsNullOrEmpty(code))
            {
                FaceBookConnect connect = new FaceBookConnect();
                string data = connect.Fetch(code, "me", "id,name,email,picture");
                faceBookUser = JsonConvert.DeserializeObject<FaceBookUser>(data);
                faceBookUser.IsDisable = true;
            }
        }
 
        return View(faceBookUser);
    }
 
    [HttpPost]
    public RedirectResult Login()
    {
        string url = FaceBookConnect.Authorize("user_photos,email", string.Format("{0}://{1}/{2}", Request.Scheme, Request.Host, "Home/Index/"));
        return Redirect(url);
    }
}
 
 
View
Inside the View, in the very first line the FaceBookUser model class is declared as Model for the View and ASP.Net TagHelpers in inherited.
The Form
The View consists of an HTML Form which has been created using the following TagHelpers attributes.
asp-action – Name of the Action. In this case the name is Login.
asp-controller – Name of the Controller. In this case the name is Home.
method – 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_Core_MVC.Models.FaceBookUser
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" asp-controller="Home" asp-action="Login">
        <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>
        }
    </form>
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                alert('@ViewBag.Message');
            }
        </script>
    }
</body>
</html>
 
 
Screenshot
ASP.Net Core: Get Facebook details Name, Email and Profile Picture
 
 
Demo
View Demo
 
 
Downloads
Download Code