인스타그램 API 연결하기 - 2편 : API 연결

안녕하세요. 다시 돌아온 맛도리 탐정입니다.

이번 편에서는 이전에 포스팅을 진행했던 Next.js + 인스타그램 API를 마무리 짓도록 하겠습니다. 

@matdori_tamjeong

---

 

4. 테스트 사용자 인증

순서에 따라 아래의 인증 창 URL을 구성합니다. 

https://api.instagram.com/oauth/authorize
  ?client_id={app-id}
  &redirect_uri={redirect-uri}
  &scope=user_profile,user_media
  &response_type=code

 

• app-id

• redirect-uri

표시된 부분 (클라이언트 OaAuth 리디렉션 URI | 콜백 URL 승인 취소 | 데이터 삭제 요청 URL)에

배포된 사이트의 주소를 입력해 주고 하단의 변경 내용 저장 버튼을 클릭해 줍니다. 

 

그리고 해당 내용을 바탕으로 인증 창의 URL을 구성해 봅니다. 

새 브라우저 창을 열고 인증 창 URL을 검색하면 아래와 같은 화면이 나타날 것입니다.

 

인증이 성공하면 페이지가 리디렉션 URI

로 이동되고 인증 코드가 포함된 URI를 확인할 수 있습니다.

 

예시 : https://matdori.codedream.co.kr/?code=AQCxfcEmp7rP8UjRAmYESkT...#_

다음 단계에서 사용하기 위해 이? code=이 부분을 기억해 둡니다#

해당 부분에서 얻은 인증 코드는 단기 실행 코드임으로 1시간 동안만 유효합니다. 

---

5. 코드를 토큰으로 교환

코드를 토큰으로 교환하기 위해서 포스트맨을 켜 POST요청을 API로 전송합니다.

• POST URL : https://api.instagram.com/oauth/access_token
• 매개변수 (모든 매개변수 필수)

매개변수	설명	이미지
client_id	앱 대시보드 > 제품> Instagram Basic Display > 기본 표시 > Instagram 앱 ID
client_secret	앱 대시보드 > 제품> Instagram Basic Display > 기본 표시 > Instagram 앱 시크립 코드
code	redirect_uri로 리디렉션 했을때(4번 스탭) 에서의 code 매개변수로 전달된 인증 코드
grant_type	이 값을 authorization_code 설정	authorization_code
redirect_uri	사용자가 인증코드를 발급 할때 Facebook에 전달한 리디렉션 URI

응답이 성공하면 아래 사진과 같이 API는 액세스 토큰과 사용자 ID를 포함한 JSON을 반환합니다.

반환된 두 가지 값을 기억해 둡니다.

{
  "access_token": "IGQVJ...",
  "user_id": 17841405793187218
}

---

6. 장기 실행 토큰 발급

저희가 발급받은 액세스 토큰은 단기 실행 토큰(1시간 유효)입니다.

때문에 단기 실행 토큰을 장기 실행 토큰으로의 교환이 필요합니다.  장기 실행 토큰은 60일 동안 유효합니다. 

 

다음 요청으로 장기 실행 토큰을 발급받습니다.

• GET URL : https://graph.instagram.com/access_token 

쿼리문자열 매개변수	설명	이미지
grant_type	이 값을 ig_exchange_token 설정	ig_exchange_token
client_secret	앱 대시보드 > 제품> Instagram Basic Display > 기본 표시 > Instagram 앱 시크립 코드
access_token	코드를 토큰으로 교환했을 때(5번 스탭) 반환된 access_token 값

 

응답이 성공하면 아래와 같은 값을 반환합니다. 

{
  "access_token":"{long-lived-user-access-token}",
  "token_type": "bearer",
  "expires_in": 5183944  // Number of seconds until token expires
}

 

반환받은 토큰은 발급받은 순간부터 60일이 유효하고,

만료 기한 이전에 새로고침이 가능하며 60일이 지난 이후에는 다시 발급을 받아야 합니다. 

 

새로고침을 하기 위해서는 아래와 같이 요청합니다. 

• GET URL : https://graph.instagram.com/refresh_access_token 

쿼리문자열 매개변수	설명	이미지
grant_type	이 값을 ig_refresh_token 설정	ig_refresh_token
access_token	코드를 토큰으로 교환했을 때(5번 스탭) 반환된 access_token 값

 

응답이 성공하면 아래와 같은 값을 반환합니다. 

{
  "access_token":"{long-lived-user-access-token}",
  "token_type": "bearer",
  "expires_in": 5183944 // Number of seconds until token expires
}

---

7. 사용자 미디어 가져오기

이제 인스타그램에 등록된 미디어를 가져올 수 있습니다. 

• GET URL : https://graph.instagram.com/me/media

쿼리문자열 매개변수	설명	이미지
fields	미디어에 요청할 값  아래 링크에서 세부적인 내용 참고 https://developers.facebook.com/docs/ instagram-basic-display-api/reference/media ?locale=ko_KR#fields
access_token	코드를 토큰으로 교환했을 때(5번 스탭) 반환된 access_token 값

 

저는 아래 사진과 같은 JSON 결과를 반환받을 수 있었습니다. 

 

또한, 사진첩 미디어에 대한 이미지, 동영상 컬렉션을 가져오고 싶다면 아래와 같이 요청할 수 있습니다.  

• GET URL : https://graph.instagram.com/{가져오고 싶은 media-id}/children
  

media-id란?

미디어를 가져오면서 id값을 얻을 수 있는데, 이 값은 각 게시물마다 고유한 값임으로
이 값을 활용해서 해당 게시물의 미디어 컬렉션을 가져옵니다. 

쿼리문자열 매개변수	설명	이미지
fields	미디어에 요청할 값  아래 링크에서 세부적인 내용 참고 https://developers.facebook.com/docs/ instagram-basic-display-api/reference/media ?locale=ko_KR#fields
access_token	코드를 토큰으로 교환했을 때(5번 스탭) 반환된 access_token 값

 

저는 아래와 같은 반환값을 얻을 수 있었습니다.

---

이렇게 해서 인스타그램 API와 Nextjs를 사용하여 [맛도리탐정]을 제작하게 되었습니다. 

[맛도리탐정]은 아래 링크에서 확인할 수 있습니다. (정말 귀엽죠?)

맛도리 탐정 | 세상 모든 맛집 정복!

 

저희는 스터디를 통해 글을 기록하고 있습니다. 피드백은 언제나 환영입니다 :)