Menu
stackoverflow'ers! So my job now is to work around social networks. I've made login for facebook, google and twitter. Now i need to retrieve user avatars. Site is very dynamic and pretty much everything are working through javascript and ajax. I have got facebook user avatar successfully. When user has avatar, it returns avatar, when user has no avatar, it returns facebook's default avatar. Now im working on google-plus and twitter. I found nice url, where i can get avatar from google-plus:
https://plus.google.com/s2/photos/profile/{oauth_id}?sz=100
I am storing oauth_id in session, it is accessible. When user has set avatar - everything works fine. Problem is, when users avatar is'nt set - that link returns 404 error. How can i determine in jquery or just javascript, if that link returns 404 error or not? And for some future work - i think twitter has the same problem. Or may be you could provide some better options to achieve this.
747
Another way to do this is to request the plus.me scope, authenticate the user, then retrieve their profile which will have the image value set if they have an avatar. I created a live demo here: http://wheresgus.com/profile.html which shows profile retrieval using the Google+ public data API.
To set things up for your project, go to the Google APIs console - https://code.google.com/apis/console/ and create a project with the Google+ API enabled. You will need the Client ID for a web application from the API Access section of the Google APIs console.
The relevant code is as follows:
<html>
<head>
<script src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
function onSignin(e){
accessToken = e.access_token;
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://www.googleapis.com/plus/v1/people/me/");
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.send();
xhr.onreadystatechange = function(){
if (this.readyState == 4){
var myProfile = JSON.parse(xhr.responseText);
alert(myProfile.image.url);
}
}
}
</script>
</head>
<body>
<g:plus action="connect" clientid="YOUR CLIENT ID" scope="https://www.googleapis.com/auth/plus.me" callback="onSignin">
</g:plus>
</body>
</html>
Create an HTML file with this code and replace YOUR CLIENT ID with the credentials you created in the Google APIs console. When you click the sign in button, the client will give you a URL for the user.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
