Google Javascript API (gapi) - problems with .load

Question

I am trying to use the Google plus API (via googie-api-javascript) implementation like so (omitting full code):

var clientId = '7454475891XxxxxxXom4c6n.apps.googleusercontent.com'; //fake client
var apiKey = '-uTH_p6NokbrXXXXXXXXXXXXX'; //Fake Key
var scopes = 'https://www.googleapis.com/auth/plus.me';

function handleClientLoad() {
   gapi.client.setApiKey(apiKey);
   window.setTimeout(checkAuth,1);
}

function checkAuth() {
   gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}


function handleAuthResult(authResult) {        
  if (authResult && !authResult.error) {          
    makeApiCall();
  } else {
    //handle user-approval
  }
}

  // Load the API and make an API call.  Display the results on the screen.
function makeApiCall() {
    gapi.client.load('plus', 'v1', function() {
      var o = gapi.client.plus;
      alert(o);
    });
}

The code works well upto the point of gapi.client.load (including the user allowing access) - this callback gets called but alert(o) will return undefined.

Upon inspecting the HTTP request I see the .load issues a request to:

https://content.googleapis.com/discovery/v1/apis/plus/v1/rpc?fields=methods%2F*%2Fid&pp=0&key=-uTH_p6NokbrXXXXXXXX

This returns HTTP 400 with the following message:

{"error":{"errors":[{"domain":"usageLimits","reason":"keyInvalid","message":"Bad Request"}],"code":400,"message":"Bad Request"}}

My question is - what do I need to change to make this work? Is there some secret setting I need to enable ? Google+ is enabled in the google-developer-console under the APIs list.

Thanks for the help, Alon

Alon · Accepted Answer · 2013-12-27 11:38:06Z

11

Problem: .load issues a request to the google discovery service to load the .JS. The service will error out if the request it receives contains an api-key. (I don't know why the library works like this, it seems like a bug?)

Fix:

gapi.client.setApiKey(""); //NEW
gapi.client.load('plus', 'v1', function()
//re-add the key later if you need it

From Discovery Service docs: requests you make to the Discovery Service API should not include an API key. If you do provide a key, the requests will fail.

Weird... :P

edited Dec 27, 2013 at 11:38

answered Dec 27, 2013 at 11:31

Alon

8011 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NaturalBornCamper Over a year ago

Wow.. thanks so much, how would I have even found that! Especially since on the google documentation and example, they do provide one

JackW327 · Accepted Answer · 2016-08-03 22:36:21Z

A little update & more of an explanation. The current Discovery Service page is a little more specific now. They indicate that if the app has an Oauth2 token, then the API Key value is not required. However, I also found that if I have an authenticated user and thus an Oauth2 token (access_token) present, the Discovery Service fails with the error noted in the OP. This seems to contradict the documentation.

You can see the token in the developer tools console with:

console.log(gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse());

Embed that somewhere in a <script>...</script>in your HTML or in a .js file that is called otherwise. Must be after gapi.load(...). It'll stop the script if executed before gapi.load(...) is called.

To get a current user this has to be after the user is authenticated, of course. It does return an object if a user has not been authenticated however. If you are in Chrome, you can expand The Object in the developer tools console window to get a nice outline format of all the stuff in the auth response.

Note that currentUser is undefined prior to a successful authentication. Since this 'fails silently' you should use a conditional statement to verify either the sign in status or that a current user exists in your real code.

For completeness the object instantiation process in my app goes like this, at a high level:

1.) gapi.load(...) - After this gapi.client, gapi.auth2 and other objects are available.

2.) gapi.client.setApiKey("") would be called to 'clear' the api key if it had been set previously for some other purpose.

3.) gapi.auth2.init(...) - After this the auth instance is available via gapi.auth2.getAuthInstance .

4.) Then the login is kicked off using the .signIn() method of the auth instance. The auth instance would be instantiated with something like auth_instance = gapi.auth2.getAuthInstance(); If that's how you do it then the sign in would be auth_instance.signIn().

(...) - means there are several parameters needed.

I also found the Google tictactoe example useful as an example and a simple base for further work.

I hope this is helpful to someone!

tkanzakic · Accepted Answer · 2014-05-13 20:50:09Z

0

you need to call the method

function handleAuthClick(event) {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false} handleAuthResult);
    return false;
}

function makeApiCall() {
     gapi.client.load('plus', 'v1', function () {
         var request = gapi.client.plus.people.get({
             'userId': 'me'
         });

         request.execute(function (resp) {
             'method ajax with you application'
         });
    });
}

you can see what this do here

edited May 13, 2014 at 20:50

tkanzakic

5,49516 gold badges36 silver badges41 bronze badges

answered May 13, 2014 at 20:20

Ricardo Passinho

1

Collectives™ on Stack Overflow

Google Javascript API (gapi) - problems with .load

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related