You are here: Home / Blog / Extracting Google user account properties in Meteor

Extracting Google user account properties in Meteor

Posted by Fulvio Casali at Nov 17, 2014 03:15 AM |
Filed under:
A simple customization of the simple-todos tutorial app using Google accounts

In Chapter 9 of the Meteor Tutorial you can learn about how to add user accounts and login/out functionality to your sample todo app.  Towards the end the tutorial suggests to the adventurous to add the accounts-facebook package, to enable Facebook login.  I did, verified that I get a Facebook login button, and promptly removed the package (not a Facebook fan here!).  Instead, I added the Google accounts package:

> meteor add accounts-google
 
added oauth at version 1.1.2
added google at version 1.1.2
added oauth2 at version 1.1.1
added accounts-google at version 1.0.2
added accounts-oauth at version 1.1.2
 
accounts-google: Login service for Google accounts

When you do, you get a nice Google button in the Sign in menu, but it's all red and says "Configure Google Login".  In other words, a little setup is needed before you can log in with a Google account.  Fortunately, if you click the red button, you get detailed and fairly straightforward instructions for how to do so.  In short order, you should have it all working.

Customizing the {{username}}

The tutorial has us identify each task by the username of the account that created the task with the {{username}} template tag.  This works fine as long as we use simple username/password authentication, but as soon as we replace or augment it with Google accounts, the template tag is replaced with an empty string.

Since this template tag is in the scope of the task template, which is called in the context of an iteration of the results of a Tasks.find(...), the value of {{username}} comes from the expression Meteor.user().username in:

Tasks.insert({
text: text,
createdAt: new Date(),            // current time
owner: Meteor.userId(),           // _id of logged in user
username: Meteor.user().username  // username of logged in user
});

Now, why does this remain empty?  Let's inspect the users in the Mongo DB.  Start the meteor application in one terminal window, and then open another terminal window and run:

> meteor mongo
MongoDB shell version: 2.4.9
connecting to: 127.0.0.1:3001/meteor

Then run the following query:

meteor:PRIMARY> db.users.find()

If you logged in with a Google account, you will see it listed.  Note how in the whole json structure of this user object there is no username key.  That's why.

However, there are several interesting fields that could be used instead, or for other purposes:  name (the full name), email, given_name, family_name, gender, and picture.  Let's use given_name as the name to show next to each task.  Because of the way the json object for the Google account is nested, this is how we can refer to it:

Tasks.insert({
text: text,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().services.google.given_name
});

And now the first name of the user who created the todo will appear next to it!

Learn more

For a lot more customizations, and using GitHub accounts instead of Google, watch this video:
https://www.eventedmind.com/feed/meteor-customizing-login

 

Filed under: