인스타그램 팔로워 api - inseutageulaem pallowo api

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

만들고자 했던 기능 - 내 Instagram 계정의 프로필 정보(프로필 사진, 계정 이름, 프로필 설명), 미디어(사진, 내용, 댓글수, 좋아요수)로 웹 페이지 만들기

최근 Facebook, Instagram API 이용에 큰 변화가 생겼다. 얼마 전에 있었던 Facebook 사용자의 개인정보 사건(?) 때문인 것같은데, 이런 과도기에 Reference 없이 API를 이용하는 게 너무 고되었고 다른 분들은 이런 어려움을 겪지 않으셨으면 해서 글을 쓴다.

기존의 Instagram API Platform이 사라집니다.

To continuously improve Instagram users’ privacy and security, we are accelerating the deprecation of Instagram API Platform, making the following changes effective immediately. We understand that this may affect your business or services, and we appreciate your support in keeping our platform secure. These capabilities will be disabled immediately (previously set for July 31, 2018 or December 11, 2018 deprecation). The following will be deprecated according to the timeline we shared previously:* Public Content — all remaining capabilities to read public media on a user’s behalf on December 11, 2018* Basic — to read a user’s own profile info and media in early 2020For your reference, information on the new Instagram Graph API.
링크) https://www.instagram.com/developer/

요약하자면 프라이버시와 보안을 위해 Instagram API Platform을 deprecate할 예정이고 밑의 두 기능은 해당 날짜부터 제한된다.

  • 2018년 12월 11일자로 전체공개된(public) media(사진, 좋아요수, 댓글 수) 데이터는 가져올 수 없다.
  • 2020년 초반부터 사용자의 프로필과 media를 읽어올 수 없다.

해당 기능을 기획하시는 분들은 참고하시길.

*주의*- 이 글은 앱검수를 시작한 2018년 6월 9일부터 현재(2018.10.04)까지의 경험을 바탕으로 쓰여졌으며 이후에는 API 사용 방법, 검수 방법, 관련 정책등이 변경되었을 가능성이 있습니다.- 이 글은 곧 사라질 Instagram API Platform이 아닌 Instagram Graph API(앞으로 Instagram API로 칭함)를 기준으로 설명합니다.

Instagram Graph API 연동하기

Instagram Graph API 첫 페이지

전체적인 과정은 다음과 같다.

  • 필수 조건 세 가지(Facebook 페이지, 해당 페이지에서 할당된 역할 — 일반적으로 앱을 만든 사람이 관리자다, Instagram 계정)를 충족한다.
  • 앱을 등록하고 Facebook 로그인 제품, Instagram 제품을 등록한다.
  • Facebook 로그인을 구현한다.
  • 그래프 API 탐색기를 이용하며 API를 테스트하면서 Instagram API를 구현한다.
  • 스크린캐스트(앱이 동작하는 동영상)를 찍는다.
  • 검수를 위해 제출한다.
  • 검수 완료 후, 비즈니스 인증을 받는다.
  • 최종 검수 완료

한국어판 공식문서의 순서는 다음과 같다.

  1. Instagram 비즈니스 계정에 Facebook 페이지를 연결
  2. 앱 등록
  3. Facebook 로그인 제품 추가
  4. Instagram API 제품 추가
  5. 그래프 API 탐색기로 앱의 설정 테스트
  6. 앱 검수를 위해 앱 제출

공식문서 순서를 따라가며 설명하되, 모든 것을 다루는 것이 아닌 고민했던 부분 위주로 설명하겠다.

1. Instagram 비즈니스 계정에 Facebook 페이지를 연결

현재는 Instagram API를 이용하려면 Facebook 페이지를 Instagram 비즈니스 계정과 연결해야한다. (추후에는 비즈니스 계정이 아닌 일반 계정도 API 연동이 가능하다고 한다.)

Facebook, Instagram 등 SNS를 이용하지 않는 나는 Facebook 계정, Facebook 페이지, Instagram 계정도 새로 만들어서 진행했다.

