일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- ReactQuill
- socketIO
- pyinstaller
- reactjs
- state전역관리
- 앱비밀번호
- 리액트
- expressjs
- ReactContextAPI
- Nodejs
- 넥스트JS13
- 비디오스트리밍
- 비디오전송
- nextjs
- PlanetScale
- next js
- 쿠키관리
- 넥스트js
- 웹소켓
- APIroutes
- API루트
- 페이스북개발자
- pyqt5
- 플래닛스케일
- 노드메일러
- 인스타그램API
- 인스타그램앱만들기
- mysqlworkbench
- nodemailer
- nextjs13
- Today
- Total
Timpossible history
인스타그램 API 이용하여 피드 긁어오기 본문
이번에는 인스타그램 API를 이용해서 사용자의 정보나 게시글을 가져와보자.
먼저 인스타그램 API를 살펴보기 위해 개발자 웹사이트에 들어가본다. 인스타그램은 Meta가 인수하였으니 Meta for developers로 들어가면 된다. Meta의 개발자 문서들은 친절하지 않기로 유명하다지만, 정말 집중해서 따라가보면 되는 걸보니 츤데레인 것 같다.
Meta for developers - 인스타그램 기본 디스플레이 API(일반 사용자를 위한 api라고 한다)
(참고로 비지니스 계정을 위한 api는 인스타그램 그래프 API이다)
인스타그램 기본 디스플레이(표시) API로 할 수 있는 것
-
Instagram 사용자로부터 Instagram 사용자 액세스 토큰 및 권한 가져오기
-
Instagram 사용자의 프로필 가져오기
-
Instagram 사용자의 이미지, 동영상 및 사진첩 가져오기
필자도 여러 문서를 뒤져보았지만, 추천 피드나 다른 사람의 피드를 가지고 오는 것은 불가능.
준비 사항
- Facebook 개발자 계정 및 인스타그램 계정(이미지 및 비디오 파일 있어야 함)
- 자기 소유 웹사이트(리디렉션 uri 설정할 ssl 설정되어 있고 https 사용하는 웹사이트)
- cURL 요청 수행 가능한 커맨드라인 툴(터미널, iTerm, Postman etc.)
시작하기
1. 페이스북 개발자 계정 로그인 후 앱 만들기
내 앱 > 앱 만들기 클릭하여 간단하게 작성해주고 앱을 만든다
앱 대시보드 > 앱 설정 > 기본 설정을 클릭하여 맨 아래로 스크롤해주면, 플랫폼 추가를 클릭한다.
플랫폼은 나중에 변경가능 하다.
그리고 웹사이트 칸에 내 소유의 웹사이트 url을 써주고 변경 내용 저장한다.
2. 인스타그램 기본 디스플레이 API 구성
제품 추가 섹션으로 들어가면 Instagram Basic Display 설정 클릭한다.
앱의 이름을 지어주고 앱을 만들어 주면, 다음과 같은 화면을 얻을 수 있다.
Instagram 앱 ID와 앱 시크릿 코드는 이후 작업을 하는데 필요하다.
유효한 OAuth 리디렉션 URI, 콜백 URL 승인 취소, 데이터 삭제 요청 URL에는 내 소유의 웹사이트 주소를 써주고 변경 내용 저장을 눌러준다.
3. 인스타그램 테스터 추가
바로 아래로 스크롤을 조금만 내리면 인스타그램 테스터 추가 버튼을 누른다.
다음과 같이 나의 인스타계정을 검색해서 추가해준다.
인스타그램 웹사이트 접속 > 프로필 > 설정 탭 > 앱 및 웹사이트 > 테스터 초대 > 수락 클릭을 해준다.
이렇게 하면 페이스북 개발자 페이지에서 만든 내 앱이 내 인스타그램의 계정에 접근이 가능해진다.
4. 테스트 사용자 인증
새 윈도우 탭을 열어 주소창에
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)를 지우고 위에서 앱을 만든 후 얻은 Instagram 앱 ID와 OAuth 리디렉션 Uri를 적어준다
엔터를 누르면 이런 팝업 창이 뜨게되고 허용을 클릭해주면 윈도우 탭은 내 웹사이트로 이동하게되고 주소창에 새로운 url이 뜨는데
https://my-website-url.com/auth/?code=AQDp3TtBQQ...#_
형태로 뜨게 되며, code= 이후의 문자들을 복사해서 메모장에 적어두는데, #_는 제외하고 적어둔다.
5. 코드를 토큰으로 교환
터미널이나 iTerm을 실행한다.
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}에는 Instagram 앱 ID, {app-secret}에는 Instagram 앱 시크릿코드, {redirect-uri}에는 유효한 OAuth 리디렉션 uri를 하나도 빠짐없이 똑같이 써주고, {code}에는 위에서 얻은 코드를 붙여넣기 해주고 Run.
{
"access_token": "IGQVJ...",
"user_id": 17841405793187218
}
이러한 결과물이 나오는데 이를 Postman에서 실행해주자. 계속 터미널이든 iTerm이든 상관은 없다.
https://graph.instagram.com/{user-id}?fields=id,username&access_token={access-token}
이런 형식으로 fields의 범위를 선택해나가면서 요청을 보내면 내 사진첩에 있는 이미지나 동영상 파일들의 정보들을 가져올 수 있다.
'프론트엔드 > React JS' 카테고리의 다른 글
[React JS] React-quill로 코드 블럭 에디터 설정하기(feat. highlight.js) (0) | 2024.02.16 |
---|---|
[React JS] React context API로 state 전역적으로 관리하기 (0) | 2024.01.06 |
[React JS] React-quill로 WYSIWYG 구현하는 중에 format과 blot 커스터마이징 (0) | 2023.12.30 |