Get User Profile Photo For All Services using External Authentication in ASP.NET MVC

Question

I am unable to get the user's profile photo when using ExternalLogin in my ASP.NET MVC

I looked up all over the internet and tried different things such as using Claims for example the answer given here & here - Seems like anything I find is outdated or not working - I also tried the following to get the profile image (google in this case)

ViewBag.Image = loginInfo.ExternalIdentity.Claims.First(a=> a.Type == "urn:google:profile");

So going back to basics I have the following code

Startup (removing client IDs and client secrets

........    
app.UseMicrosoftAccountAuthentication(
                    clientId: "",
                    clientSecret: "");
                app.UseLinkedInAuthentication(
                   clientId: "",
                   clientSecret: "");           

                app.UseFacebookAuthentication(
                   appId: "",
                   appSecret: "");

                app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
                {
                    ClientId = "",
                    ClientSecret = ""
                });
.......

// GET: /Account/ExternalLoginCallback

[AllowAnonymous]
    public async Task<ActionResult> ExternalLoginCallback(string returnUrl)
    {
        var loginInfo = await AuthenticationManager.GetExternalLoginInfoAsync();
        if (loginInfo == null)
        {
            return RedirectToAction("Login");
        }

        // Sign in the user with this external login provider if the user already has a login
        var result = await SignInManager.ExternalSignInAsync(loginInfo, isPersistent: false);
        switch (result)
        {
            case SignInStatus.Success:
                return RedirectToLocal(returnUrl);
            case SignInStatus.LockedOut:
                return View("Lockout");
            case SignInStatus.RequiresVerification:
                return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = false });
            case SignInStatus.Failure:
            default:
                // If the user does not have an account, then prompt the user to create an account
                ViewBag.ReturnUrl = returnUrl;
                ViewBag.LoginProvider = loginInfo.Login.LoginProvider;
                ViewBag.Name = loginInfo.ExternalIdentity.Name;
                ViewBag.Avt = loginInfo.ExternalIdentity.Claims.First(a=> a.Type == "urn:google:forfile");
                return View("ExternalLoginConfirmation", new ExternalLoginConfirmationViewModel { Email = loginInfo.Email });
        }
    }

// POST: /Account/ExternalLoginConfirmation

[HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> ExternalLoginConfirmation(ExternalLoginConfirmationViewModel model, string returnUrl)
{
    if (User.Identity.IsAuthenticated)
    {
        return RedirectToAction("Index", "Manage");
    }

    if (ModelState.IsValid)
    {
        // Get the information about the user from the external login provider
        var info = await AuthenticationManager.GetExternalLoginInfoAsync();
        if (info == null)
        {
            return View("ExternalLoginFailure");
        }
        var user = new ApplicationUser { UserName = model.UserName, Email = model.Email };
        var result = await UserManager.CreateAsync(user);
        if (result.Succeeded)
        {                    
            result = await UserManager.AddLoginAsync(user.Id, info.Login);
            if (result.Succeeded)
            {
                await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: false);
                return RedirectToLocal(returnUrl);
            }
        }
        AddErrors(result);
    }

    ViewBag.ReturnUrl = returnUrl;
    return View(model);
}

How do you guys get the profile photo for all services (Google/Facebook/Linkedin/Microsoft) in one single code?

Answer 1

For Google => in Startup.cs

.AddGoogle(options =>
           {
               var googleAuthNSection =
                   Configuration.GetSection("Authentication:Google");

               options.ClientId = googleAuthNSection["ClientId"];
               options.ClientSecret = googleAuthNSection["ClientSecret"];
               options.ClaimActions.MapJsonKey("urn:google:picture", "picture", "url");
               options.Scope.Add("https://www.googleapis.com/auth/userinfo.profile");
           })

and when successful login you can receive the image using

info.Principal.FindFirstValue("urn:google:picture");

For Facebook => You just have to use the identifier

$"https://graph.facebook.com/{identifier}/picture?type=large";

For LinkedIn => Use this in Startup.cs

                options.UserInformationEndpoint = "https://api.linkedin.com/v2/me?projection=(id,firstName,lastName,profilePicture(displayImage~:playableStreams))";
                options.Scope.Add("r_liteprofile");