Google Javascript API (gapi) - .load 的问题答案

【问题标题】：Google Javascript API (gapi) - problems with .loadGoogle Javascript API (gapi) - .load 的问题
【发布时间】：2014-01-14 03:19:36
【问题描述】：

我正在尝试像这样使用 Google plus API（通过 googie-api-javascript）实现（省略完整代码）：

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);
    });
}

代码在 gapi.client.load 之前运行良好（包括允许访问的用户） - 此回调被调用但 alert(o) 将返回未定义。

在检查 HTTP 请求时，我看到 .load 发出一个请求：

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

这将返回带有以下消息的 HTTP 400：

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

我的问题是 - 我需要进行哪些更改才能使其正常工作？我需要启用一些秘密设置吗？ Google+ 在 API 列表下的 google-developer-console 中启用。

感谢您的帮助，阿隆

【问题讨论】：

标签： javascript oauth-2.0 google-plus

【解决方案1】：

问题： .load 向 google 发现服务发出请求以加载 .JS。如果接收到的请求包含 api-key，服务将出错。（不知道这个库为什么会这样，好像是个bug？）

修复：

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

来自发现服务文档：您向 Discovery Service API 发出的请求不应包含 API 密钥。如果您确实提供了密钥，则请求将失败。

奇怪... :P

【讨论】：

哇.. 非常感谢，我怎么会发现呢！特别是因为在谷歌文档和示例中，他们确实提供了一个

【解决方案2】：

一点更新和更多解释。当前的Discovery Service 页面现在更加具体了。它们表明如果应用程序具有 Oauth2 令牌，则不需要 API 密钥值。 但是，我还发现，如果我有一个经过身份验证的用户，因此存在一个 Oauth2 令牌 (access_token)，发现服务将失败并出现 OP 中记录的错误。这似乎与文档相矛盾。

您可以通过以下方式在开发者工具控制台中查看令牌：

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

将其嵌入到您的 HTML 中的 <script>...</script> 或以其他方式调用的 .js 文件中。必须在gapi.load(...) 之后。如果在调用 gapi.load(...) 之前执行，它将停止脚本。

当然，要获得当前用户，这必须在用户通过身份验证之后。但是，如果用户尚未通过身份验证，它确实会返回一个对象。如果您在 Chrome 中，您可以在开发人员工具控制台窗口中展开对象，以获得身份验证响应中所有内容的漂亮大纲格式。

请注意，在成功验证之前 currentUser 是未定义的。由于这种“静默失败”，您应该使用条件语句来验证登录状态或当前用户是否存在于您的真实代码中。

为了完整起见，我的应用程序中的对象实例化过程大致如下：

1.) gapi.load(...) - 在这个 gapi.client 之后，gapi.auth2 和其他对象都可用。

2.) gapi.client.setApiKey("") 将被调用以“清除” api 密钥，如果它之前已为其他目的设置。

3.) gapi.auth2.init(...) - 在此之后，身份验证实例可通过 gapi.auth2.getAuthInstance 获得。

4.) 然后使用 auth 实例的 .signIn() 方法启动登录。 auth 实例将使用auth_instance = gapi.auth2.getAuthInstance(); 之类的东西进行实例化，如果您是这样做的，那么登录将是auth_instance.signIn()。

(...) - 表示需要几个参数。

我还发现 Google tictactoe example 作为示例很有用，并且是进一步工作的简单基础。

我希望这对某人有帮助！

【讨论】：

【解决方案3】：

你需要调用方法

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'
         });
    });
}

你可以看到这是做什么的here

【讨论】：