Retrieve User Details From Facebook In ASP.NET Core Applications

In a previous article, we learned How to configure Facebook as a Login Provider in ASP.NET Core Application.

Now, in this article, we will discuss how can we retrieve logged-in user’s details, like Full name, Date of Birth, Gender, Email etc. from Facebook.

If you are trying to retrieve the Facebook User Details like Profile Picture, Email, Name, DOB and Gender, add the following lines in Configure method of the Startup class.

app.UseFacebookAuthentication(new FacebookOptions() {
    AppId = "1X884XXXX138XXXX",
        AppSecret = "0XXc3645XXX1a3c2f8bXXXX86c242XX4",
        Scope = {
            "user_birthday", //Access the date and month of a person's birthday.
            "public_profile" //Provides access to a subset of items that are part of a person's public profile.
            //A person's public profile refers to the following properties on the user object by default:
        },
        Fields = {
            "birthday", //User's DOB
            "picture", //User Profile Image
            "name", //User Full Name
            "email", //User Email
            "gender", //user's Gender
        },
});

Here, AppId and AppSecret are fed from Facebook App. If you are still confused, please refer to my previous article.

Now, the  next step is to write some lines of code in ExternalLoginCallback method of AccountController to retrieve user details from Facebook,

The overall ExternalLoginCallback method looks like the following.

// GET: /Account/ExternalLoginCallback
[HttpGet]
[AllowAnonymous]
public async Task < IActionResult > ExternalLoginCallback(string returnUrl = null, string remoteError = null) {
    if (remoteError != null) {
        ModelState.AddModelError(string.Empty, $ "Error from external provider: {remoteError}");
        return View(nameof(Login));
    }
    var info = await _signInManager.GetExternalLoginInfoAsync();
    if (info == null) {
        return RedirectToAction(nameof(Login));
    }
    // Sign in the user with this external login provider if the user already has a login.
    var result = await _signInManager.ExternalLoginSignInAsync(info.LoginProvider, info.ProviderKey, isPersistent: false);
    if (result.Succeeded) {
        _logger.LogInformation(5, "User logged in with {Name} provider.", info.LoginProvider);
        return RedirectToLocal(returnUrl);
    }
    if (result.RequiresTwoFactor) {
        return RedirectToAction(nameof(SendCode), new {
            ReturnUrl = returnUrl
        });
    }
    if (result.IsLockedOut) {
        return View("Lockout");
    } else {
        // If the user does not have an account, then ask the user to create an account.
        ViewData["ReturnUrl"] = returnUrl;
        ViewData["LoginProvider"] = info.LoginProvider;
        var email = info.Principal.FindFirstValue(ClaimTypes.Email);
        var name = info.Principal.FindFirstValue(ClaimTypes.Name);
        var dob = info.Principal.FindFirstValue(ClaimTypes.DateOfBirth);
        var gender = info.Principal.FindFirstValue(ClaimTypes.Gender);
        var identifier = info.Principal.FindFirstValue(ClaimTypes.NameIdentifier);
        var picture = $ "https://graph.facebook.com/{identifier}/picture?type=large";
        return View("ExternalLoginConfirmation", new ExternalLoginConfirmationViewModel {
            Email = email, //User Email
                Name = name, //user Display Name
                DOB = dob.ToString(), //User DOB
                Gender = gender, //User Gender
                Picture = picture //User Profile Image
        });
    }
}

Explanation

• Get external login information for Current login. [In our case, Facebook]
  

  var info = await _signInManager.GetExternalLoginInfoAsync();

• Sign in the user with this external login provider if the user already has a login.
  

  // Sign in the user with this external login provider if the user already has a login.
  var result = await _signInManager.ExternalLoginSignInAsync(info.LoginProvider, info.ProviderKey, isPersistent: false);
  if (result.Succeeded) {
      _logger.LogInformation(5, "User logged in with {Name} provider.", info.LoginProvider);
      return RedirectToLocal(returnUrl);
  }

