How to get avatar for gmail user? - javascript

I'm creating an email-based application in React with the Gmail API. I'm loading in a bunch of messages, and I want to display avatars of the senders.
I'm using this package to display avatars. I'd like to either have a Google Id or an image url. It would also be nice to be able to get images for other popular services, such as Outlook and Yahoo mail.
Other people have asked this same question, but all the answers either seem to use the Picasa API (which is deprecated) or the Google+ API (which will be deprecated).
EDIT: Yes, the react-avatar package claims it can find an avatar based on supplied user data, but all it does with the email is find a Gravatar, which many people don't have.

What you want to do is not possible via the GMAIL API or any other Google API
You can not take a Google email address and search for the image or any other personal profile information associated with that email address via any Google API endpoint. Explanation below.
Get image of the sender of an email
Gmail API lists the email messages that have been sent to and by a user. The gmail API is basically returning the mail server email message response in MIME format which if you check does not contain a profile image. It does not return to you the image of a the sender or the reciever.
Google does not have endpoint for developers to use to searching on a gmail.com email address and returning any user profile information (including image) this would be against the users privacy. A user would have to grant you permission to see their image and you dont have that permission for every gmail user who may be sending emails to your authenticated user.
The gmail website probably does some kind of check on gmail email addresses and puts the picture on attached with the account. Google has access to the profile data of all GMAIL users, google cant give you this same access as it would be against the users privacy. If its not a gmail account they may check Gravatar to see if an image has been set up for this email address. Again there is no way for you to request the image of a google user using their email address.
You could check Gravatar to see if one had been set up for that email
If the authenticated user has added this user as a contact and has added a picture for this user you may be able to use the People api.
In the past i have recommend to users that as an image they take the first letter of the users email address and create an image using that letter. You may also want to use a question mark which is actually what gmail does when its website cant find an email from the user probably by checking Gravatar.
Get image of current authenticated user
You can get this information from the people.get endpoint just make sure that you have requested the profile scope from the user when you authenticate them
GET https://people.googleapis.com/v1/people/me
It returns a large response containing the users profile information part of it contains the users picture
"photos": [
{
"url": "https://lh3.googleusercontent.com/a-/AAuE7mDuIWqXzrrp-65cIhXSD2HjCI8WYsWHR0fDx5_wQPY=s100",
"metadata": {
"source": {
"type": "PROFILE",
"id": "117200475532672775346"
},
"primary": true
}
}
],
The offical sample project for people api contains information on how to connect to the api. Just make sure to add the 'profile' scope
The code to get the picture should be something like this.
function getPicture() {
gapi.client.people.people.get({
'resourceName': 'people/me',
'pageSize': 10,
'personFields': 'photos',
}).then(function(response) {
var connections = response.result.connections;
appendPre('Connections:');
if (connections.length > 0) {
for (i = 0; i < connections.length; i++) {
var person = connections[i];
if (person.url && person.url.length > 0) {
appendPre(person.names[0].url)
} else {
appendPre("No display name found for connection.");
}
}
} else {
appendPre('No connections found.');
}
});
}

I don't think that google shares that info with anyone without permission .
You have to create a profile for every user and take the profile image only once when the user registers in your platform by the Google oauth
Check this info
https://developers.google.com/actions/identity/google-sign-in-oauth

The currently accepted answer isn't entirely correct, as there absolutely is a Google API which exposes Gmail Avatars - as well as the user's first- and/or Lastname, as long as the user has configured any publically.
Although I have so far been unable to find the actual API endpoint you can use to achieve this, I did come across avatarapi.com.
As stated on their website:
This API uses public profile information provided by Google, via a publicly exposed Google data source to determine the name and profile image of the user.
They have a fallback to Gravatar. I'd also love to find out where this 'Google Data source' they use is located.

Gravatar
It is possible that the user associated with that email address has signed up for Gravatar. In that case, you can easily obtain the Gravatar avatar.
You need to get the md5 of the email first, then
var email = "youremail#gmail.com",
size = 80;
yourImg.src = 'http://www.gravatar.com/avatar/' + MD5(email) + '.jpg?s=' + size;
https://jsfiddle.net/a4g8s5y2/1/

Related

How do i only allow specific email to login into my page