2. 앱 등록

[PATH + 인증키 기반 GET 방식(?)]의 API을 많이 써왔기 때문에 이 부분도 많이 생소했다. (‘API 호출 수 등의 데이터를 분석하기 위한 기능인가?' 혼자 생각했다.)

  • Facebook for Developers에 가입한다.
  • 내 앱을 등록한다.
  • 해당 앱 대시보드 페이지에 들어가 설정-기본설정 부분에서 데이터를 입력한다. (모든 부분을 채울 필요는 없다. 또한 검수 절차 중에는 데이터를 변경할 수 없지만 검수가 완료되면 변경할 수 있다. 변경되지 않는다고 당황하지 말자.)

3. Facebook 로그인 제품 추가

Instagram API를 이용하려면 Facebook 로그인을 구현해야한다.(…) 해당 앱 대시보드 페이지에서 제품을 클릭하고 ‘Facebook 로그인’을 추가한다.

Facebook 로그인을 추가하면 플랫폼이 뜨는데 원하는 플랫폼을 선택한다. 나는 웹을 선택했는데 다음 창이 뜬다.

나는 우선 http://localhost:3000/ 으로 입력하고 시작했는데, 운영하는 사이트가 있다면 해당 사이트 URL을 입력하는 게 낫다. (이유는 하단에서 후술)

밑에 목록들은 어떻게 Facebook 로그인을 구현할 수 있는지 설명하는 부분이다. (지난 6월에는 이 부분이 없어서 한참을 찾아야했다…)

4. Instagram API 제품 추가

해당 앱 대시보드 페이지에서 제품을 클릭하고 ‘Instagram’을 추가한다. 바로 뜨는 페이지에서 맨 하단으로 가면 ‘앱의 기능에 따라 요구되는 Permission(권한)’을 입력하는 부분이 나온다.

나의 경우에는 instagram_basic 권한만 필요했기 때문에 해당 부분을 제출에 추가했다.

그럼 다음과 같은 창이 뜬다.

그리고 우측 ‘상세 정보 수정'을 클릭하면

이 창이 뜨면서 권한을 어떻게 사용하는지를 입력하고 스크린 캐스트를 업로드하라고 한다.

내가 가장 고민을 많이 했던 부분이다.

어떻게 API를 이용하라는거지?, 개발전인데 (앱이 작동 중에 권한을 이용하는지 보여주는 동영상인) 어떻게 스크린캐스트를 업로드하라는거지?

이해가 되지 않았다.

프로토타입을 만들어서 스크린캐스트를 찍으라는건가? 내가 뭘 잘못 이해했나? 온갖 생각을 하면서 공식문서를 읽고, 구글링을 하던 중에 이와 상관 없이 앱을 개발하고 그 앱이 동작하는 것을 녹화하면 된다는 것을 알았다.

5. 그래프 API 탐색기로 앱의 설정 테스트

그래프 API 탐색기는 — 내가 이해하기로 — API가 어떻게 작동하는지 탐색(?)할 수 있는 기능이다.

공식문서와 위에 그림에서는 다음 1, 2를 설명하면서 제품 제출을 완료해야 5.의 단계로 넘어갈 수 있다고 하는데

1 ‘Instagram API 제품 제출이 승인되었다는 알림을 받으면 그래프 API 탐색기를 사용하여 앱을 테스트할 수 있습니다.’

2 ‘모든 권한 제출에 대한 노트 작성이 완료되면 페이지 하단의 검수를 위해 제출 버튼을 클릭하세요. 이 제출은 앱 검수와는 별개이며, 앱 검수를 위한 제출은 테스트 이후에 하게 됩니다.’

그래프 API 탐색기는 제품을 등록하고 권한을 추가하면 이용할 수 있다. 공식문서를 따라가면서 탐색기를 이용하여 앱을 개발한 후 스크린캐스트를 찍으면 된다.

(내가 이해할 수 없는 부분은 2번의 ‘ 이 제출은 앱 검수와는 별개이며, 앱 검수를 위한 제출은 테스트 이후에 하게 됩니다.’이다. 혹시 아시는 분은 댓글 부탁드립니다.)

6. 앱 검수를 위해 앱 제출

공식 문서에는 아주 짧고 간결하게 써있다. (굉장히 쉬운 것처럼..)

반드시 Facebook 로그인 검수 가이드를 정독하자. Facebook 로그인 검수 가이드의 요구사항을 확인하면 다양한 항목들이 나오는데 이를 준수해야 앱 검수를 무사히 통과할 수 있다.

7. 그 다음 과정 — 앱 검수에는 인내심이 필요하다.

나의 경우 첫 앱검수는 1달, 두번째 앱검수는 1주일, Business Verification은 7월 13일에 시작해서 8월 9일에 끝났으니 1달 남짓 걸렸던 것같다.

앱 검수는 최소 1주일에서 2달(까지 걸린다는 사람을 봤다) 정도 걸리는듯하다. 앱을 검수받고 나면 Business Verification을 해야하는데 사업자등록번호를 요구했었다(필수였는지는 정확히 기억나지 않는다). 사업자등록증도 첨부했었고. (그래서 그런지 Facebook Developer Community에서 인디개발자들은 어쩌라는거냐 라는 말을 종종 볼 수 있었다.)

주의사항

  1. 앱 검수 탈락 — Facebook 로그인과 관련된 주의사항들

나는 이 검수를 1회 통과하지 못했는데 그 이유는 제품- Facebook 로그인-설정-유효한 OAuth 리디렉션 URI 부분이 유효하지 않기 때문이었다.

localhost:3000으로 입력하고 개발했지만 앱 검수를 위해 제출할 때는 실제로 접속할 수 있는 사이트 URL을 입력해야한다.

또한 localhost을 제외한 다른 사이트 URL은 http를 지원하지 않으니 반드시 https로 시작하는 URL을 입력할 것.

2. FB.login(callback, {scope: ‘manage_pages, instagram_basic’})

instagram_basic 권한은 manage_pages 권한과 함께 이용해야한다.

3. 스크린캐스트를 찍을 때

스크린캐스트에서 ‘Facebook으로 로그인하기’라는 버튼이 명시적이지 않아서 앱 검수를 탈락한 사람을 봤다. 앱 검수 탈락 후 다시 제출할 때는 로그인/로그아웃 버튼을 명시적으로 만들었다.

그리고 사용자의 앱 로그인 시, ‘이러이러한 권한이 요구됩니다'라고 권한을 요청하는 부분이 꼭 나와야 한다.

그러지 않으면 위와 같은 메세지와 함께 앱 승인이 거절된다

스크린 캐스트를 찍을 때 해당 앱에 이미 로그인된 상태여서 로그인할 때 권한요청하는 부분이 나타나지 않는다면 로그인한 계정과 앱의 연결을 끊어줘야 한다.

Facebook에 해당계정으로 로그인 — 설정 — 비즈니스통합

위 경로로 이동해서 해당 앱을 삭제한다.

그리고 로그인하면서 권한을 요청하는 부분도 함께 찍는다.

그리고 현재 고민・진행 중인 부분

  1. manage_page 권한 앱검수(현재 진행중인 부분)

앞서 말했듯이 instagram_basic 권한은 manage_pages 권한과 함께 이용해야한다. manage_page 권한 앱 검수를 받는부분이 instagram_basic 검수 받는 부분과 따로 있어서 미처 확인하지 못했다.

대시보드 - 앱검수

위 경로에서 manage_page 항목도 포함해서 앱검수를 받아야한다. 비즈니스 인증까지 받고 이 부분을 놓쳐서 아직 앱을 공개하지 못하고 있는 상황이다. (왜 instagram_basic이랑 따로 돼 있는지, 많이 불편하지만 아직 발전하는 중이라 그러려니…)

API 호출을 위해 instagram id를 얻기 위해 ‘코드상으로만’ 이용하는 manage_pages 권한을 어떻게 스크린캐스트로 보여줘야하는지 모르겠어서 Facebook Developer 페이지에 글을 올렸다. (반응이 없어서 두 번째로 올린 게시물이었음)

링크) https://www.facebook.com/groups/fbdevelopers/permalink/1918607654849406/

