Instagram API 연동

Instagram API 연동을 개발 하면서 공식문서에는 디테일한 설명없이 큰그림으로만 설명돼 있어서 개인적으로 많이 어려웠다. 그래서 많은 사람들에게 도움이 되고자 글을 작성한다. 언제든 질문과 지적은 환영이다!

• ps. Spring Boot가 아닌 Spring Framework로 개발했다.

---

1. Instagram API 종류
2. Instagram API 준비
3. Instagram API 개발
4. 결과
5. 마무리

---

1 종류

1.1 Instagram 그래프 API

• 앱 사용자가 Instagram Business 계정 및 Instagram 크리에이터 계정의 데이터에 액세스할 수 있다.
• 미디어 게시, 미디어에 달린 댓글을 관리 & 답글을 달기, @언급된 미디어를 식별, 해시태그가 포함된 미디어 찾기, 다른 Instagram Business 및 크리에이터에 대한 기본 메타데이터와 지표를 가져올 수 있다.

1.2 Instagram 기본 디스플레이 API

• 앱 사용자는 Instagram 계정에서 기본 프로필 정보, 사진 및 동영상을 가져올 수 있다.
  이 API는 비즈니스 및 크리에이터가 아닌 Instagram 사용자를 위해 고안되었다.

  Instagram 기본 디스플레이 API는 기본정보, 게시물(사진,동영상,글)의 정보만을 가져올 수 있다면, Instagram 그래프 API는 + 댓글관리, @를 통한 게시물 구분 등 더 디테일한 작업이 가능하다.

• 우리가 앞으로 개발할 것은 Instagram 기본 디스플레이 API이다.

---

2 준비

2.1

• 인스타그램이 facebook에게 인수됐고, 개발은 facebook for developer 에서 해야한다.

2.2 facebook for developer 순서

• 홈페이지에서 가입을 먼저 한다. (sns로 사용하던 facebook ID가 아님)

  

• 가입하고 내앱 > 앱 만들기를 누르면 해당 화면이 나오고 앱 유형을 선택 > '다음'버튼
  (본인은 소비자를 선택했다.)

• 표시 이름과 앱 연락처 이메일을 입력하고 '앱 만들기' 버튼 클릭

• 메인 화면으로 이동되는데, 여기서 파랑색으로 체크돼 있는 instagram basic display의 '설정'버튼 클릭

• 맨 아래 '새 앱 만들기' 버튼 클릭

• 그럼 표시 이름 확인하고 '앱 만들기' 버튼 클릭

• 여기가 핵심이자 앞으로 사용할 데이터이다.
• Instagram 앱 ID : client_id 데이터로 사용
• Instagram 앱 시크릿 코드 : client_secret 데이터로 사용 ( 보기 > 비밀번호 입력 > 코드가 공개됌 )
• Instagram 표시 이름 : 앞서 작성한 내용 (신경 x)
• 유효한 OAuth 리디렉션 URI : redirect_uri 데이터로 사용, 개발코드에서 redirect_uri를 사용할 때 여기에 등록을 안해놓으면 코드오류가 난다. ( http X / https O )
• 콜백 URL 승인 취소, 데이터 삭제 요청 URL : 개인정보보호,개인정보처리의 내용이 있는 URL 작성
  ( http X / https O)
• 저장!

• 개발자 설정 했으니까 instagram 데이터를 가져올 테스터를 추가해야한다.
• Instagram Basic Display > 기본 표시 > 사용자 토큰 생성기 > 빨간색 표시 버튼 클릭

• 'Instagram 테스터 추가 버튼' 클릭

• 모달이 띄어지면 Instagram에서 사용하는 아이디 (흔히 @다음에 작성되는 아이디 입력하면 됌)

• 요청이 되면 Instagram에서 테스터 승인을 해줘야 완료
• Instagram > 설정 > 앱 및 웹사이트 > 테스터 초대 > 테스터 승인

