需要帮助验证令牌 - 我无法读取 JSON 响应数据

Question

根据documentation 发送 Google OAuth2 令牌验证请求后，我在读取 JSON 响应数据时遇到问题。

这是 Google OAuth2 令牌验证请求：

$http.get('https://www.googleapis.com/oauth2/v1/tokeninfo', {params: {access_token: accessToken.token}})
                .success(function (data, status, headers, config) {
                    $log.info("sendValidationRequest() method: data: " + data);
                    deferred.resolve(data);
                    accessToken.state = getSession().state = $window.sessionStorage.state = "AccessTokenValidated";
                })
                .error(function (data, status, headers, config) {
                    //handle error
                });

因此，当我检查 JSON 响应数据对象时，我得到以下信息：

data.audience; // undefined
data.scope; // undefined
data.userid; // undefined
data.expires_in; //undefined

这是 JSON 响应数据在 Chrome 开发者工具中的样子：

我希望 JSON 响应数据是每个 documentation 的 JSON 数组。 JSON 响应数据似乎已编码。我该如何解决这个问题？

这是我的 HTTP 标头请求：

GET https://www.googleapis.com/oauth2/v1/tokeninfo?
access_token=ya29.AHES6ZQBj6feCrXuDoqwA3FpX1T1HO8fH1eWegJbiBTp7Cs HTTP/1.1
:host: www.googleapis.com
origin: http://localhost:8080
accept-encoding: gzip,deflate,sdch
accept-language: en-US,en;q=0.8
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
:path: /oauth2/v1/tokeninfo?  access_token=ya29.AHES6ZQBj6feCrXuDoqwA3FpX1T1HO8fH1eWegJbiBTp7Cs
accept: application/json, text/plain, */*
:version: HTTP/1.1
referer: http://localhost:8080/calendar-app/
:scheme: https
:method: GET

这是我的 HTTP 响应标头：

HTTP/1.1 200 OK
status: 200 OK
version: HTTP/1.1
access-control-allow-origin: http://localhost:8080
access-control-expose-headers: Cache-Control,Content-Encoding,Content-Length,Content-Type,Date,Expires,Pragma,Server
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-encoding: gzip
content-length: 182
content-type: application/json; charset=UTF-8
date: Sat, 17 Aug 2013 08:00:05 GMT
expires: Fri, 01 Jan 1990 00:00:00 GMT
pragma: no-cache
server: GSE
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

非常感谢您对解决我的问题的任何帮助。

谢谢。

经过一番研究，我发现这是AngularJS $http服务特有的问题；因为这不是 JQuery 的问题。这是我的验证访问令牌代码在 JQuery 中的样子：

function validateToken() {
        $.ajax({
            url: 'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=' + accessToken,
            data: null,
            success: function(response){
                console.log('Our token is valid. and response.audience value is defined.');
            },
            error: function(error) {
                console.log('Our token is not valid....');
            },
            dataType: "jsonp"
        });
    }

JQuery Ajax 请求头是不同的请求头不同于$http 服务请求头（见上）：

GET https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=ya29.AHES6ZTewZF3-aEJ3p8mdJahvTtZDNELYjpqLsGaB10Fnmk&callback=jQuery172036758901784196496_1376731301308&_=1376731301856 HTTP/1.1
:host: www.googleapis.com
accept-encoding: gzip,deflate,sdch
accept-language: en-US,en;q=0.8
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
:path: /oauth2/v1/tokeninfo?access_token=ya29.AHES6ZTewZF3-aEJ3p8mdJahvTtZDNELYjpqLsGaB10Fnmk&callback=jQuery172036758901784196496_1376731301308&_=1376731301856
accept: */*
:version: HTTP/1.1
referer: http://localhost:8080/calendar-app/google-oauth-test2.html
:scheme: https
:method: GET

当请求由 $http 服务发出时，Google Response 标头又会有所不同（见上文）：

HTTP/1.1 200 OK
status: 200 OK
version: HTTP/1.1
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-encoding: gzip
content-length: 235
content-type: text/javascript; charset=UTF-8
date: Sat, 17 Aug 2013 09:21:40 GMT
expires: Fri, 01 Jan 1990 00:00:00 GMT
pragma: no-cache
server: GSE
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

所以现在问题变成了，如何让 AngularJS $http 服务请求标头与 JQuery 的 AJAX 请求标头相匹配？还是有其他方法可以获得相同的结果；访问令牌验证成功后从谷歌获取正确的 JSON 数组对象是什么？

再次感谢您对此提供的任何帮助！

我正在更新帖子，因为似乎存在一些问题，即我是否在 URL 中有空格并且我没有显示原始 JSON 响应。我希望这张来自 chrome 开发者工具的图片可以解决这个问题。

Answer 1

经过大量研究，我能够通过使用 $http.jsonp() 方法而不是 $http.get() 方法来解决我的问题。我想我只是忽略了 $http.jsonp() 方法，因为在提出远程脚本请求时我是新手，并且真的不知道 JSONP 是什么。

所以现在我的新代码如下所示：

$http.jsonp('https://www.googleapis.com/oauth2/v1/tokeninfo',
                {
                    params: {
                        access_token: accessToken.token,
                        callback: 'JSON_CALLBACK'
                    }
                })
                .success(function (data, status, headers, config) {
                    // Do something successful.
                })
                .error(function (data, status, headers, config) {
                    // TODO: Handle the error
                });

我要感谢所有花时间查看我的问题以及回答我问​​题的人。我希望这可以帮助像我一样不熟悉 AngularJS、JSONP 和 Google OAuth2 的其他人。

谢谢！

Answer 2

奇怪响应的主要原因是 URL 之间有一个空格？和 access_token。

我无法为您提供更多帮助，为什么没有我可以运行的完整测试用例来重现您的问题 - 它不会在本地测试中为我重现。

Answer 3

使用 angular 1.2.x，这不会发生。显然，angular 1.0.x 正在预先发送 $http 请求，而谷歌的 tokeninfo 服务拒绝了这些请求。