React + instagram API 연동하기

회사에서 회사 홈페이지와 인스타그램 연동 업무를 주셔서 처음으로 도전하게 되었다!

기존 포스팅을 열심히 봤는데 서버를 구동해야한다는 말도 있고

라이브러리를 써도 된다고 하고,,

아주 복잡해~~~

2시간 삽질 끝에 드디어 해냈다!!!

내가 해냄!!!!!

 

일단 인스타그램 api 를 사용하기 위해서는

1. 인스타그램이 프로페셔널 계정으로 전환되어야한다.

2. 적용할 사이트가 HTTPS 사이트여야한다

 

1.  페이스북(META) 개발자 페이지에 접속 후 로그인 > 내 앱 > 앱만들기

https://developers.facebook.com/?locale=ko_KR 

Facebook for Developers

여기서 1차로 헷갈렸던 부분이다!!!!

비즈니스로 들어가는게 아니고 "소비자" 로 들어가야함

왜냐하면 그 다음에  instagram Basic Display가 떠야하는데 비즈니스엔 안뜨기 때문임ㅡㅡ

저저저 instagram Basic Display가 나와야한다!!! graph api 가 나오면 앱을 삭제하고 다시 만드셈..

설정 누른후 -> 기본 표시 -> 앱 만들기를 하면

이런 화면이 뜬다

이제 여기서  제일 삽질하게 만든

클라이언트 OAuth 설정이 나옴

저 유효한 OAuth 리디렉션 URI 란 뭘까?

난 리액트 서버 구동해서 할건데 리액트는 로컬 서버가 http://localhost:3000 인데 이게 될까???

여기서부터 삽질이 들어갔다..

맨 처음에도 써있다시피 리다이렉션으로 https 가 들어가야한다는데 기본 로컬 서버는 http 라 방법을 찾아다녔다.

하필 또 우린 nextJS를 사용해서 그냥 package.json에 set https = true && react-script start 를 해서 되는게 아니고

따로 서버를 띄어야한다고 했다

구글신의 가호를 받으며 삽질을 한 결과

https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-access-tokens-and-permissions/

액세스 토큰 및 권한 받기 - Instagram 플랫폼 - 문서 - Facebook for Developers

리디렉션 url 는 정말 아무거나 써도 된다는 사실을 발견!!

다만 그렇게 하려면 반드시 리디렉션 URI 리스트에 꼬옥 쓰고 변경 내용 저장을 해줘야해,,,,

저장을 안하고 하는바람에 여기서 또 고생함

하하

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

 

위의 url에 요구하는 값을 넣으셈

instagram-app-id는 

저거니까 이상한거 넣으면 안된다 ㅇㅅㅇ

이 과정하기 전에 사용자 토큰 생성기가 필요함

https://yangsosolife.tistory.com/30

[인스타그램] 토큰 생성 에러 "error_message": "Insufficient developer role"

이분의 블로그에 잘 정리되어있다!

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

 

이렇게 치고 브라우저 검색창에 보내면!!

이 화면이 떠서 허용을 하면

우리가 리디랙션 시킨 홈페이지로 간다

그러면 저 url

https://socialsizzle.herokuapp.com/auth/?code=A ....

여기 code = A...

뒤에 있는 친구들이 인증코드이다 코드 끝에 #_ 는 제외해야함

유효 시간은 1시간이니 그 후에 호다닥 해야함

 

2. 액세슨 토큰을 발급받자!

터미널을 켜서

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

여기에 맞춰서 넣으면

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

이렇게 access_token과 user_id를 받을 수 있다

 

하지만 이것도 마찬가지로 유효기간이 1시간이다

 

https://graph.instagram.com/access_token?grant_type=ig_exchange_token&client_secret={instagram-app-secret}&access_token={access_token}

여기서 정상적으로 요청이 되었다면 

{

   "access_token": "IGeiuu489weti05B", // 이친구가 장기 액세스 토큰(long-lived-access-token)

   "token_type": "bearer",

   "expires_in": 5174488

}

이렇게 장기 액세스 토큰이 발급된다!!

장기 엑세스 토큰은 아래 url로 새로고침하여 기간 갱신할 수 있다!

http://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token={long-lived-access-token}

3. 내 인스타그램 데이터를 가져오자!!

https://graph.instagram.com/{user_id}/media?fields=id,media_type,media_url,permalink,thumbnail_url,username,caption&access_token={access_token}

여기서 

(fields=id,media_type,media_url,permalink,thumbnail_url,username,caption 부분)

id : 인스타그램 미디어 고유번호
media_type : 인스타그램 미디어 종류 (이미지 or 비디오)
media_url : 인스타그램 미디어의 주소 (이미지 주소)
permalink : 인스타그램 미디어 링크 주소 (게시물 주소)
thumbnail_url : 인스타그램 썸네일 이미지 (동영상인 경우에만) 
username : 인스타그램 사용자 이름
caption : 인스타그램 미디어 내용

 

img 태그에 media_url 을 넣으면 원하는 피드를 받아올 수 있다~~~

 

이분의 블로그를 토대로 document 잘 보면서 따라하면 된당

저분은 근데 php로 하셔서 리액트를 쓰는 사람이라면,,, 그냥 이거 보고 충분히 따라할 수 있다,,,,

 https://tonhnegod.tistory.com/245 [조용한 웹 개발자]

 

사실 이전에 instagram 테스터 추가 해줘야하는데

이거 관련 블로그는 많다,,, 위에 분 블로그에도 있으니 참고해서 하자

그럼 퇴근하러 갑니다

뿅!