웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

페이스북 api 활용 방법 함수 메소드, 속성 알아보기

Last Modified : 2018-08-22 / Created : 2015-07-12
9,049
View Count
페이스북은 여러 API를 제공하고 있습니다. 이런 API는 웹이나 앱을 개발하거나 여러 용도로 활용할 수도 있죠. 참고로 페이스북 API는 아래 주소인 페이스북 개발자 사이트에서 받으실 수 있습니다.
페이스북 개발자 사이트 바로가기 >

만약 페이스북 API를 사용하여 페이스북과 연동 후 다양한 기능을 사용하려면 어떻게할까요? 예를들어 많이 사용하는 api 기능으로는 '좋아요', '공유하기' 그리고 페이스북 로그인등이 있습니다. 이런 api를 사용하기 위해서는 구동되는 환경에 따라 달라지며 웹어플리케이션(Web application)의 경우 자바스크립트를 SDK를 사용하는 방법이 있습니다.

아래 주소는 SDK for Javascript, 즉 자바스크립트를 위한 sdk를 제공하고 이를 설치하는 방법 및 사용방법에 대한 메뉴얼 등을 제공하므로 참고하시기 바랍니다.

SDK for javascript - Facebook

SDK를 설치하게 되면 웹에서 페이스북을 활용할 수 있는 다양한 기능이 제공되며 이를 사용할 수 있도록 FB객체와 아래와 같은 메소드를 제공합니다.
.init() - 초기 설정 및 기타 셋업
.api() - Graph API를 사용
.ui() - 대화창 인퍼페이스 설정

그럼 실제로 어떻게 사용하는지는 아래에서 알아보세요.




# 페이스북 로그인 관련 메소드

아래의 메소드는 FB SDK를 사용하여 가장 많이 사용되는 메소드입니다. 먼저 로그인 기능을 수행하는 메소드입니다.
FB.login() // 로그인 창을 띄움

FB.logout() // 현재 로그인되있을 경우 로그아웃함

이제 FB의 메소드를 사용하여 로그인하거나 로그아웃 할 수 있습니다.


! 로그인으로 가져올 권한 정하기, scope

로그인 후 원하는 정보를 불러오려면 사용자에게 어떤 정보를 앱 또는 웹에서 원하는지 확인하는 과정이 필요하겠죠. 이런 로그인은 아래와 같이 사용하여 설정하고 로그인할 수 있습니다.
FB.login(function(response) {
  console.log(response);
},
{
  scope: 'public_profile,email, user_friends'
});

위 코드는 public_profile과 email 그리고 친구목록 요청하고 있습니다. 더 많은 scope는 페이지 최하단의 정보를 참고하세요.

만약 현재의 로그인 상태를 알아보려면? 그때는 아래와 같이 getLoginStatus() 메소드를 사용합니다.
FB.getLoginStatus() // 로그인 상태를 확인하고 콜백함수를 실행함

여기까지 로그인 관련 메소드라면 아래는 실제 사용자 정보를 가져오는 방법에 대하여 자세히 알아봅니다.



# 페이스북 사용자의 정보 가져오기

로그인 이후 앱에 설정된 권한과 로그인한 유저가 승인한 권한에 대하여 값을 가져올 수 있습니다. 이때 가져오는 정보는 다양한데 이름이나, Facebook ID, 프로필 사진, 친구목록, 좋아요 수 등등 매우 다양한 정보를 가져오게됩니다.

정보를 가져오는 경우 Graph API를 사용하는데 아래와 같이 api() 메소드를 사용합니다.

FB.api()


현재 사용자의 Facebook 정보는 아래의 명령어를 통해 콘솔에서 보여줄 수 있습니다.
FB.api('/me', function(response) { console.log(response.name); });
// 콘솔창에 접속자의 네임 등등 출력

가져오는 정보는 기본적으로 가져올 수 있는 정보와 앱 설정에서 추가된 정보등을 제한적으로 가져오게됩니다. 특정 정보들을 가져올 경우 앱 검수 등이 필요할 수 있으니 참고하시기 바랍니다. 이 경우 페이스북 개발자 페이지에서 권한을 얻어 가져와야 할 것입니다.

@ 가져올 수 있는 scope 리스트

  • email
  • groups_access_member_info
  • publish_to_groups
  • user_age_range
  • user_birthday
  • user_events
  • user_friends
  • user_gender
  • user_hometown
  • user_likes
  • user_link
  • user_location
  • user_photos
  • user_posts
  • user_tagged_places
  • user_videos

이처럼 정말 많은 정보를 가져올 수 있습니다.

Previous

풀스택 개발자란 Full Stack Developer

Previous

eDM 마케팅 메일 퍼블리싱할 경우 생각할 점들