I've gotten the Bearer Token, now how do I understand it, and how do I then use it

Question

My overall goal is to use an API to populate a google sites page with current bookings for study spaces. The service uses oath2 and Authorization: Bearer ACCESSTOKEN. I'm embedding Ajax - jQuery in the google site to do this.

So far, I can use the authorization endpoint to get the token back and send it to console.log. But how do I store it into a variable that I can then send along with my next request to the actual data endpoint? Obviously, I'm completely new to this and I'm stuck.

Here's what works

$.ajax
({
  type: "POST",
  url: "my.url/oauth/token",
data: 
{client_id:"715",
client_secret:"secret",
grant_type:"client_credentials"}, 
success: function(data){
    
  console.log(data)},
});

The console then shows something like the following data: "\"access_token\":\"78098453jkdg0ehgjf09etuca117bed9430740a08ac2b3e97c3d0\",\"expires_in\":3600,\"token_type\":\"Bearer\",\"scope\":\"rm_r sp_r\"}"

For the life of me, I can't figure out how to get that into a variable instead of the console. I've tried declaring a variable and storing it, and I've tried sessionStorage.setItem. My next step would be (I think) to store that response into a variable ACCESSTOKEN and then use it in my next request.

$.ajax
({
    type: "GET",
    url: "myurl.com/endpoint",
    beforeSend: function (xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer ACCESSTOKEN');
    },
        success: function(data) {console.log(data)
        },
});

At that point, I'll need to figure out to take it from the console again and have it output the data into a table or something.

Any and all help would be greatly appreciated! kmk

it is a response in json, you need to parse it to get the token - https://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript — OldProgrammer, Feb 14 '21 at 04:47

score 0 · Accepted Answer · answered Feb 14 '21 at 09:01

0

Try to parse it like here:

let accessToken;

$.ajax({
  type: 'GET',
  url: 'myurl.com/endpoint',
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer ACCESSTOKEN');
  },
  success: function(data) {
    const jsonRegexp = /(&quot;)\w+\1:\s?([\w\d]+|\1[\w\s\d]+\1)/g;
    const jsonPares = data.match(jsonRegexp);
    const parsedJSON = {};
    if (jsonPares?.length) {
      for (let i = 0; i < jsonPares.length; i++) {
        jsonPares[i] = jsonPares[i].replace(/&quot;/g, '');
        const splitted = jsonPares[i].split(/:\s?/g);
        if (splitted?.length === 2) {
          parsedJSON[splitted[0]] = splitted[1];
        }
      }
    }

    accessToken = parsedJSON?.['access_token'];
  },
});

answered Feb 14 '21 at 09:01

Mikhail Filchushkin

330
2
12

Thanks for helping me out! I'm a bit confused however. My request to the api for the token has to be a post, and, it is sending string data. So I don't think I can set dataType to json. So, I put the sucess: function(data) const... within the post request, right? I can't get it to work in jsfiddle.net It throws errors starting at if (jsonParse?. – kmk Feb 14 '21 at 20:01
It seems, jsfiddle uses an older version of ES. Replace optional chaining (?.) with full expression: instead of `jsonPares?.length` use `jsonParse && jsonParse.length`. And instead of `splitted?.length === 2` use `splitted && splitted.length === 2`. Last expression you can use without chaining `accessToken = parsedJSON.['access_token']`. – Mikhail Filchushkin Feb 15 '21 at 07:02
I'm sorry, the last one must be such: `accessToken = parsedJSON['access_token']`. – Mikhail Filchushkin Feb 15 '21 at 09:22

I've gotten the Bearer Token, now how do I understand it, and how do I then use it

1 Answers1