串接 Twitch 的 API

一個比較多驗證的 API，所以紀錄一下，不然以後要用又忘記怎麼用會很麻煩。

流程簡述

簡單來說，你要先拿到這三樣東西：

• access_token
• client_id
• client_secret

access_token 跟 client_id 都是要在 request header 裡面帶上的驗證碼，client_secret 是用來取得 access_token 的時候會用到。

流程：

1. 註冊 twitch 帳號
2. 在 twitch developer 網站上註冊一個 APP
3. 在 APP 頁面裡面取得 client_id 跟 client_secret（這個要記得案新密碼才會產生）
4. 取得驗證 token，有三種取得方式，我目前是用「Client credentials flow」。（每一種的差別可以參考 這裡）

取得驗證 token

備註：本來偷懶想用 Postman 來做，但似乎會被 twitch 擋，一直拿到 403 Invalid client_secret 的回傳值。所以這邊建議還是乖乖用 Node.js 來發會比好。

就是這個部分比較麻煩，所以特別解釋一下。

按照 官方文件 的說明，你要帶上 client_id 跟 client_secret 這兩個參數發一個 POST 請求到 https://id.twitch.tv/oauth2/token 這個網站，接著就會吐給你 access_token，就是這麼簡單，簡單到我搞了一個下午。

所以就寫一個 request 來發請求：

// 載入 request 套件
const request = require('request')
// 發出 post 請求
request.post(`https://id.twitch.tv/oauth2/token?client_id=${你的client_id}&client_secret=${你的cliend_secret}&grant_type=client_credentials`,
(error, response, body) => {
  console.log('statusCode:', response.statusCode)
  console.log('body:', body)
})

成功的話應該就會拿到 token：

{
  "access_token":"qwtjoiqjqwe2wqeqeyqieq", // 這裡是我亂打的
  "expires_in":4740717,
  "token_type":"bearer"
}

快樂發 request

最麻煩的部分完成後就能快樂串 API 了，這裡要串的是「最受歡迎的遊戲列表（Get Top Games）」，詳細說明可以 這裡

接下來就簡單紀錄一下，不多做解說。

備註：這裡把 access_token 跟 client_id 都藏在環境變數裡了，詳細可以參考這裡

// 載入 dotenv（取得環境變數）
require('dotenv').config()
// 發送 request 的模組
const request = require('request')
// 資料數量
const count = 20

request({
  method: 'GET',
  url: `https://api.twitch.tv/helix/games/top?first=${count}`,
  // 授權跟驗證 header
  headers: {
    // token 的格式一定要是「Bearer + ' ' + token」`(一定要大寫)
    "authorization": process.env.ACCESS_TOKEN,
    "Client-ID": process.env.CLIENT_ID
  }
}, (error, response, body) => {
  if(error) {
    console.log('oops! 發生了一些錯誤！')
    console.log(error)
    return
  }
  if(response.statusCode >= 200 && response.statusCode < 400) {
    console.log('statusCode:', response.statusCode)
    // 解析資料
    const res = JSON.parse(body)
    // 印出內容
    res.data.forEach(item => {
      console.log(Number(item.id), item.name)
    })
  } else {
    console.log('請求失敗')
    console.log(JSON.parse(body))
  }
})

輸出結果：

statusCode: 200
509658 Just Chatting
21779 League of Legends
491931 Escape from Tarkov
516575 VALORANT
511224 Apex Legends
32982 Grand Theft Auto V
29595 Dota 2
498566 Slots
512710 Call of Duty: Warzone
33214 Fortnite
513143 Teamfight Tactics
26936 Music
138585 Hearthstone
1869092879 FIFA 22
491487 Dead by Daylight
27471 Minecraft
513181 Genshin Impact
32399 Counter-Strike: Global Offensive
490100 LOST ARK
509660 Art

題外話，League of Legends 真的是歷久不衰阿。