How to get Google+ profile picture on login in ASP.NET MVC

问题

I'm working on a ASP.NET MVC 5 with Entity Framework (version 6.0) application. I have added the simple google login, that saves the google email with the user on registration. How do I also get the profile picture of the Google+ user when they login and cast it in a view?

回答1:

Google Plus API for developers allows you to fetch public data from Google+. Followed by detail tutorial of all the necessary steps one need to perform to successfully fetch public data from Google+. Google implies a limit to the usage of Google+ API - Each developer has a quota. We will see about that when we will discuss Google API console.

Google uses OAuth2.0 protocol to authorize your application when it tries to access user data.

It mostly uses standard HTTP method by means of RESTful API design to fetch and manipulate user data. Google uses JSON Data Format to represent the resources in the API. Step1: Generate an API key through Google API Console. Step2: used GoogleOAuth2AuthenticationOptions which means you'll need to set up a project at https://console.developers.google.com/project first to get a ClientId and ClientSecret.

At that link (https://console.developers.google.com/project), create a project and then select it. Then on the left side menu, click on "APIs & auth". Under "APIs", ensure you have "Google+ API" set to "On". Then click on "Credentials" (in the left side menu). Then click on the button "Create new Client ID". Follow the instructions and you will then be provided with a ClientId and ClientSecret, take note of both.

var googleOptions = new GoogleOAuth2AuthenticationOptions()
{
    ClientId = [INSERT CLIENT ID HERE],
    ClientSecret = [INSERT CLIENT SECRET HERE],
    Provider = new GoogleOAuth2AuthenticationProvider()
    {
        OnAuthenticated = (context) =>
        {
            context.Identity.AddClaim(new Claim("urn:google:name", context.Identity.FindFirstValue(ClaimTypes.Name)));
            context.Identity.AddClaim(new Claim("urn:google:email", context.Identity.FindFirstValue(ClaimTypes.Email)));
            //This following line is need to retrieve the profile image
            context.Identity.AddClaim(new System.Security.Claims.Claim("urn:google:accesstoken", context.AccessToken, ClaimValueTypes.String, "Google"));

return Task.FromResult(0);
}
}
};

app.UseGoogleAuthentication(googleOptions);

//get access token to use in profile image request

var accessToken = loginInfo.ExternalIdentity.Claims.Where(c => c.Type.Equals("urn:google:accesstoken")).Select(c => c.Value).FirstOrDefault();
        Uri apiRequestUri = new Uri("https://www.googleapis.com/oauth2/v2/userinfo?access_token=" + accessToken);
        //request profile image
        using (var webClient = new System.Net.WebClient())
        {
            var json = webClient.DownloadString(apiRequestUri);
            dynamic result = JsonConvert.DeserializeObject(json);
            userPicture = result.picture;
        }

var info = await signInManager.GetExternalLoginInfoAsync();
var picture = info.ExternalPrincipal.FindFirstValue("pictureUrl");

ExternalLoginCallback method I check for which login provider is being used and handle the data for Google login. Go through the link to get more information. https://developers.google.com/identity/protocols/OAuth2

I have tried it its working.

来源：https://stackoverflow.com/questions/43700504/how-to-get-google-profile-picture-on-login-in-asp-net-mvc

标签

asp.net-mvc

entity-framework

oauth