[Next] 티스토리 OPEN API next.js 에서 적용하기(1)

open Api

 

안녕하세요. 오늘은 next.js 프로젝트에서 티스토리 open api를 사용해서 블로그에 글 목록, 정보 등을 받아 보도록 해보겠습니다. 티스토리 open api 정리가 잘 돼있어서 어렵지 않게 적용했던가 같은데요. 시작해 보겠습니다!

 

앱 애플리케이션 등록하기

---

https://www.tistory.com/guide/api/manage/register

TISTORY

위에 사이트에 접속해줍니다.

 

오픈 API 이용약관에 대해 동의를 눌러줍니다. 서비스 명과 설명을 잘 적어주고 서비스 URL에 해당 서비스 URL을 적어 주고, CallBack URL에는 데이터를 요청해서 받은 다음 어디로 URL로 보낼지 적어주는 곳입니다. 

 

앱을 등록하면 App ID 키와 Secret Key을 얻게 됩니다.

 

App ID 키와 Secret Key를 이용해서 access_token을 얻을 것 이기 때문에 따로 저장해 놓습니다.

 

Authentication Code 발급

---

https://tistory.github.io/document-tistory-apis/

소개 · GitBook

위에서 open api 에 대한 자세한 내용들이 있습니다. 

 

access_token을 Next.js 프로젝트에 넣어 놓고 요청할 때마다 access_token을 이용해서 글 목록과 정보들을 뽑아 올 수 있습니다. 하지만 access_token을 받기 위해서는 Authentication code를 발급받고 Authentication code을

위 설명에 나온 것처럼 

 

https://www.tistory.com/oauth/authorize?client_id=
6da8efa61dfc0e6a3e8c008209d7e1b0
&redirect_uri=http://localhost:3000
&response_type=code
&state={state-param}

 

이렇게 적어줍니다. 하나씩 보자면 

 첫번째로, client_id는 아까 받았던 App ID를 {client-id} 이곳을 지우고 넣어줍니다.

 두번째로, readirect_uri 도 아까 적어넣어준 url을 넣어주시면 됩니다.

 세 번째로, response_type=code 은 그대로 넣어주시면 됩니다.

 네 번째로, state는 사이트 간 요청 위조 공격을 보호하기 위한 임의의 고유한 문자열이고 필수는 아닙니다.

 

위에 코드를 브라우저(크롬, 사파리...)에 URL 적는 부분에 그대로 복붙 해줍니다.

 

그럼 제가 만든 앱 애플리케이션에서 기능을 허가할 건지 물어보는데 허가하기를 클릭해줍니다.

 

그러면 제가 적어준 URL로 리다이렉트 되면서 Authorization code 값을 주게 됩니다. 이것은 access_token을 얻을 때 필요하기 때문에 다른 키들과 같이 따로 저장해 줍니다. Authorization code는 expired 기간이 있기 때문에 받고 나서 바로 access_token을 받아주는 것이 좋습니다.

 

access_token 받기

---

 

access_token을 받기 위해서는 https://www.tistory.com/oauth/access_token 에 get method 요청을 해줘야 하는데요. 따로 서버를 만들지 않고 간편하게 PostMan을 이용해서 요청을 해서 토큰을 발급받아 보겠습니다.

 

 

만일 포스트맨이 안 깔려 있다면 아래 링크에 접속해서 다운로드하여주시면 됩니다.

https://www.postman.com/downloads/

Download Postman | Get Started for Free

 

일단 간단하게 토큰 받는 법만 보여드리겠습니다. 위에 보이는 화면에서 New > HTTP Request을 클릭해줍니다.

 

그런 다음 get method로 선택하고(New로 만들면 기본값이 Get Method입니다) 아래 코드를 넣어줍니다.

 

https://www.tistory.com/oauth/access_token?
client_id={client-id}
&client_secret={client-secret}
&redirect_uri={redirect-uri}
&code={code}
&grant_type=authorization_code

 첫 번째로, client-id는 아까 저장해 놓은 App ID 넣어줍니다.

 두 번째로, client-secret 은 secret key를 넣어줍니다.

 세 번째로, rediret_uri는 아까 callback url를 넣어줍니다.

 네 번째로, code 값에 아까 받은 Authorization code를 넣어주고 grant_type 은 그대로 넣어줍니다.

 

아래는 예시입니다.

https://www.tistory.com/oauth/access_token?client_id=6da8efa61dfc0e6a3e8c008209d7e1b0&client_secret=6da8efa61dfc0e6a3e8c008209d7e1b0dda2351fd55b9a35b04133ba5b120b80bb993c1e
&redirect_uri=http://localhost:3000
&code=60926a8198aac7cb1ec0b0e712120470278f7f78961359d812cfdbe811cf2b3c8ebe55d8
&grant_type=authorization_code

보기 편하게 enter키를 넣었지만 url에서는 enter 키 부분을 다 지워주고 넣어주셔야 합니다.

 

그렇지 않으면 

이런 오류가 발생합니다.

 

성공하게 되면 

access_token을 받은 것을 확인할 수 있습니다. access_token 은 한번 받으면 expired 기간이 따로 없어서 또 받을 필요가 없습니다.

그러므로 토큰이 노출이 되면 안 되므로 Next 프로젝트에서 env 파일에 저장해줍니다.

 

다음 시간에 는 이 access_token을 이용해서 게시글의 제목과 태그 내용 등등... 가져오는 것을 해보겠습니다.

감사합니다