twitch api 라이브 정보 받아오기 with JavaScript

https://dev.twitch.tv/console

Twitch

 

트위치 디벨로퍼는 트위치 계정으로 로그인을 하면 이용할 수 있습니다.
하지만 api 를 이용하기 위해서는 2차 인증을 등록해야 합니다.

 

로그인을 하고 2차 인증까지 등록했다면 응용 프로그램을 등록합니다.

앱 이름은 tw-api-test-01 과 같이 프로젝트를 설명할 이름,
OAuth redirection url은 http://localhost 로 설정하여 로컬에서 테스트할 수 있도록 합니다.  

관리 버튼을 누릅니다.

api 요청을 할 때 전달해야하는 클라이언트 id와 신규 시크릿을 생성하여 저장합니다.

Access Token 발급이 필요합니다.

https://dev.twitch.tv/docs/authentication/getting-tokens-oauth/#oauth-client-credentials-flow

Getting OAuth Access Tokens

api 요청을 통해 Access Token발급이가능합니다. 세 가지 종류가 있습니다.

Implicit Grant Flow: 프론트에서 요청할 때

Authorization Code Grant Flow: 서버에서 요청 + 사용자 데이터가 필요

Client Credentials Grant Flow: 서버에서 요청 + 사용자 데이터 필요 없음

 

요약하자면 이런 느낌 같습니다.

따라서 express로 서버를 구현한 저는 Client Credentials Grant Flow의 Access Token을 발급받겠습니다.

https://id.twitch.tv/oauth2/token 주소로 

client_id, client_secret, grant_type 를 보내주면 됩니다.

ex1) https://id.twitch.tv/oauth2/token?client_id=hof5gwx0su6owfnys0yan9c87zr6t&client_secret=41vpdji4e9gif29md0ouet6fktd2&grant_type=client_credentials

ex)2 https://id.twitch.tv/oauth2/token?client_id=클라이언트_아이디&client_secret=클라이언트_시크릿&grant_type=client_credentials

 

  useEffect(() => {
    (async () => {
      const request = await axios.post("https://id.twitch.tv/oauth2/token?");
      console.log(request);
    })();
  }, []);

post 요청을 보내고 console.log로 결과를 출력 해봅니다.

이제 발급받은 access_token을 이용하여 twitch api를 이용할 수 있을 듯 합니다.

---

채널의 라이브 정보를 어디서 구할 수 있는지 레퍼런스를 살펴봅시다.

https://dev.twitch.tv/docs/api/reference/

Reference

채널의 라이브 정보는 search-channels에서 확인할 수 있습니다.

https://dev.twitch.tv/docs/api/reference/#search-channels

Reference

GET요청을 보낼 때는 아래와 같은 header를 포함시켜야 합니다.

curl -X GET 'https://api.twitch.tv/helix/search/channels?query=a_seagull&live_only=true' \
-H 'Authorization: Bearer 2gbdx6oar67tqtcmt49t3wpcgycthx' \
-H 'Client-Id: wbmytr93xzw8zbg0p1izqyzzc5mbiz'

저는 이렇게 작성했습니다.

 

  const twitch_channels_base_url = "https://api.twitch.tv/helix/search/channels";

  const headers = {

    Authorization: `Bearer ${twitch_access_token}`,

    "Client-Id": `${twitch_client_id}`,

  };

  const params = {

    query: channel_id,

  };

  useEffect(() => {

    (async () => {

      try {

        const request = await axios.get(`${twitch_channels_base_url}`, { headers, params });

        console.log(request);

      } catch (error) {

        console.error(error);

      }

    })();

  }, []);

 

 

'abc' 검색 결과

 

20개가 검색 결과 디폴트여서 20개만 나타났습니다.