여기서는 페이스북 앱과 내가 만든 JSP 웹을 연동하는 작업을 한다.
2011/11/26 - [개발/ 記] - 페이스북 캔버스 앱 만들기 #1 - 앱 등록하기
이전글에서는 앱 등록을 하고,
웹 네임스페이스(ex. myapp)와 캔버스URL(ex. http://www.mydomain.com/) 등을 지정하였다.
■ 개발 환경
이클립스J2EE, 톰캣, 자바, JSP
■ 페북 앱 개발 참조 문서
http://developers.facebook.com/docs/
1. 캔버스란?
우리는 페이스북 앱을 만들것이며, 앱은 캔버스(그냥 페이스북의 한 부분)라는 공간에 만들어진다.
여기에는 캔버스가 무엇인지에 대해 개괄적으로 나와있다.
http://developers.facebook.com/docs/guides/canvas/
2. 튜토리얼 시작
http://developers.facebook.com/docs/appsonfacebook/tutorial/
위 주소에 나온 튜토리얼의 전체적인 순서를 보면 다음과 같다.
이 포스트에서는 3. 앱 허가 부분만.
| 1. 앱을 생성 2. 앱 상세설정 3. 앱 허가 4. 소셜 채널 : 피드(자신 담벼락에 올리기), 요청(친구에게 요청하기) & 게임스토리(?) 5. 성능 6. 플래시 개발자를 위한 7. 샘플, 다음 단계 |
3. 앱 허가(인증)란?
apps.facebook.com/myapp <- 이렇게 주소를 쳤을 때, 페이스북은 파라미터로 유저의 정보를 우리에게 보내줄 수 있다.
하지만 그 전에, 유저가 우리의 앱을 허가해줘야 한다.
이 부분에 대한 자세한 설명은, http://developers.facebook.com/docs/reference/dialogs/oauth/ 여기 잘 나와있다. 영어로.
위 주소에 가보면, Direct URL Example이란 것이 잇다.
직접 페이스북 자바스크립트 SDK를 사용하여, 앱 허가 부분을 코딩할 수 도 있지만, 위의 Direct URL로 페이지만 변경하면, 페이스북이 알아서 유저의 허가를 받는 페이지를 사용자에게 보여주고, 허가 여부까지도 나에게 알려준다.
앱설정에서 지정해준 URL의 페이지[각주:1] 안에, 다음 주소로의 리다이렉트를 수행하는 코드를 넣어주면,
http://www.facebook.com/dialog/oauth/? scope=email,user_birthday& client_id=123456789101112& redirect_uri= http://www.mydomain.com/response.jsp&response_type=token
페이스북이 알아서 다음과 같은 화면을 유저에게 뿌려준다는 말이다.
그 뒤 , 허가 결과를 우리 페이지로 넘겨주기까지 한다. 오호
먼저, 위의 다이렉트 코드를 자신에 맞게 바꿔줘야 하는데,
1. scope : 어떤 정보를 사용자로부터 허가 받을지를 정의한다. 여러개를 설정할 수 있다.
2. client_id : 자신이 소유하는 앱의 앱ID/API 키로 바꿔줘야 한다.
3. redirect_uri : 사용자에게서 받은 정보를 넘겨줄 실제 웹주소를 정의한다.
(예. 위에서는 나의 서버의 /response.jsp로 사용자정보를 넘겨주도록 하고 있다.)
4. 테스트!!
JSP 혹은 html 코드를 다음과 같이 작성한다.
페북의 캔버스는 iframe이기 때문에, 우리가 만든 페이지에서는 전체 페이지를 리다이렉트 해줘야 한다.
파일: http://www.mydomain.com/index.html
(여기서, 캔버스URL은 http://www.mydomain.com/ 이 된다. index.html을 적어주지 않아도 초기 페이지로 인식한다고 가정)
<body>
페이스북 앱을 로딩중입니다.
<script>
// 페이지 리다이렉트 시키기 (실제 코드에서는 주욱 이어서 쓰세요)
window.open('http://www.facebook.com/dialog/oauth/
?scope=email,user_birthday &client_id=앱ID &redirect_uri=http://www.mydomain.com/response.jsp &response_type=token', '_top', '', false );
</script>
</body>
|
파일: http://www.mydomain.com/response.jsp
| <body> 허가 후 앱 페이지 이 페이지에서는 사용자 정보를 파라미터로 받을 수 있습니다. </body> |
결과,
1. apps.facebook.com/myapp 을 주소로 쳐서 들어가면, http://www.mydomain.com/index.html가 캔버스에 먼저 잠깐 보여지는데, 그 후 우리가 짠 자바 스크립트 코드에 따라서, 페이스북 허가 인터페이스로 리다이렉트 되어 유저에게는 '허가하겠습니까?' 의 내용이 보이게 된다.
2. 그 뒤, 유저가 '허가', 또는 '허가안함'을 선택하면 그 허가여부를 내가 지정한, 리다이렉트 페이지인
http://www.mydomain.com/response.jsp로 전송해 주며, 그와 함께 response.jsp페이지의 내용이 캔버스에 출력이 된다.
5. 허가 이후
사용자가 '허가' 혹은 '허가 안함'을 했을 때, 자신의 URL(http://www.mydomain.com/response.jsp)로 각각 다른 결과를 보내줄 것이다.
첫 번째, '허가'일 경우
http://www.mydomain.com/response.jsp# access_token=...& expires_in=3600
두 번째, '허가 안함'일 경우
http://www.mydomain.com/response.jsp? error=access_denied& error_description=The+user+denied+your+request.
일단, '허가'일 경우를 잠깐 살펴보면,
http://www.mydomain.com/response.jsp 로 signed_request라는 암호화된 파라미터가 숨겨져서 전송된다.
우리 서버에서는 이 파라미터를 불러와 해독하고, 해독한 후에 JSON 형태로 유저정보 등 다양한 정보들을 확인 할 수 있게 된다.
나머지는 다음에ㅜ
- http://www.mydomain.com/facebookapp/index.html [본문으로]
