📱iOS 인스타그램 API로 내 포스트 가져오기 (Alamofire API)

 

인스타에서 내 포스트 가져오기

 

 

인스타 API를 사용해 내 포스트(사진, 동영상) 가져오기

Facebook에서 제공하는 Instagram API를 사용해 내 프로필에 있는 포스트들을 가져올 수 있습니다. 
포스트들을 조회하기 위한 순서는 다음과 같습니다.
1. Instagram 로그인을 통해 인증코드 가져오기
2. 인증코드를 Instagram 액세스 토큰으로 교환
3. Instagram 사용자의 이미지, 동영상 및 사진첩 가져오기
로그인 하면 한번에 액세스토큰을 주는게 일반적이라고 생각하는데, Instagram에서는 총 두번의 API호출을 해야 포스트를 조회할 수 있는 액세스 토큰을 얻을 수 있습니다.

이 포스트에서의 설명은 1번과정에 대한 설명이 진행됩니다.
(앱에서 작업을 시작하기 전 페이스북, 인스타그램 프로젝트 설정에 대한 설명입니다.)

---

페이스북 새 앱 만들기

Instagram API를 사용하기 위해 가장 먼저 페이스북 개발자 페이지(https://developers.facebook.com/apps/) 에서 새로운 앱을 생성합니다.

표시 이름과 이메일을 적절하게 입력하면 앱에 생성되고 다음과 같은 대시보드가 보여집니다.
대시보드에 바로 보이는 Instagram 설정을 눌러서 설정을 합니다.
Instagram을 바로 설정하려했더니.. 앱 설정 페이지를 먼저 업데이트하라 하네요

설정 > 기본설정으로 들어가서 가장 아래에 있는 플랫폼 추가를 눌러줍시다.

iOS를 눌러서 iOS플랫폼을 추가해줍시다.

다른칸에는 입력할 정보다 따로 있진 않고 번들ID에만 프로젝트 번들ID를 입력해주세요!
프로젝트 번들ID는 XCODE에서 프로젝트 파일 선택 > General탭으로 들어가면 하단에 Bundle Identifier에 적혀져있는 값을 입력해주시면 됩니다. 입력 후, 하단에 저장 버튼을 눌러주세요!

---

인스타 앱 추가

 

인스타 앱을 만들고 클라이언트에서 OAuth가 실행되었을때 콜백으로 받은 URL들을 입력해줍시다.

유요한 OAuth 리디렉션 URL : 앱에서 인스타로그인을 성공했을 때 받을 리디렉션 URL
콜백 URL 승인 취소 : 승인이 취소되거나 실패했을 때 받을 URL
데이터 삭제 요청: 데이터 삭제를 요청하고 성공했을때 받을 URL

위 세가지 URL을 작성해주셔야합니다. 저의 경우에는 앱에서만 단독으로 사용할 웹URL이 없기 때문에 제 블로그를 URL로 입력하였습니다.(때문에 앱에서 인스타로그인을 성공하게되면 제 블로그가 웹뷰로 잠시 보여집니다.)

---

인증코드 발급

인스타 앱 URL을 설정하고나서 변경사항 저장. 아래로 조금 스크롤해서 내려왔을 때 User Token을 발급해주어야 발급된 유저들에 한해서 인스타 API를 이용할 수 있게 해줄 수 있습니다. (물론 여기에서는 개발용이므로 이런 순서로 사용하게되고 라이브 서비스일 경우에는 아래와 같은 과정을 거치지 않고 바로 로그인 이후 이용할 수 있습니다. 다만 라이브 서비스는 페이스북의 검수를 받고 통과해야 라이브 서비스로 전환 할 수 있다고 합니다.)

Instagram 테스터 추가 > 테스터로 추가하고싶은 Instagram 아이디 입력후 제출 버튼을 눌러주세요!

---

인증코드 수락

테스터로 초대가된 유저들은 자신의 인스타그램에 들어가서 우측 상단에 프로필 > 설정 > 앱 및 웹사이트페이지로 들어가게 되면 방금 받은 초대를 확인할 수 있습니다. 여기에서 수락을 눌러주세요!
수락을 하게 되면 페이스북 개발자 콘솔에서도 정식적인 테스터로 수락된 것을 확인할 수 있습니다.

인스타 인증과정을 거치면 코드창이 보이게 됩니다. 동의한다고 체크박스를 체크하면 아래의 코드가 보여집니다. 해당 코드를 꼭 복사해두세요! 나중에 앱 작업할때 사용되는 코드입니다. (만약 코드를 복사하지 못하고 창을 껐다면 코드를 다시 만들 수 있으니 걱정하지 마세요!)

---

획득한 사용자 토큰으로 포스트 가져오기

인스타 API관련 문서는 아래 링크에서 제공하고있습니다.
https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-profiles-and-media

내 포스트 가져오기 API URL 형태는 다음과 같습니다.

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

fields 란에는 원하는 필드이름을 입력하고
access-token에는 이전 포스트에서 설정했을 때 만들었던 사용자 토큰을 넣으면 됩니다.

let url = "https://graph.instagram.com/me/media"
let headers = ["Accept": "application/json"]
let params: [String: Any] = ["fields": "id,media_type,media_url,thumbnail_url,username,timestamp",
								"access_token": "유저 토큰을 입력해주세요."]
        
Alamofire.request(url, method: .get, parameters: params, encoding: URLEncoding.default, headers: headers).responseJSON { (response) in
	if let value = response.value {
    	if let instagramResponse: InstagramResponse<Media> = JsonUtils.toJson(object: value) {
        	if let data = instagramResponse.data {
            	print(data)
            }
        }
    }
}

Alamofire를 사용해서 access_token을 넣고 호출을 하면 내 프로필에 있는 포스트들의 정보가 날아옵니다!

{
    "data": [
        {
            "id": "17894976991503769",
            "media_type": "IMAGE",
            "media_url": "image_url_1",
            "username": "hyun_sik_yoo",
            "timestamp": "2020-06-10T05:45:43+0000"
        },
        {
            "id": "17849113948929680",
            "media_type": "IMAGE",
            "media_url": "image_url_2",
            "username": "hyun_sik_yoo",
            "timestamp": "2020-03-10T23:34:09+0000"
        }
        ...
    ],
    "paging": {
        "cursors": {
            "before": "...",
            "after": "..."
        },
        "next": "..."
    }
}

이렇게 데이터를 가지고 올 수 있습니다. 해당 포스트별로 이미지를 가지고 올 수 있습니다.