• If the user does not have an account, then ask the user to create an account.
  

  // If the user does not have an account, then ask the user to create an account.
  ViewData["ReturnUrl"] = returnUrl;
  ViewData["LoginProvider"] = info.LoginProvider;
  var email = info.Principal.FindFirstValue(ClaimTypes.Email);
  var name = info.Principal.FindFirstValue(ClaimTypes.Name);
  var dob = info.Principal.FindFirstValue(ClaimTypes.DateOfBirth);
  var gender = info.Principal.FindFirstValue(ClaimTypes.Gender);
  var identifier = info.Principal.FindFirstValue(ClaimTypes.NameIdentifier);
  var picture = $ "https://graph.facebook.com/{identifier}/picture?type=large";
  return View("ExternalLoginConfirmation", new ExternalLoginConfirmationViewModel {
      Email = email, //User Email
          Name = name, //user Display Name
          DOB = dob.ToString(), //User DOB
          Gender = gender, //User Gender
          Picture = picture //User Profile Image
  });

Here, info.Principal.FindFirstValue(ClaimTypes.[Name]) is responsible to retrieve the claims associated with that account.

All the retrieved claims (Email, Name, DOB, Gender and Picture) associated with user are then passed to ExternalLoginConfirmation View page to confirm user registration .

ExternalLoginConfirmationViewModel

Modify ExternalLoginConfirmationViewModel as below:

ExternalLoginConfirmation View Page

Step 1

Navigate to Views => Accounts => ExternalLoginConfirmation.cshtml.

Step 2

Now, replace the design code with the following.

<h2>@ViewData["Title"].</h2>
<div class="row">
    <div class="col-md-offset-3 col-md-6">
        <div class="panel panel-primary">
            <div class="panel-heading"> <b>Associate details from @ViewData["LoginProvider"] account.</b> </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4"> <img src="@Model.Picture" title="@Model.Name" alt="@Model.Name" class="img-rounded img-thumbnail" style="height:160px;" /> </div>
                    <div class="col-md-8">
                        <p class="text-info"> You've successfully authenticated with <strong>@ViewData["LoginProvider"]</strong>. Please modify your details and click <strong>Register Now</strong> to complete your registration. </p> <strong>Name :</strong><span> @Model.Name</span> <br /> <strong>DOB :</strong><span> @String.Format("{0:dddd, MMMM d, yyyy}", Convert.ToDateTime(Model.DOB))</span> <br /> <strong>Gender :</strong><span> @Model.Gender.ToString()</span> <br /> <strong>Email :</strong><span> @Model.Email</span> </div>
                </div>
                <div class="row">
                    <form asp-controller="Account" asp-action="ExternalLoginConfirmation" asp-route-returnurl="@ViewData[" ReturnUrl "]" method="post" class="form-horizontal">
                        <center>
                            <hr />
                            <div asp-validation-summary="All" class="text-danger"></div>
                            <div class="form-group"> <label asp-for="Email" class="col-md-2 control-label"></label>
                                <div class="col-md-10"> <input asp-for="Email" class="form-control" autofocus /> <span asp-validation-for="Email" class="text-danger"></span> </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-registration-mark"></i> Register Now</button> </div>
                            </div>
                        </center>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> @section Scripts { @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); } }

Application Execution

Now, rebuild and Run (Ctrl + F5) the application.

Navigate to the Login Page and login using Facebook credentials.

Once the login is successful with Facebook, you will be redirected to ExternalLoginConfirmation page which will display your Facebook details just like below.

You can "Register Now" into your Web App.

Summary

So far, we have learned how to

• Configure Facebook as External Login Provider
• Get User Details like Email, Name, DOB, Gender and Profile Picture from Facebook.

In next article, we will learn how to add custom properties in ASP.NET Identity, migrate those properties as Columns, and save the data retrieved from Facebook in Database. By default, ASP.NET Core application doesn’t save Name, DOB, Gender and Profile Picture of users retrieved from External Login Providers.