Search code examples
javascriptgoogle-bigquerygoogle-identitygoogle-api-javascript-client

authenticate bigquery javascript api

I am putting together a web app where I would like to display some bigquery data on my webpage

However, I am having trouble setting up the authentication for bigquery's javascript api. Most of the examples and resources, including Google's own docs dont make use of the new Google Identity Services.

So far I have html that looks like:

<html>
  <head>
    <title>Hello, world!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://apis.google.com/js/api.js"></script>
    <script src="https://accounts.google.com/gsi/client"></script>
  </head>
  <body>
    <button onclick="client.requestAccessToken();">Authorize me</button>
    <script type="text/javascript" src="interaction.js"></script>
  </body>
</html>

and javascript that looks like

//authorize
const client = google.accounts.oauth2.initTokenClient({
    client_id: 'my_id',
    scope: 'https://www.googleapis.com/auth/bigquery',
    callback: (tokenResponse) => {
        if (tokenResponse && tokenResponse.access_token) {
            console.log("token response")
            gapi.client.load('bigquery', 'v2', sendQuery)
        }
    },
});

//query
function sendQuery() {
    let request = gapi.client.bigquery.jobs.query({
        'query': "SELECT h3_id FROM `...` limit 10",
        'timeoutMs': 30000,
        'datasetId': "my_dataset",
        'projectId': "my_project",
        'useLegacySql': false
    });
    request.execute(response => {
        console.log(response)
    });
}

Ive replaced clientid and BQ parameters with placeholders for this stack post.

From what I can tell, the code doesn't run past gapi.client.load('bigquery', 'v2', sendQuery). But strangely I am not getting any errors in developer's console - making this hard to debug. Am I missing an additional step in the auth?

I have loosely been trying to follow this tutorial but adapt it with Google's Identity Services

Solution

  • You need to load gapi client with gapi.load('client') before using gapi.client.

    I could make your code work by adding:

    gapi.load('client');

    at the very top of you javascript (before const client = ...)