여기서는 페이스북 앱과 내가 만든 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 형태로  유저정보 등 다양한 정보들을 확인 할 수 있게 된다.

나머지는 다음에ㅜ


  1. http://www.mydomain.com/facebookapp/index.html [본문으로]
Posted by sbahn


티스토리 툴바