There are two sides, Admin and Users. I am using the same database in firebase for both Users and Admin. It means that Users that are registered in my firebase authentication, can login to Admin webpage. How do i allow only specific admin's email to login into the Admin page.
For example:
Admin has an email of admin#admin.com
User has various email like 123#gmail.com, 222#gmail.com and etc.
What i want is only to allow admin#admin.com to be able to login into the Admin page but restrict login for User emails to login to the Admin page.
Using a Javascript, a simple solution would be to split the email String on the #, which will return you an Array of substrings and compare the second part which is the domain. Then, you could condition the rest of your code to work only if the criteria is true.
An example would be:
const allowedEmailDomain = 'admin.com';
const email = 'test#admin.com';
if (email.split('#')[1] === allowedEmailDomain) {
// do something, we accept this email
} else {
// return an error or do nothing
}
I make the assumption that, on the back-end side, your application is correctly secured, i.e. you have security rules in your database that only allow the users with an "admin" profile/role to read or write "admin" data in the database.
If this is not the case you MUST set correct security rules, since securing your Firebase instance only from a front-end perspective is not sufficient, as it is not very difficult to reverse engineer your app code and write some JavaScript code that will interact with your back-end. For that you could use Custom Claims.
So, with this assumption, it means that you need to adapt your front end in such a way the admin screens are only seen by the admin users.
One of the best answer is again to use Custom Claims, as explained here https://firebase.google.com/docs/auth/admin/custom-claims#access_custom_claims_on_the_client (Section "Access custom claims on the client") and in this official Firebase video: https://firebase.google.com/docs/auth/admin/custom-claims#access_custom_claims_on_the_client
Note that trying to block a user based on his email domain may not be a good solution as it is easy, in few lines of JavaScript code, to register to your Firebase project as a user with a mail like whatever#admin.com or with any other email (using createUserWithEmailAndPassword)
Just block every other domain as #admin.com.
$allowed_domains = array("admin.com");
$email_domain = array_pop(explode("#", $email));
if(!in_array($email_domain, $allowed_domains)) {
// Not an authorised email
}
It's simply. Make an array for allowed domains, explode by #, get the last element of the array and check if it exists in the allowed domains array.

Meteor: Adding fields to Third Party User creation

I am using the user-accounts package to manage the Account System in my app.
I have also integrated Google, Github, Twitter and other 3rd party Services.
The package works fine, but now that I need a specific page for every user, and for SEO terms, I need the url to be like this:
https://domain.com/user/username
I also have the accounts-password package. And I have added a username field, and it works fine.
But if thirdparty services are used, the popup closes and the page is redirected with the user successfully created. I read about calling Accounts.onUserCreate,
and this is my code:
Accounts.onCreateUser(function(options, user) {
var email = options.profile.email;
var ist = email.indexOf("#");
var uname = email.slice(0,ist);
user.username = uname;
if(options.profile){
user.profile = options.profile;
}
return user;
});
But it gives an error : Cannot read indexOf of undefined.
How can this be achieved?
There either can be a page, to enter the username, for every new user, or this way, the email should be sliced for username creation. (Second method is preferred.)
The error message is telling you your variable email has not been set.
When using third-party login services with Meteor, the user information is not stored within the profile of the user document. Rather, you should look for the email within the services data of that user document. For example, for Facebook, you should find this within services.facebook.email.
You may also want to consider using the user argument to find this information as the documentation states: "The user argument is created on the server and contains a proposed user object with all the automatically generated fields".

Token google analytics and relationship webPropertyId / profilId

