Google had changed their policy for fetching profile image

New way to fetch google+ profile image

Google have recently decided to change the way you can fetch profile image. Good old building of image URL is not supported anymore after Google has applied security policy.

In good old, but unfortunately deprecated approach you only needed profile id to build a URL for fetching Google+ profile image like the following:

 https://plus.google.com/s2/photos/profile/<PROFILE ID>?sz=<IMAGE SIZE IN PIXELS>

for example, for my Google+ profile image, URL would be as following

 https://plus.google.com/s2/photos/profile/108404484724048935794?sz=100

This was working for quite some time and made fetching profile image really easy, but recently this was changed by Google. Now you cannot access profile image unless you have your application created through Google console.

To create your Google+ app you need to login with your Google plus account to https://console.developers.google.com. Right after you create your app, make sure you enable Google+ API for it.

 

Googleapp Api Selection

Next step is to generate keys for it and use API Key generated for that app.
API keys are accessible in Google console in Credentials section in lift navigation menu of your previously created Google+ project.

Google Console Credentials

Use this API key along with profile ID for which you want to fetch profile image to build URL from which you will pull JSON data with image path details. URL should be in the following format:

https://www.googleapis.com/plus/v1/people/<PROFILE ID>?fields=image&key=<API KEY>

With a simple get to this URL, Google will give you back JSON in the following format:

{
    "image": 
    {
         "url": "https://lh3.googleusercontent.com/-OkM...AANA/ltpH4BFZ2as/photo.jpg?sz=50"
    }
}
    

Query string value sz=50 you can simply replace with the value of the image you need. This way images for comments on this website are loaded. This example shows only fetching profile image, but by adding additional parameters to GET request URL, you can fetch other details. The list of all fields you can fetch you can find at https://developers.google.com/+/api/latest/people/get

The reason this article is in JQuery section is very simple. If you decide to make GET request from your back-end code, you page loading time will depend on time for this get request to Google. In ideal cases, you might not notice this, but first time API is down on Google side or inaccessible for any reason, you page will suffer long time to loan, possible timeout request or even an application exception.

Much better approach is to make this call on client code side, after whole page is loaded. This way you will serve your main content to client and in case remote API is down or inaccessible, you will not have problem with page loading time or exception which will fail to display whole page.

$.get("https://www.googleapis.com/plus/v1/people/<PROFILE ID>?fields=image&key=<API KEY>", function (data) {
    var imageUrl = data.image.url.replace("?sz=50", "?sz=100");
});
    
Note

Whenever you are accessing external resource, do it from the client side to avoid page slow loading or possible timeout or application exception. In case you need to do authentication or some complex operation with the request and you cannot do everything on client side code, create your proxy page/view or controller action, do the processing in it and invoke it with script after page is loaded.

In case you need some additional info or suggestion, please post your comment.

 

References

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.


About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN  Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

SQL/T-SQL

read more

Umbraco CMS

read more

PowerShell

read more

Comments for this article