간략하게 답변으로 Facebook 로그인 시 권한에 대한 체크박스를 보여주라고 해서 그렇게 스크린캐스트를 찍었다. 그리고 현재 검수 진행중.

2. 서비스 계정

Facebook 로그인이 필요한 부분은 서비스의 극히 일부이기 때문에 Facebook 로그인을 웹사이트 로그인탭에 두지 않았다. 그랬더니 로그인탭에 Facebook Login이 보이지 않아 검수에서 탈락했다.

검수 노트에 일부의 사용자만 이용한다고 명시했더니, 또 다시 앱 검수를 탈락하고 다음 메세지가 떴다.

추가 정보가 필요함 앱의 권한 사용을 승인하려면 Facebook에서 기능을 테스트할 수 있어야 합니다. 기능을 테스트하는 데 Facebook 로그인 외에 별도의 사용자 계정이 필요한 경우 테스트를 위한 검수자용 로그인 정보와 비밀번호를 포함하세요.

Facebook 검수 팀에서 테스트할 수 있는 계정을 줘야한다고 한다. 이 부분은 팀 내에서 상의중이다.

3. Facebook 로그인 구현 — 더 깔끔한 코드?

Facebook 로그인을 구현하면서 Facebook SDK를 사용하라는대로 코딩해놓기는 했는데 가독성이 너무 떨어진다. flow를 정확히 모르고 있다는 생각이 계속해서 들고, 어떤 게 최선인지도 잘 모르겠다. 우선 지금은 각 단계 별로 Promise를 return하는 방식으로 돼있다.

