Study/Programming

Facebook API - 2. 인증과 토큰 생성

빨간당무 2011. 2. 1. 11:36
이 문서는 페이스북(Facebook)에서 제공되어지는 API를 이용하여 내 어플리케이션을 만드는 과정을 설명하고자 합니다.
그 과정에서 이 문서는 아래 전체 과정 중에 2번째 과정인 인증과 토큰 생성에 해당합니다.




Facebook API - 1. 내 어플리케이션 만들기까지 정상적으로 진행된 개발자는 인증과 토큰을 생성할 수 있습니다.

해당 문서는 다음과 같습니다. (http://developers.facebook.com/docs/guides/canvas)
또는 다음 문서에서도 확인하실 수 있습니다. (http://developers.facebook.com/docs/authentication)

혹은 다음과 같이 이동할 수 있습니다. (http://developers.facebook.com/docs/)



[App on Facebook]을 선택하여 해당 페이지로 이동후 스크롤를 내리면 아래와 같은 정보를 확인할 수 있습니다.



인증하는 방법은

https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_CANVAS_PAGE

YOUR_APP_ID에는 앞서 [어플리케이션 아이디]를 입력하시면 되고
YOUR_CANVAS_PAGE에는 [리다이렉션할 경로]를 입력하시면 됩니다.

[리다이렉션할 경로]는 웹사이트에서 Facebook API를 사용하는 경우 해당 웹 사이트 경로로 지정하시면 되며
저와 같이 C# 어플리케이션으로 제작하는 경우 아래와 같이 입력하시면 됩니다.
[http://www.facebook.com/connect/login_success.html]

이 예제에서는 최종적으로 C#을 통해 API를 사용할 예정이기 때문에 아래와 같이 인증 문자열을 작성하였습니다.

https://www.facebook.com/dialog/oauth?client_id=161677497215358&redirect_uri=http://www.facebook.com/connect/login_success.html

정상적으로 입력한 경우 아래와 같은 화면을 보실 수 있습니다. 



단, 현재 로그인 되어 있지 않은 상태라면 로그인 입력 화면이 뜨며 로그인 후에 위와 같은 화면으로 진행됩니다.

그리고 만약 이런화면이 뜨지 않고 



이런 화면이 뜬다면 [어플리케이션 아이디]를 잘못 입력하셨거나 혹은 다른 이유로 오류가 발생한 것이고,



이런 화면이 뜬다면 [리다이렉션할 경로]를 잘못 입력하셨거나 해당 경로가 유효하지 않은 경우입니다.

다시 돌아가서 정상적으로 뜬 경우 [허가하기]를 선택해서 정상적으로 인증된 경우 아래와 같은 화면을 보실수가 있습니다.



이때 중요한 것 주소표시줄에 있는 주소 입니다. 제가 받은 주소는 아래와 같습니다.

http://www.facebook.com/connect/login_success.html?code=2.emzAJT936VvmFJxWptSktA__.3600.1296543600-100000482185025|x9alKLf7rSQ2wNk_GcX-XTtZHtw

여기서 access_code로 별도로 저장해야 하는 부분은 위에서 code= 이후 입니다. 즉,

2.emzAJT936VvmFJxWptSktA__.3600.1296543600-100000482185025|x9alKLf7rSQ2wNk_GcX-XTtZHtw

이부분이 access_code로 별도로 저장해 두셔야 이후 과정을 진행 하실 수 있습니다.
(현재는 사용자에게 [기본 정보에 접근]만을 요청하였으나 다른 권한을 요청하는 부분은 이 다음 글에서 추가로 작성하겠습니다.)

다음 과정으로는 Graph API를 사용하기 위한 token endpoint를 받는 것입니다. 
관련 내용은 다음 주소를 참고 하시면 됩니다. (http://developers.facebook.com/docs/authentication)

해당 페이지를 보면 아래와 같은 내용이 기술되어 있습니다.



token을 얻는 방법은 

https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&client_secret=YOUR_APP_SECRET&code=THE_CODE_FROM_ABOVE

YOUR_APP_ID 에는 앞서 [어플리케이션 아이디]를 입력하시면 되고, 
YOUR_CANVAS_PAGE 에는 [리다이렉션할 경로]를 입력하시면 되고,
YOUR_APP_SECRET 는 앱을 생성하였을 때 관리 페이지에 보면 API 키 하단에 있는 것을 입력하시면 되고,
THE_CODE_FROM_ABOVE 는 전단계에서 인증후에 확보한 access_code를 입력하시면 됩니다.

※ [리다이렉션할 경로]는 전단계에서와 같이 http://www.facebook.com/connect/login_success.html 을 사용하셔도 됩니다.

현재까지 제가 확보한 정보는 아래와 같습니다.

어플리케이션 아이디
161677497215358
API 키
99d112a71d7dbd65c7de8201a9136d38
어플리케이션 시크릿 코드
04edde2d60835092a8d137ca4decd8b6
application_secret
2.emzAJT936VvmFJxWptSktA__.3600.1296543600-100000482185025|x9alKLf7rSQ2wNk_GcX-XTtZHtw

이 정보를 바탕으로 아래와 같은 URI를 작성하였습니다. 

https://graph.facebook.com/oauth/access_token?client_id=161677497215358&redirect_uri=http://www.facebook.com/connect/login_success.html&client_secret=04edde2d60835092a8d137ca4decd8b6&code=2.emzAJT936VvmFJxWptSktA__.3600.1296543600-100000482185025|x9alKLf7rSQ2wNk_GcX-XTtZHtw

해당 주소를 웹브라우저를 통해 이동하면 아래와 같은 화면을 보실 수가 있습니다.



여기서 중요한 것은 본문에 있는 access_token입니다.

161677497215358|2.emzAJT936VvmFJxWptSktA__.3600.1296543600-100000482185025|bV4zej7ybOpdNcfSBmybbL_vFXU&expires=6683

만약 잘못 입력한 경우 아래와 같은 오류 메세지를 보게 됩니다.



이번 문서에는 여기까지 access_code와 access_token을 얻는 과정을 확인할 수 있었습니다.

정리할 겸 현재까지 제가 확보한 정보는 아래와 같습니다.

어플리케이션 아이디
161677497215358
API 키
99d112a71d7dbd65c7de8201a9136d38
어플리케이션 시크릿 코드
04edde2d60835092a8d137ca4decd8b6
application_secret
2.emzAJT936VvmFJxWptSktA__.3600.1296543600-100000482185025|x9alKLf7rSQ2wNk_GcX-XTtZHtw
access_token
161677497215358|2.emzAJT936VvmFJxWptSktA__.3600.1296543600-100000482185025|bV4zej7ybOpdNcfSBmybbL_vFXU&expires=6683

이후 과정은 3. 웹브라우저에서 조회하기입니다. 이것은 다음 페이지에서 진행하겠습니다.