• 그리고 개발할 때 facebook for Developer 상단에 '앱 모드'가 있는데 개발로 선택해야 error 없이 데이터를 받을 수 있다.

• 여기까지 개발을 위한 기본준비 완료

---

3 개발

3.1 테스트 사용자 인증

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

• 인증 창 URL을 구성한 후 {app-id}는 Instagram 앱 ID로 교체하고(앱 대시보드 > 제품 > Instagram > 기본 디스플레이 > Instagram 앱 ID 필드에서) {redirect-uri}는 2단계에서 제공한 웹사이트 URL("유효한 OAuth 리디렉션 URI")로 교체 URL은 정확히 똑같아야 한다.

• scope는 가져올 데이터의 범위, response_type은 해당 코드 요청하고 나면 반환받을 '인증code'

• ex

https://api.instagram.com/oauth/authorize
  ?client_id=684477648739411
  &redirect_uri=https://socialsizzle.herokuapp.com/auth/
  &scope=user_profile,user_media
  &response_type=code

• 코드를 get방식으로 요청하면 인스타그램에서 제공하는 사이트의 정보승인 창이 뜬다.
• 이때 인스타그램 ID가 연동돼있다면 자동으로 이창이 뜨고, 아니면 로그인창이 뜬다.
• 헷갈리지 말아야할게 위에 작성한 client_id는 정보를 가져올 사용자의 id가 아니라 개발자인 우리의 facebook for develop의 id이다.

3.2 반환 코드를 토큰으로 교환

• return받은 code는 인증코드이다. 이 인증코드를 토큰으로 교환해서 데이터에 직접 접근할 수 있다.

curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -F client_id={app-id} \
  -F client_secret={app-secret} \
  -F grant_type=authorization_code \
  -F redirect_uri={redirect-uri} \
  -F code={code}

• {app-id}, {app-secret}, {redirect-uri} 및 {code}는 Instagram 앱 ID, Instagram 앱 시크릿 코드, 리디렉션 URI 및 전송받은 코드로 교체한다.
• 리디렉션 URI가 이전 단계에서 지정한 URI와 정확히 일치해야 한다. (매우 중요!! 틀리면 error난다. 그리고 Instagram 앱을 구성할 때 앱 대시보드에서 슬래시를 추가했다면 뒤에 슬래시 포함해야한다.)
  -ex

curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -F client_id=684477648739411 \
  -F client_secret=eb8c7... \
  -F grant_type=authorization_code \
  -F redirect_uri=https://socialsizzle.herokuapp.com/auth/ \
  -F code=AQDp3TtBQQ...

• 이런식으로 데이터를 맞춰넣고 post방식으로 요청하면,

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

• 앞으로 데이터를 가져올 수 있는 토큰과 해당 사용자의 id가 반환된다.
• 근데 해당 토큰은 유효기한이 1시간으로 매우 짧다. 그래서 장기 실행 토큰으로 바꿔줘야한다.

3.3 장기 실행 액세스 토큰

• 장기 실행 토큰은 60일 동안 유효하며, 60일 이전에 장기토큰 새로 고침 코드를 통해 지속적으로 사용 가능하다.

curl -i -X GET "https://graph.instagram.com/access_token
  ?grant_type=ig_exchange_token
  &client_secret={instagram-app-secret}
  &access_token={short-lived-access-token}"

• 앞서 받은 토큰과 client_secret을 넣어 아래와 같은 장기 토큰으로 반환받는다.

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

• 반환받은 토큰은 발급받은 순간부터 60일이 유효한데 expires_in으로 반환받은 number가 그 초(seconds)이다. (즉, 현재 시간에 expires_in을 더해서 시간을 저장한다.)

3.4 장기 실행 토큰 새로 고침

• 토큰 새로고침은 토큰 만료기한인 60일 이전에 새로고침 가능하며, 60일이 지난 이후에는 다시 발급받아야한다.

curl -i -X GET "https://graph.instagram.com/refresh_access_token
  ?grant_type=ig_refresh_token
  &access_token={long-lived-access-token}"

