Question

我是JavaScript和Google BigQuery的新手，所以请原谅我的无知。我正在尝试编写一个javascript来从BigQuery上的一个公共数据库中收集数据。我在Obtaining BigQuery data from JavaScript code（我在下面粘贴的代码）找到了答案，但是当我将文件保存为.html时，用我的客户端ID和项目编号替换，并试图运行它，我得到了授权按钮和页面标题。我单击“授权”按钮，它会消失，但不会运行任何查询。还有什么东西我应该替换或者还有什么我需要做的工作吗？我将文件保存为.html，也许我应该用不同的扩展名保存它？

我尝试了在Google开发者控制台中创建客户端ID的所有三种方法，所有这些都给了我相同的行为。

我确信这只是我忘记的傻事，但任何建议都会非常感激。

以下是Ryan Boyd给出的代码，我无法正常工作（这肯定是我的错）：

<html>
<head>
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['geochart']});
</script>
<script>
  // UPDATE TO USE YOUR PROJECT ID AND CLIENT ID
  var project_id = '605902584318';
  var client_id = '605902584318.apps.googleusercontent.com';

  var config = {
    'client_id': client_id,
    'scope': 'https://www.googleapis.com/auth/bigquery'
  };

  function runQuery() {
   var request = gapi.client.bigquery.jobs.query({
      'projectId': project_id,
      'timeoutMs': '30000',
      'query': 'SELECT state, AVG(mother_age) AS theav FROM [publicdata:samples.natality] WHERE year=2000 AND ever_born=1 GROUP BY state ORDER BY theav DESC;'
    });
    request.execute(function(response) {     
        console.log(response);
        var stateValues = [["State", "Age"]];
        $.each(response.result.rows, function(i, item) {
          var state = item.f[0].v;
          var age = parseFloat(item.f[1].v);
          var stateValue = [state, age];
          stateValues.push(stateValue);
        });  
        var data = google.visualization.arrayToDataTable(stateValues);
        var geochart = new google.visualization.GeoChart(
        document.getElementById('map'));
        geochart.draw(data, {width: 556, height: 347, resolution: "provinces", region: "US"});
    });
  }

  function auth() {
    gapi.auth.authorize(config, function() {
        gapi.client.load('bigquery', 'v2', runQuery);
        $('#client_initiated').html('BigQuery client initiated');
    });
    $('#auth_button').hide();
  }
</script>
</head>

<body>
<h2>Average Mother Age at First Birth in 2000</h2>
<button id="auth_button" onclick="auth();">Authorize</button>
<button id="query_button" style="display:none;" onclick="runQuery();">Run Query</button>
<div id="map"></div>
</body>
</html>

更新：我在Chrome中打开了开发者工具，并在控制台中发现了此错误：

无法在'DOMWindow'上执行'postMessage'：目标原点 provided（'file：//'）与收件人窗口的来源不匹配（ '零'）

我按照以下说明在我的Google Developer控制台中进行了编辑：Google API in Javascript

仍然是同样的错误。

Answer 1

看起来您可能需要添加：

$('#query_button').show();

到auth()函数的底部

像这样：

function auth() {
    gapi.auth.authorize(config, function()
     {
        gapi.client.load('bigquery', 'v2', runQuery);
        $('#client_initiated').html('BigQuery client initiated');
     });
    $('#auth_button').hide();
    $('#query_button').show();
}

Answer 2

搜索到的错误，我找到了这个页面：

Google API in Javascript

根据您收到的错误，我的猜测是您在Google API控制台上没有正确配置您的Javascript Origin，并且/或者您正在尝试运行脚本从文件系统而不是通过Web服务器，甚至是在localhost上运行的服务器。我所知道的Google API客户端不接受来自文件系统或未配置为根据提供的客户端ID请求授权的任何域的授权请求。 - @ citizenslave

Answer 3

事实证明这是事情的组合。我没有正确配置Javascript源，我没有查询所需的所有范围，我不能在浏览器中打开html文件，我需要创建一个HTTP服务器。

所以我将代码更改为：

<html>
<head>
  <script src="https://apis.google.com/js/client.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load('visualization', '1', {packages: ['geochart']});
</script>
  <script>
  // UPDATE TO USE YOUR PROJECT ID AND CLIENT ID
var project_id = 'XXXXXXXXXXXX';
var client_id = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com';

var config = {
  'client_id': client_id,
  'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/bigquery'
};

function runQuery() {
  var request = gapi.client.bigquery.jobs.query({
    'projectId': project_id,
    'timeoutMs': '30000',
    'query': 'SELECT state, AVG(mother_age) AS theav FROM [publicdata:samples.natality] WHERE year=2000 AND ever_born=1 GROUP BY state ORDER BY theav DESC;'
  });
  request.execute(function(response) {     
    console.log(response);
    var stateValues = [["State", "Age"]];
    $.each(response.result.rows, function(i, item) {
      var state = item.f[0].v;
      var age = parseFloat(item.f[1].v);
      var stateValue = [state, age];
      stateValues.push(stateValue);
    });  
    var data = google.visualization.arrayToDataTable(stateValues);
    var geochart = new google.visualization.GeoChart(
      document.getElementById('map'));
    geochart.draw(data, {width: 556, height: 347, resolution: "provinces", region: "US"});
  });
}

function auth() {
  gapi.auth.authorize(config, function() {
    gapi.client.load('bigquery', 'v2', runQuery);
    $('#client_initiated').html('BigQuery client initiated');
  });
  $('#auth_button').hide();
}
</script>
  </head>

  <body>
  <h2>Average Mother Age at First Birth in 2000</h2>
  <button id="auth_button" onclick="auth();">Authorize</button>
  <button id="query_button" style="display:none;" onclick="runQuery();">Run Query</button>
  <div id="map"></div>
  </body>
  </html>

我将Google Javascript Origins网址修改为http://localhost:8888/，我的重定向uri为http://localhost:8888/oauth2callback，打开命令提示符，从我的html文件目录中运行此命令：

python -m SimpleHTTPServer 8888

然后在我的浏览器中转到localhost：8888并点击我的html文件。

非常感谢所有的反馈！

完美无缺！现在为了我的目的改变查询！

使用JavaScript从BigQuery获取信息

3 个答案: