====== 페이스북 앱 개발 ======
페이스북 앱 개발 과정 및 SDK 등에 대해 정리한다.
===== Canvas 앱 개발 =====
페이스북 사이트에서 실행되는 앱인 canvas 앱 개발에 대해 살펴본다.
==== 준비 ====
페이스북 앱 개발을 위해선 최소 아래의 환경이 필요하다.
* HTTP POST를 지원하는 웹서버 (https 설치 권장)
* public URL
* 웹브라우저
웹서버에 https를 위한 인증서를 복사하고 https 접속 설정까지 하는 것이 좋다. 페이스북의 앱 URL로 들어가면 자동으로 https 사이트로 리다이렉트되기 때문이다. 만약 연결된 앱 페이지가 http 프로토콜로만 접속이 가능하다면 보안 문제로 자바스크립트 코드가 실행되지 않을 수 있다.
모든 환경이 준비되면 페이스북 개발자 페이지로 들어가 앱을 추가하고 Settings 페이지에서 Canvas 플랫폼을 추가한다.
==== Authentication ====
먼저 index 페이지의 태그에서 페이스북 SDK 코드를 불러온다.
그리고 html 문서가 로드된 후 페이스북 SDK를 초기화한다.
$( document ).ready(function() {
FB.init({
appId: YOUR_APP_ID,
frictionlessRequests: true,
status: true,
version: 'v2.0'
});
FB.Event.subscribe('auth.authResponseChange', onAuthResponseChange);
FB.Event.subscribe('auth.statusChange', onStatusChange);
});
* [[https://developers.facebook.com/docs/javascript/reference/FB.init/v2.0|FB.init()]]
* [[https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.0|FB.Event.subscribe()]]
FB.Event.subscribe() 함수는 이벤트와 이벤트 핸들러를 연결한다. ''FB.Event.subscribe('auth.authResponseChange', onAuthResponseChange);''는 auth.authResponseChange 이벤트가 발생하면 onAuthResponseChange() 이벤트 핸들러를 실행한다.
이벤트 핸들러는 다음과 같이 작성한다.
function login(callback) {
FB.login(callback);
}
function loginCallback(response) {
console.log('loginCallback',response);
if(response.status != 'connected') {
top.location.href = 'https://www.facebook.com/appcenter/YOUR_APP_NAMESPACE';
}
}
function onStatusChange(response) {
if( response.status != 'connected' ) {
login(loginCallback);
} else {
showHome();
}
}
function onAuthResponseChange(response) {
console.log('onAuthResponseChange', response);
}
* [[https://developers.facebook.com/docs/reference/javascript/FB.login/v2.0|FB.login()]]
위 코드는 아래와 같이 동작한다.
- Canvas가 로드되면 유저의 인증 상태 체크 (onStatusChange)
- 유저가 이전에 로그인한 적이 있으면 connected, 그렇지 않으면 not_connected
- not_connected인 경우 login 함수 실행
- login 함수의 콜백함수를 통해 유저가 로그인 버튼을 클릭했는지 다시 체크
- 유저가 로그인 버튼을 클릭했다면 다시 auth.statusChange 이벤트 발생
- showHome() 함수 실행
==== Graph API ====
Graph API는 페이스북 사용자의 각종 정보를 얻어올 수 있는 API이다. ''FB.api()'' 함수를 이용하여 Graph API를 호출할 수 있다.
var friendCache = {};
function getMe(callback) {
FB.api('/me', {fields: 'id,name,first_name,picture.width(120).height(120)'}, function(response){
if( !response.error ) {
friendCache.me = response;
callback();
} else {
console.error('/me', response);
}
});
}
위 함수는 /me 엔드포인트를 통해 유저의 정보를 가져온다. 그리고 me 대신 페이스북 유저의 id를 넣으면 해당 유저의 정보를 가져올 수 있다. Graph API는 비동기적으로 호출됨에 유의한다. 즉, FB.api() 함수를 실행하면 파라메터의 콜백함수를 통해 Graph API가 호출된다.
* [[https://developers.facebook.com/docs/graph-api|Graph API]]
* [[https://developers.facebook.com/docs/javascript/reference/FB.api/|FB.api()]]
**주의사항** : Graph API 호출에 대한 응답 데이터인 response가 data 변수 안에 데이터를 포함할 수도 있다. 예를 들어 /me/permission 엔드포인트로 permission 리스트를 가져오면 다음과 같은 형태의 데이터를 가져오게 된다.
"data": [
{
"permission": "installed",
"status": "granted"
},
{
"permission": "public_profile",
"status": "granted"
},
{
"permission": "user_friends",
"status": "granted"
}
]
페이스북의 공식 튜토리얼에는 이 부분이 틀려 permissions을 제대로 가져올 수 없었다. Graph API의 버전이 2.0으로 바뀌면서 생긴 오류인 것으로 추측. web-friend-smash-v2 예제의 FB.api() 함수 사용 부분을 참고하자. 더 좋은 것은 Graph Explorer로 데이터를 직접 확인해보는 것!
==== Permission ====
FB.login() 함수를 호출할 때 다음과 같이 permission을 요청할 수 있다.
function login(callback) {
FB.login(callback, {scope: 'user_friends'});
}
위 함수는 user_friends 권한을 요청한다. Permission을 추가로 얻게 되면 Graph API 호출을 통해 얻을 수 있는 정보도 더 많아진다. Graph API 호출을 통해 얻는 데이터는 개발자 페이지 - Tools - Graph Explorer 페이지에서 확인해볼 수 있다. 다음 페이지도 참고.
* [[https://developers.facebook.com/docs/facebook-login/permissions/v2.0|Permissions with Facebook Login]]
특정 권한을 갖고 있는지 확인하려면 다음과 같이 한다.
function hasPermission(permission) {
for( var i in friendCache.permissions ) {
if( friendCache.permissions[i].permission == permission
&& friendCache.permissions[i].status == 'granted' )
return true;
}
return false;
}
물론 그 전에 permissions 데이터를 FB.api() 함수로 가지고 와야 한다.
==== 권한이 변경된 경우 ====
==== 초대, 요청 ====
==== 공유 ====
==== 디버깅 ====
===== 결제 =====
[[programming:facebook_dev:payment|이곳]]을 참고
===== 테스트 =====
===== 리뷰 =====
[[programming:facebook_dev:review|이곳]]을 참고
===== 참고 =====
* [[https://developers.facebook.com/docs/games/canvas/canvas-tutorial|Canvas Tutorial (공식 문서)]]
* [[https://developers.facebook.com/docs/games/canvas/payments-tutorial|Canvas Payments Tutoria (공식 문서)]]
* [[https://github.com/fbsamples|Facebook Platform Samples]]