Search code examples
fetchgoogle-analytics-apivelo

Fetching resources from google analytics services using HTTPS by Wix fetch function


How should I fetch data using Wix-fetch function?

I followed this google analytics API tutorial, this tutorial using post function for getting JSON data, I used WIX fetch function to get JSON file, but the return object is undefined. What did I miss?

fetch( "https://accounts.google.com/o/oauth2/token", {
  "method": "post",
  "headers": {
    "Content-Type": 'application/x-www-form-urlencoded'
  },
 'body' : JSON.stringify({
    'grant_type': 'authorization_code',
    'code': URLCode,
    'client_id': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
    'client_secret': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    'redirect_uri': 'https://www.mydomain.or/ga/oauth2callback'
  })
} )
  .then( (httpResponse) => {
    if (httpResponse.ok) {
      return httpResponse.json();
    } else {
      return Promise.reject("Fetch did not succeed");
    }
  } )
  .then( (json) => console.log(json.someKey) )
  .catch(err => console.log(err));

UPDATE

STEP 1 I used this URL to generate the CODE

wixLocation.to("https://accounts.google.or/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics%20https://www.googleapis.com/auth/userinfo.email&redirect_uri=https://www.mydomain.or/ga/oauth2callback/&access_type=offline&response_type=code&client_id=XXXXXXXXXXXXXXXXXX")

I get the CODE from the callback URL enter image description here

Step 2 I used this code for the HTTP postman request

enter image description here

The redirect URI in step 1 and 2 is the following (the second one): enter image description here


Solution

  • Step 1: There needs to be an exact match between the redirect URI configured in the client id in the google developers console and the URL to get the code authorization. enter image description here The URL should be built as shown in the tutorial you linked (if you need a refresh token, you can add the access_type=offline)

    https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics&redirect_uri=<redirect_uri>&response_type=code&client_id=<client_id>

    After you enter the URL, you will be provided with an authorization window. Once you authorize, you will be redirected to the <redirect_uri> you provided earlier. You will find the code as the first parameter in the URL query. e.g. <redirect_uri>/?code=<auth_code> ...

    Since the access token is for one-time use only, if you will need it again, you will have to get a new <auth_code>.

    Step 2 (Postman query example): enter image description here

    If you got the access_token correctly and you want to check now with WIX. Get a new <auth_code> (as said, the access token is given once) and set the code as follows:

        import { fetch} from 'wix-fetch';
        
        $w.onReady(function () {
        
        const data = `grant_type=authorization_code&code=<your_authorization_code>&client_id=<your_client_id>&client_secret=<your_client_secret>&redirect_uri=<your_redirect_uri>`;
        
        fetch("https://accounts.google.com/o/oauth2/token", {
        "method": "post",
        "headers": {
        "Content-Type": 'application/x-www-form-urlencoded'
        },
        'body': data
        })
        .then((httpResponse) => {
        if (httpResponse.ok) {
        return httpResponse.json();
        } else {
        
        return Promise.reject("Fetch did not succeed");
        }
        })
        .then((json) => console.log(json.access_token))
        .catch(err => console.log(err));
        });
    
    

    enter image description here