I am currently developing a dashboard with Google Analytics API, which will be accessible website back office. I realized this during this developing javaScript I block on 2 things:
The first is the authentication must be transparent to the user via the use of a token.
In my approach I utlise OAuth2 of the API by generating a token with the playground for this token to be valid
I join my code
gapi.analytics.ready(function() {
var CLIENT_ID = 'XXXX.apps.googleusercontent.com';
var CLIENT_SECRET ='XXX...';
var ACCESS_TOKEN = 'XXX...';
var REFRESH_TOKEN ='XXXX....';
var EXPIRE_IN ='3600';
var TOKEN_TYPE ='Bearer';
var ACCESS_TYPE ='offline';
var SCOPE = 'https://www.googleapis.com/auth/analytics.readonly'
gapi.analytics.auth.authorize({
clientid: CLIENT_ID,
client_secret:CLIENT_SECRET,
serverAuth: {
access_token: ACCESS_TOKEN,
refresh_token: REFRESH_TOKEN,
//token_type: TOKEN_TYPE,
//expires_in: EXPIRE_IN,
//access_type: ACCESS_TYPE,
}
});
After the validity of the data are more accessible with a 401 error (logical because the token is no longer valid)
or to my first question about how to obtain a valid token all the time?
My second question concerns the recovery of data I based on the recovery of the profile number (like many such works).
However SEVERAL of my sites using the tracking number (UA-XXXXXXXX-N).
Knowing that sites use this number is the posibility to find the profilId thanks to the tracking number and accountId that lion can deduct.
But I do not know how to arive.
Es that someone already out how to make this relationship ???
Pending your answers thank you in advance
(Sorry for the translation I utlise google translation)
Authenticating using the playground is a bad idea, and wont work for long. You are going to have to code your own authentication process here. It sounds like you want to do this with your own websites this your own data, I would normally recommend you use a service account. A service account can be set up to authenticate without requiring the user to do anything. While some people say that you can use a Service account with JavaScript, I don't feel that it is a secure solution, I also wonder if it is ok to do this under the current terms of service. So my first recommendation to you is to look into using as service account with a server sided scripting language. say PHP. If you don't a user will have to authenticate and then they will only be seeing the information on there own website not your website.
Second how to find the Profile id:
The first and probably easiest option would be to just go to the admin section of Google analytics and find your profile id there. If you are looking for a way of doing this programmatically you, I would use the account summaries report from the Management API this will give you a list of all of the accounts for the current authenticated user you can then scan that to find the profile ids you want.

Facebook Graph not returning email

UPDATE It seems that my personnal email address had not been used for years. Facebook marked it as inactive and did not return it as part of the JSON.
I am authenticating a user with Facebook on the client side using this url :
https://www.facebook.com/dialog/oauth?
client_id=xxx&
redirect_uri=https://www.facebook.com/connect/login_success.html&
scope=email
I receive a code I then exchange for a token :
https://graph.facebook.com/oauth/access_token?
code=xxx&
client_id=xxx&
client_secret=xxx&
redirect_uri=xxx
I then send the token to my server and I fetch the Fb Graph in order to get some user info, including the email.
https://graph.facebook.com/me?access_token=xxx
For some reason, I get all the user 'about' info, but not his/her email!
What did I do wrong?
According to the Facebook Documentation:
By default, not all the fields in a node or edge are returned when you
make a query. You can choose the fields (or edges) you want returned
with the "fields" query parameter. This is really useful for making
your API calls more efficient and fast.
This is valid from v2.4, (previous versions retrieved some default fields).
When you register a new app you are entitled automatically (without manual review) to three permissions: email, public_profile and user_friends. In your code "email" is in scope (which is good) so just change your query to:
https://graph.facebook.com/me?access_token=xxx&fields=email
You probably wanted the public_profile fields that you automatically got in previous versions of the API. Do so so, add "public_profile" to your scope:
https://www.facebook.com/dialog/oauth?
client_id=xxx&
redirect_uri=https://www.facebook.com/connect/login_success.html&
scope=email,public_profile
And now add the user name fields to your query:
https://graph.facebook.com/me?access_token=xxx&fields=first_name,last_name,gender,email,timezone,age_range,verified
Good luck

retrieve people/organization information from linked in

hi I am involved in a development of web app, where I have to retrieve information of people or organization from linkedin, dynamically.Suppose user A can search for Organization and user B can search for particular person.
I have gone the throough the linked in API's but was not able to figure it out how to implement it.
I am using Linkedin javascript API
Kindly help me
Using the LinkedIn API is a two-step process. First, get the user of your web app to authorize the app to access their LinkedIn information. This means setting up your app on LinkedIn as follows:
https://developer.linkedin.com/apis
Once you have that set-up, you can then query the LinkedIn API using JavaScript (I assume JavaScript is the language/method you want to use, as you tagged it).
You can adjust the results coming back, per the documentation, by using facets and parameters. For instance, to perform a people search that returns all user's named Barack and their profile headline and summary, you'd do something like:
IN.API.PeopleSearch()
.fields(["headline", "summary"])
.params({"first-name":"Barack"})
.result(function(result) {
alert JSON.stringify(result)
})
headline and summary are profile fields that you specify - you can change these to pull the information you need.
Update - including code to perform a company search.
To perform a Company Search using the JavaScript API, you'd use the IN.API.Raw() method:
IN.API.Raw("/company-search:(facets,companies:(id,name,universal-name,website-url))")
.result( function(result) { /* handle result */ } )
.error( function(error) { /* handle error */ } );

Categories

Resources