javascript - How to add OAuth token in js for twitch api - Stack Overflow

admin管理员组

文章数量:1434934

I work on a website atm and im not perfect with javascript i know the basics but not much more. But after 2days my Twitch script wroked perfect. Today morning everything worked fine but now the script simply dont work anymore.

I get this error. Its a basic error i think but i rly don know where i get the OAuth token and how i send him with js. {"error":"Unauthorized","status":401,"message":"OAuth token is missing"}

here is my full code client id is censored.

<script>
var streamers = ["rapteyy","stylerfn_", "jannisz","fleoxfn","leonflares","maestrofnbr","frayfn","flikk"];

 var twitchapi = "=" ;
  var tip = twitchapi + streamers;
    tip = tip.replace(/,/g, "&login=");

var twitchapi2 = "=" ;
  var tip2 = twitchapi2 + streamers;
    tip2 = tip2.replace(/,/g, "&user_login=");  

    var logo;
    var channel;
    var status;
    var title
    var image;
    var link;
    var viewer;

$.ajax({
    type: "GET",
    dataType: "json",
    url: tip,
 headers: {
   'Client-ID': '****'
 },
    success: function(response) {
 for (i = 0; i <= streamers.length; i++){
   logo = response.data[i].display_name;
   image = response.data[i].profile_image_url;
   channel = response.data[i].id;
   link = "/" + logo;

    $("#results").append("<div class='row toggleoffline' id = '" + logo + "''><div class ='box offlinebox' id = 'offline' onclick ='" + logo +  "()'><img class = 'imagesml' src ='" + image + "'><p class = 'name' >" + logo + " </p> <div class = 'stat'><p> </p><a class='twitch' href='" + link + "'><svg xmlns='' width='24' height='24' viewBox='0 0 24 24'><path d='M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z' fill-rule='evenodd' clip-rule='evenodd'/></svg></a></div></div></div>");

   $.ajax({
    type: "GET",
     dataType: "json",
     async: false,
    url: tip2,
 headers: {
   'Client-ID': '****'
 },

 success: function(response2) {
  for (var j = 0; j < streamers.length; j++) {
   if (response.data[i].id === response2.data[j].user_id)
   {status = "online"
    viewer = response2.data[j].viewer_count;
    title = response2.data[j].title;
    var child = document.getElementById(logo);
    var parent = child.parentNode;
    parent.removeChild(child);

  var iframetv = document.getElementById('iframe');
  var parenttv = iframetv.parentNode;
  parenttv.removeChild(iframetv);
  new Twitch.Embed("twitch-embed", {
        width: "100%",
        height: "100%",
        channel: logo,
        theme: "white",
        chat: "mobile",
        allowfullscreen: "false",
        layout: "video"
      });

    $("#results").prepend("<div class='row toggleonline' id ='toggleonline'><div class ='box onlinebox' id = 'online' onclick ='" + logo +  "()'><img class = 'imagesml' src ='" + image + "'><p class = 'name' >" + logo + "</p><div class = 'stat'><p> </p> <p class='view'>" + viewer + "</p><a class='twitch' href='" + link + "'><svg xmlns='' width='24' height='24' viewBox='0 0 24 24'><path d='M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z' fill-rule='evenodd' clip-rule='evenodd'/></svg></a></div></div></div>");
   }
 else {

      }
      }
  }

 });
 }
    }
});

 function toggle(e) {
    var all = document.getElementsByClassName('toggleoffline');

    for(var i = 0; i < all.length; i++) {
        // First make all of the elements with the same class hidden.
        if (all[i].style.display === 'none') {
            all[i].style.display = 'flex';
        }

        // Then make the clicked element visible.
        else {all[i].style.display = 'none';}
    }
}

function toggle2(f) {
    var all = document.getElementsByClassName('toggleonline');

      var all2 = document.getElementsByClassName('toggleoffline');

    for(var k = 0; k < all.length; k++) {
        // First make all of the elements with the same class hidden.
        if (all[k].style.display === 'none') {
            all[k].style.display = 'flex';
        }

        else {
        all[k].style.display = 'none'
     }
    }
}

