사용자 도구

추적: • facebook_dev

목차

페이스북 앱 개발

페이스북 앱 개발 과정 및 SDK 등에 대해 정리한다.

Canvas 앱 개발

페이스북 사이트에서 실행되는 앱인 canvas 앱 개발에 대해 살펴본다.

준비

페이스북 앱 개발을 위해선 최소 아래의 환경이 필요하다.

  • HTTP POST를 지원하는 웹서버 (https 설치 권장)
  • public URL
  • 웹브라우저

웹서버에 https를 위한 인증서를 복사하고 https 접속 설정까지 하는 것이 좋다. 페이스북의 앱 URL로 들어가면 자동으로 https 사이트로 리다이렉트되기 때문이다. 만약 연결된 앱 페이지가 http 프로토콜로만 접속이 가능하다면 보안 문제로 자바스크립트 코드가 실행되지 않을 수 있다.

모든 환경이 준비되면 페이스북 개발자 페이지로 들어가 앱을 추가하고 Settings 페이지에서 Canvas 플랫폼을 추가한다.

Authentication

먼저 index 페이지의 <head> 태그에서 페이스북 SDK 코드를 불러온다. 

<script src="//connect.facebook.net/en_US/sdk.js"></script>

그리고 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);
});

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);
}

위 코드는 아래와 같이 동작한다.

  1. Canvas가 로드되면 유저의 인증 상태 체크 (onStatusChange)
  2. 유저가 이전에 로그인한 적이 있으면 connected, 그렇지 않으면 not_connected
  3. not_connected인 경우 login 함수 실행
  4. login 함수의 콜백함수를 통해 유저가 로그인 버튼을 클릭했는지 다시 체크
  5. 유저가 로그인 버튼을 클릭했다면 다시 auth.statusChange 이벤트 발생
  6. 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가 호출된다.

주의사항 : 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 페이지에서 확인해볼 수 있다. 다음 페이지도 참고.

특정 권한을 갖고 있는지 확인하려면 다음과 같이 한다. 

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() 함수로 가지고 와야 한다.

권한이 변경된 경우

초대, 요청

공유

디버깅

결제

이곳을 참고

테스트

리뷰

이곳을 참고

참고

문서 도구

OBG WiKi

사이트 도구