JavaScript용 Facebook SDK와 AngularJS 통합

JavaScript용 Facebook SDK와 AngularJS를 통합할 수 있습니다. 그러나 Facebook SDK는 특정 프레임워크가 아니라 웹에서 작동해야 하므로 AngularJS 모듈은 제공하지 않습니다.

JavaScript용 Facebook SDK 읽어들이기

JavaScript용 Facebook SDK를 앱에 추가하려면 AngularJS 웹 앱에서 Facebook 인증 방법 또는 https://docs.angularjs.org/guide에 게시된 다른 가이드를 따르는 것이 좋습니다.

최신 SDK 버전 사용

가이드를 따를 때는 항상 최신 SDK 파일(sdk.js)을 읽어들이는지 확인해야 합니다.

// Old SDK (deprecated)
js.src = "https://connect.facebook.net/en_US/all.js";

// New SDK (v2.x)
js.src = "https://connect.facebook.net/en_US/sdk.js";

또한 다음과 같이 FB.init() 호출에 그래프 API 버전(현재 v2.4)을 명시해야 합니다.

$window.fbAsyncInit = function() {
    FB.init({ 
      appId: '{your-app-id}',
      status: true, 
      cookie: true, 
      xfbml: true,
      version: 'v2.4'
    });
};

콜백 처리

JavaScript용 Facebook SDK에서는 규약의 개념을 지원하지 않습니다. 예를 들어 임시 해결 방법으로 JavaScript용 Facebook SDK 호출을 서비스에 번들할 수 있습니다.

// ...
.factory('facebookService', function($q) {
    return {
        getMyLastName: function() {
            var deferred = $q.defer();
            FB.api('/me', {
                fields: 'last_name'
            }, function(response) {
                if (!response || response.error) {
                    deferred.reject('Error occured');
                } else {
                    deferred.resolve(response);
                }
            });
            return deferred.promise;
        }
    }
});

다음과 같은 경우에 서비스를 사용합니다.

$scope.getMyLastName = function() {
   facebookService.getMyLastName() 
     .then(function(response) {
       $scope.last_name = response.last_name;
     }
   );
};

타사 라이브러리

AngularJS 가이드 페이지에는 JavaScript용 Facebook SDK를 간소하게 사용할 수 있는 타사 라이브러리도 여러 개 나열되어 있습니다.