인스타그램 API 연동하기(feat. 내 홈페이지에) #2

 

2020/01/06 - [개발/기타] - 인스타그램 API 연동하기(feat. 내 홈페이지에) #1

 

1편에 이어서 계속 진행 해 보겠습니다.

이번에는 인증키도 받고 토큰등도 받고 해 보겠습니다. 2편 쓰는걸 잊고 있었네요(...) 😭

 

 

인증코드를 받자.

인증 토큰도 받고 할라면 인증 코드로 시작을 합니다. 인증코드를 받기위해 필요한 정보는 1편에서 입력한 정보들이죠.

 

우선 페이스북 개발자 사이트에 로그인을 합니다.

그리고 1편에서 만들었던 Instagram 제품 > 기본표시 페이지에 가면 아래와 같은 정보를 볼 수 있습니다.

 

 

• client_id : 위 이미지에서 Instagram 앱 ID
• redirect_uri : 클라이언트 OAuth 설정에서 유효한 OAuth 리디렉션 URI

 

아래 주소를 복사해서 브라우저 주소창에 붙여넣기 해 줍니다. 아직 엔터는 입력하지 말아주세요.

https://api.instagram.com/oauth/authorize?client_id=0000000000000000&redirect_uri=https://playon.tistory.com/auth/&scope=user_profile,user_media&response_type=code

브라우저 주소창에 입력했으면 진한 부분(client_id랑 redirect_uri)을 기본표시에 있는 정보로 수정 해 주고 엔터!

 

 

 

 

 

그러면 인스타그램 권한 요청창이 나타납니다.

(저는 이미 권한 승인을 했기 때문에 이미 승인했다는 창이 떠서 페이스북 개발자 사이트에 있는 이미지를 가져왔어요 😉)

 

코드를 받아야 하니까 승인을 눌러줍니다.

승인을 누르면 인증을 하고 위에 redirect_uri로 이동하면서 code도 같이 보내줍니다.(브라우저 주소창을 보세요!)

 

https://playon.tistory.com/auth/?code=AQD9seCCm7...#_

이런식으로 오죠. code는 엄청 길어서 줄인거고 맨 뒤에 #_은 필요 없습니다.

인증코드를 잘 받았습니다!

 

메모장이라던지 다른곳에 잘 적어 둡니다.

참고로 위 코드는 1시간만 유효하니깐 코드를 발급 받은지 1시간이 지났다면 다시 받아야 합니다.

 

 

 

 

 

 

 

인증 토큰을 받자.

이제 cURL 요청을 해야하니 간편하게 요청할 수 있는 툴이 필요합니다. (포스트맨이나 인썸니아가 쓰기 좋네요.)

 

📙 포스트맨(Postman)

https://www.postman.com/

Postman | The Collaboration Platform for API Development

 

📘 인썸니아(Insomnia)

https://insomnia.rest/

Insomnia

저는 인썸니아로 할까 합니다. 이유는 인썸니아가 더 이뻐서 😋

 

 

 

 

 

인썸니아를 다운로드하고 설치합니다.

토큰을 받으려면 Instagram 앱 시크릿 코드가 필요하니 설치하는 시간에 코드를 받아보죠.

 

Instagram 제품 > 기본표시 페이지에 가서 ①Instagram 앱 시크릿 코드 보기를 눌러 ②비밀번호를 입력하면 시크릿 코드가 별표에서 텍스트로 바뀌게 됩니다. (비밀번호는 페이스북 비밀번호에요.)

 

 

 

 

 

 

인썸니아 설치가 다 끝나면 실행을 합니다. 

① 왼쪽 창에서 마우스 오른쪽 버튼을 눌러 New Request 를 선택 해 줍니다. 이건 그냥 제목 같은거 달아서 나중에 또 요청 편하게 하는 기능인거 같아요. 요청할때마나 이렇게 만들어야 하는거 같은데 이건 좀 귀찮..

 

 

 

 

 

 

① cURL을 요청할 이름 입력(제목같은?)

② POST 선택

③ Multipart 선택

④ Create 버튼을 눌러 생성합니다.

 

 

 

 

 

 

Create 버튼을 누르면 위 이미지 처럼 데이터를 입력하는 부분이 나오는데 하나하나 입력 해 줍니다.

 

① POST를 보낼 주소를 입력합니다. https://api.instagram.com/oauth/access_token

② 처음에 선택한 Multipart

③ 보낼 값을 입력 해 주는데요.

• client_id : Instagram 제품 > 기본표시에 숫자로 된 Instagram 앱 ID
• client_secret : 인썸니아 설치하면서 받은 Instagram 앱 시크릿 코드
• grant_type : authorization_code 입력
• redirect_uri : Instagram 제품 > 기본표시에 적은 유효한 OAuth 리디렉션 URI (예: https://playon.tistory.com/auth)
• code : 브라우저 창에서 주소 입력하고 받은 #_ 붙은 코드 (#_은 지우고, 예: AQD9seCCm7.....)

④ 결과 값(토큰) 받음

 

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

 

오류 없이 잘 받아 오네요!

다음엔 이 결과 값(토큰)을 가지고 내 인스타그램 사진을 불러 오는걸 해보겠습니다. 🤗