• 새로고침을 위해서는 토큰의 정보만 있으면 된다.

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

• 그러면 새롭게 refresh된 토큰과 만료일이 생성된다.

3.5 미디어 가져오기

• 이제 사진이나 게시물과 같은 정보를 가져오기 위한 준비를 다했으니 토큰을 통해 가져오기만 하면 된다.

GET /me/media?fields={fields}&access_token={access-token}

• fields에 어떤 data를 받을지 작성하기만 하면 된다.

• fields : 가져올 미디어

  • caption : 미디어의 캡션 텍스트, 사진첩의 미디어에 대해서는 반환되지 않는다.
  • id : 미디어의 ID
  • media_type : 미디어 유형 ( IMAGE, VIDEO 또는 CAROUSEL_ALBUM )
  • media_url : 미디어의 URL ( 사진첩의 사진URL )
  • permalink : 미디어의 영구 URL ( 게시물의 URL이라 생각하면 된다.)
    미디어에 저작권이 있는 자료가 포함되어 있거나 저작권 위반 플래그가 지정된 경우 생략
  • thumbnail_url : 미디어의 썸네일 이미지 URL입니다. VIDEO 미디어에만 제공
  • timestamp : ISO 8601 형식의 미디어 게시 날짜
  • username : 미디어 소유자의 사용자 이름

• ex

curl -X GET \ 'https://graph.instagram.com/17895695668004550?fields=id,media_type,media_url,username,timestamp&access_token=IGQVJ...'

• 원하는 미디어와 토큰을 입력하고 요청하면

{ "id": "17895695668004550", "media_type": "IMAGE", "media_url": "https://fb-s-b-a.akamaihd.net/...", "username": "jayposiris" "timestamp": "2017-08-31T18:10:00+0000" }

• json 형식으로 요청한 데이터들을 반환
• 이후 json 형식으로 바로 처리하고 사용 or 값을 String으로 변환해서 저장하고 사용 하는건 개발자의 마음

• +EDGE

GET /{media-id}/children?fields={fields}&access_token={access-token}

• children : 미디어 사진첩에 대한 미디어 리스트를 가져온다. ( CAROUSEL_ALBUM 미디어에만 제공 )
  • 미디어의 하위 요소를 가져오기 위해 작성 ( permalink로 게시물에 접근해서 사진들을 다 보는게 아니라 사진첩 1개에 여러장들어 있는 사진들에 접근하기 위할 때 )

---

4 결과

4.1 미연동된 화면

• 연동 버튼을 누르면,

  

• 로그인 화면이 뜬다.

  

• 로그인하면 연동에 대한 허용 여부를 묻는다.

4.2 연동된 화면

• 연동했을 때는 연동해제할 수 있는 기능, 게시물을 볼 수 있는 기능, 토큰이 60일 안지나면 언제든 갱신할 수 있는 기능을 구현했다.

4.3 게시물

• 본인은 캡션, 사진, 사진링크 정도의 데이터를 가져왔다.
• 개인정보라 사진이나 링크를 올리지는 않지만 잘연결된다.

---

5 마무리

• 본인이 개발하면서 헷갈렸던 부분
  • 코드에서 값을 전달할 때 쓰이는 clinet_id나 client_secret,redirect 등의 parameter값들은 개발자인 나의 정보이지 사용할 사용자의 데이터가 x (사용자의 데이터는 반환받은 토큰값과 유효기간, ID의 정보이다.)

• 마치며
  • 인스타그램 API는 버전이 여러번 바뀌어서 여러 개발자들이 설명한 부분이 오히려 헷갈릴 수 있다.
    때문에 본인도 직접 개발한 코드를 공유하고 올리기 보다는 전체적인 틀을 이해할 수 있게 도와주는 역할만으 로 누군가에게 충분히 도움이 된다고 생각하고 글을 작성했다.
  • 참고로 필요하거나 모를때는 공식문서를 보는게 제일 정확하다!