기타

API 호출 제한

한 사용자당 한 시간에 200번의 호출이 가능합니다.

앱에서는 한 시간에 사용자 수의 200배에 해당하는 수의 호출을 할 수 있습니다. 이는 사용자당 제한이 아닙니다. 모든 사용자의 합계가 앱 최대값을 초과하지 않는 한 개별 사용자가 시간당 200번 이상 호출할 수 있습니다. 예를 들어, 앱의 사용자가 100명이면 앱에서 시간당 20,000번의 호출을 할 수 있습니다. 단, 가장 활발히 활동하는 상위 사용자 10명이 이 중 19,000번의 호출을 할 수 있습니다.출처 링크) https://developers.facebook.com/docs/graph-api/advanced/rate-limiting/

Individual Verification is Coming!

현재는 Business Verification, 기업 인증을 받아야 앱을 일반 사용자들에게 공개할 수 있다.

individual verification is coming

해당 링크(https://bit.ly/2RonKO8)에 접속해보니, 다음이 언급되어있다.

In the coming weeks, we will offer an individual verification process where registered developers can submit their apps for review from their app dashboard.

이로써 인디 개발자들도 곧 Facebook Graph API를 이용하여 앱을 개발하고 런칭할 수 있게 되었다.(언제쯤부터 제공될지는 모르는 기능이지만..!)

마무리

이번주 Business Verification을 받고 그 동안의 고생이 주마등처럼 지나가면서 이 글을 써야겠다는 생각이 들었다. 빠진 부분, 부족한 부분이 너무 많은 것같아 걱정이 되지만 다른 분들은 좀 더 빠르게 고생 덜 하시고 개발하셨으면 한다.

질문은 최대한 답변드리고, 부족한 부분, 잘못된 부분은 댓글 주시면 보완하겠습니다. 긴 글 읽어주셔서 감사합니다.