How do I avoid this X-Frame-Options SAMEORIGIN error when running the Google "Hello Analytics" API tutorial?

Question

I've been trying to run the https://developers.google.com/analytics/solutions/articles/hello-analytics-api tutorial to get up and running with pulling data programmatically from Google Analytics.

I've copied the sample files exactly, but when I access them via localhost in Chrome, I get the following error in the JavaScript console, and get redirected to about:blank :

Refused to display 'https://accounts.google.com/o/oauth2/auth?client_id=363192057646-fbj7q1oais...%2Flocalhost&response_type=token&state=327475409%7C0.2024869166&authuser=0' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

I've tried all manner of tweaks but can't get this error to go away. Hope someone can assist (or indeed just direct me to a simple, working, Javascript example for accessing the Google Analytics API.

Answer 1

Please check the Authorized JavaScript origins url in the Google API console in your Oauth Settings. This must be where you are authorising the javascript.

Answer 2

I was having the same issue yesterday but then I realised I was using the wrong Client ID on my Credentials.

You should double check if you created a 'Client ID for web application' on APIs & auth > Credentials. And then use that Client ID.

I my case, I wrongly created a 'Service Account' first and used that Client ID. Then I realised the mistake and created a 'Web Application' and replaced the Client ID on hello_analytics_api_v3_auth.js (according to the tutorial on https://developers.google.com/analytics/solutions/articles/hello-analytics-api).

Btw, don't forget to create a Public API Access key.

EDIT: if you are using the google example fix the following function:

function handleAuthResult(authResult) {
  if (authResult) {
    gapi.client.load('analytics', 'v3', handleAuthorized);
  } else {
    handleUnauthorized();
  }
}

On the if statement, change to:

if (authResult && !authResult.error)

So you would end up with:

function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    gapi.client.load('analytics', 'v3', handleAuthorized);
  } else {
    handleUnauthorized();
  }
}

My colleague found the bug and made a pull request to fix it. I hope that sorts the issue now. It sorted for me ;-)

Answer 3

I was having the same issue with a Fusion table example I found online.

None of the answers I found online were useful at all but I finally solved the issue as follows:

Open the dev console in Chrome which shows the error and the url it is trying to access, open the Url in a new tab.

The page shows this:

400. That’s an error.
Error: invalid_request
Parameter not allowed for this message type: client_secret 

So I edited the code:

  function auth(immediate) {
    gapi.auth.authorize({
      client_id: clientId,
      <!--client_secret: clientSecret,-->
      scope: scopes,
      immediate: immediate
    }, handleAuthResult);
  }

Et voila (: