如何在 js 中为 twitch api 添加 OAuth 令牌答案

【问题标题】：How to add OAuth token in js for twitch api如何在 js 中为 twitch api 添加 OAuth 令牌
【发布时间】：2020-05-06 23:46:26
【问题描述】：

我在网站 atm 上工作，但我对 javascript 并不完美，我知道基础知识，但不多。但 2 天后，我的 Twitch 脚本完美运行。今天早上一切正常，但现在脚本不再工作了。

我收到此错误。我认为这是一个基本错误，但我不知道我在哪里获得 OAuth 令牌以及我如何用 js 发送给他。 {"error":"Unauthorized","status":401,"message":"OAuth token is missing"}

这是我的完整代码客户端 ID 已被审查。

<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.org/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.org/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 api twitch helix

【解决方案1】：

可能需要查看他们的文档/发行说明，因为他们昨晚已全面更新了 API。

“缺少 OAuth 令牌”错误可能是因为您的代码中缺少身份验证步骤。您需要在授权标头中提供访问令牌。此步骤应在服务器上执行。

【讨论】：

【解决方案2】：

随着 API 的最新更改，现在所有内容都需要 Client-ID 和 OAuth 才能返回请求的值。

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

查看您的代码，您缺少 OAuth 令牌。在发出请求之前，您需要生成 OAuth 令牌并将其添加到您的标头中。

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

尝试放置

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

与

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

Javascript 不是我的强项，但将令牌添加到标题中会使其正常工作。

【讨论】：