Google signin callback - get name and email

Question

I am trying to trap basic google account information (name, email, id.) into a database on sign in.

I am doing this by setting vars for their profile info and updating the database through AJAX.

(see vars in example below)

if (authResult['access_token']) {
    // The user is signed in
    this.authResult = authResult;
    helper.connectServer();
    // After we load the Google+ API, render the profile data from Google+.
    //this renders profile information to the page just fine
    gapi.client.load('plus','v1',this.renderProfile);

        var email = gapi.client.load('plus','v1',this.getEmail);
        var acct_type = 'G';
        var id = gapi.client.load('plus','v1',this.getId);
        var fname = gapi.client.load('plus','v1',this.getFname);
        var lname = gapi.client.load('plus','v1',this.getLname);

    //DO AJAX!!
    $.post("_google/processlogindata.php", 
    {
        id:id,
        fname:fname,
        lname:lname,
        email:email,
        acct_type:acct_type
        });

The ajax is working, it passes the hardcode 'G' and shows up in the db.

The rest of the variables appear as blank entries, when the database default is NULL.

I copied off of renderProfile since it worked for displaying profile bits on the page. This is what getFname looks like, for example (they're all pretty much the same):

     getFname: function() {
  var request = gapi.client.plus.people.get( {'userId' : 'me'} );
  request.execute( function(profile) {
     return profile.name.GivenName;
  });},

If I set the return variable here to a static string like "name", it will show up in the database. So the problem is definitely how I'm trying to access or save this profile information.

So my question is, how do I trap these profile objects correctly to the vars above the AJAX?

Answer 1

I solved this with the following code:

        var acct_type = 'G';

        gapi.client.load('plus','v1', function(){

            var request = gapi.client.plus.people.get({
              'userId': 'me'
            });

            request.execute(function(resp) {
                var id = resp.id;
                var fname = resp.name.givenName;
                var lname = resp.name.familyName;
                var email = resp.emails[0].value;

                $.post("_yourDBinjection_.php", 
                {
                id:id,
                fname:fname,
                lname:lname,
                email:email,
                acct_type:acct_type
                });

            });
        });

The point being that it uses no external functions or variables, it sets everything in the gapi.client.load function parameter including the variables and sending the ajax.

Note that the third parameter (a function, whether written or referenced) is listed on Google dev as 'optional' but it's not very useful without it (returns a promise?) So anything you want to do with the loaded information should probably be done in the function parameter. For some reason with this case piecing it out in different external functions I ended up not being able to reach or use variables above it (but note also that G passed just fine in this example as well.)

I don't like nested functions much so figuring this out was weird.

REFERENCES

Google dev sneaks away a lot of examples and info so here are some articles that helped me generate this answer:

(javascript version)
https://developers.google.com/+/api/latest/people/get#examples

the very vague gapi.client.load description:
https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiclientload

RESOURCES FOR SIGN-IN

this page shows a live version/code example of profile JSON return: https://developers.google.com/+/web/people/

this article will show you the nesting structure of each JSON people object: https://developers.google.com/+/api/latest/people

if you couldn't find it, Google has a well-hidden quickstart app for javascript/jQuery sign-in that basically does the sign-in work for you, except it takes some ripping up if you want it to bounce to other pages rather than refresh itself with information. I frankensteined it to my needs. https://developers.google.com/+/quickstart/java