function toggle3(g) {
    var all = document.getElementsByClassName('row');

    for(var l = 0; l < all.length; l++) {
        // First make all of the elements with the same class hidden.
        if (all[l] !== this) {
            all[l].style.display = 'flex';
        }

        // Then make the clicked element visible.
        g.style.visibility = 'visible';
    }
}
</script>``` 

I work on a website atm and im not perfect with javascript i know the basics but not much more. But after 2days my Twitch script wroked perfect. Today morning everything worked fine but now the script simply dont work anymore.

I get this error. Its a basic error i think but i rly don know where i get the OAuth token and how i send him with js. {"error":"Unauthorized","status":401,"message":"OAuth token is missing"}

here is my full code client id is censored.

<script>
var streamers = ["rapteyy","stylerfn_", "jannisz","fleoxfn","leonflares","maestrofnbr","frayfn","flikk"];

 var twitchapi = "https://api.twitch.tv/helix/users?login=" ;
  var tip = twitchapi + streamers;
    tip = tip.replace(/,/g, "&login=");

var twitchapi2 = "https://api.twitch.tv/helix/streams?user_login=" ;
  var tip2 = twitchapi2 + streamers;
    tip2 = tip2.replace(/,/g, "&user_login=");  

    var logo;
    var channel;
    var status;
    var title
    var image;
    var link;
    var viewer;

$.ajax({
    type: "GET",
    dataType: "json",
    url: tip,
 headers: {
   'Client-ID': '****'
 },
    success: function(response) {
 for (i = 0; i <= streamers.length; i++){
   logo = response.data[i].display_name;
   image = response.data[i].profile_image_url;
   channel = response.data[i].id;
   link = "https://www.twitch.tv/" + logo;

    $("#results").append("<div class='row toggleoffline' id = '" + logo + "''><div class ='box offlinebox' id = 'offline' onclick ='" + logo +  "()'><img class = 'imagesml' src ='" + image + "'><p class = 'name' >" + logo + " </p> <div class = 'stat'><p> </p><a class='twitch' href='" + link + "'><svg xmlns='http://www.w3/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z' fill-rule='evenodd' clip-rule='evenodd'/></svg></a></div></div></div>");

   $.ajax({
    type: "GET",
     dataType: "json",
     async: false,
    url: tip2,
 headers: {
   'Client-ID': '****'
 },

 success: function(response2) {
  for (var j = 0; j < streamers.length; j++) {
   if (response.data[i].id === response2.data[j].user_id)
   {status = "online"
    viewer = response2.data[j].viewer_count;
    title = response2.data[j].title;
    var child = document.getElementById(logo);
    var parent = child.parentNode;
    parent.removeChild(child);

  var iframetv = document.getElementById('iframe');
  var parenttv = iframetv.parentNode;
  parenttv.removeChild(iframetv);
  new Twitch.Embed("twitch-embed", {
        width: "100%",
        height: "100%",
        channel: logo,
        theme: "white",
        chat: "mobile",
        allowfullscreen: "false",
        layout: "video"
      });

    $("#results").prepend("<div class='row toggleonline' id ='toggleonline'><div class ='box onlinebox' id = 'online' onclick ='" + logo +  "()'><img class = 'imagesml' src ='" + image + "'><p class = 'name' >" + logo + "</p><div class = 'stat'><p> </p> <p class='view'>" + viewer + "</p><a class='twitch' href='" + link + "'><svg xmlns='http://www.w3/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2.149 0l-1.612 4.119v16.836h5.731v3.045h3.224l3.045-3.045h4.657l6.269-6.269v-14.686h-21.314zm19.164 13.612l-3.582 3.582h-5.731l-3.045 3.045v-3.045h-4.836v-15.045h17.194v11.463zm-3.582-7.343v6.262h-2.149v-6.262h2.149zm-5.731 0v6.262h-2.149v-6.262h2.149z' fill-rule='evenodd' clip-rule='evenodd'/></svg></a></div></div></div>");
   }
 else {

      }
      }
  }

 });
 }
    }
});

 function toggle(e) {
    var all = document.getElementsByClassName('toggleoffline');

    for(var i = 0; i < all.length; i++) {
        // First make all of the elements with the same class hidden.
        if (all[i].style.display === 'none') {
            all[i].style.display = 'flex';
        }

        // Then make the clicked element visible.
        else {all[i].style.display = 'none';}
    }
}

function toggle2(f) {
    var all = document.getElementsByClassName('toggleonline');

      var all2 = document.getElementsByClassName('toggleoffline');

    for(var k = 0; k < all.length; k++) {
        // First make all of the elements with the same class hidden.
        if (all[k].style.display === 'none') {
            all[k].style.display = 'flex';
        }

        else {
        all[k].style.display = 'none'
     }
    }
}

function toggle3(g) {
    var all = document.getElementsByClassName('row');

    for(var l = 0; l < all.length; l++) {
        // First make all of the elements with the same class hidden.
        if (all[l] !== this) {
            all[l].style.display = 'flex';
        }

        // Then make the clicked element visible.
        g.style.visibility = 'visible';
    }
}
</script>``` 

• javascript
• twitch
• helix

Share Improve this question Follow asked May 6, 2020 at 23:46 coreartzcoreartz 1111 gold badge11 silver badge22 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Might want to check their documentation/release notes as they have updated their APIs in full last night.

That error 'OAuth token is missing' is probably because you're missing an authentication step in your code. You need to supply the access token in the authorization header. This step should be performed on the server.

With the latest changes to the API everything now requires both the Client-ID and OAuth before it will return the requested values.

https://discuss.dev.twitch.tv/t/requiring-oauth-for-helix-twitch-api-endpoints/23916

Reviewing your code you're missing the OAuth token. You will need to generate the OAuth token and add it to your header before making the requests.

https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow

Try placing

    $.ajax({
    type: "GET",
    dataType: "json",
    url: tip,
 headers: {
   'Client-ID': '****'
 },

with

    $.ajax({
    type: "GET",
    dataType: "json",
    url: tip,
 headers: {
   'Client-ID: CLIENT-ID_HERE',
   'Authorization: Bearer TOKEN_HERE'
 },

Javascript isn't my strong point but adding the token to the header will get it working.

本文标签： javascriptHow to add OAuth token in js for twitch apiStack Overflow