OAuth2.0 페이스북 로그인 예제

[ SDK 설정 단계 ]

먼저 JavaScript용 Facebook SDK를 설정한다.

body태그 안에 다음을 입력한다.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{your-app-id}',
      cookie     : true,
      xfbml      : true,
      version    : '{api-version}'
    });
      
    FB.AppEvents.logPageView();   
      
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

{your-app-id}를 앱 ID로 바꾸고 {api-version}을 타게팅하는 API 버전으로 바꿉니다. 현재 버전은v9.0 입니다.

 

 

 

[ 로그인 확인 단계 ]

웹 페이지를 읽어들일 때 사용자가 이미 Facebook 로그인을 했는지 확인한다.

예를 들어 '페이스북 로그인' 버튼을 클릭하면

=> 다음 함수를 실행하여 로그인 상태를 체크하고

=> 로그인 상태에 따라 다음 액션을 취한다.

 

이 함수는 보통 로그인버튼의 onlogin 속성에 입력해서 사용한다. (그 예제는 아래의 [ 로그인버튼 삽입 ] 단계에서 확인할 수 있다.)

 

다음은 해당 함수다.

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

 

위 response 개체는 다음과 같다.

{
   (1) status: 'connected',
   (2) authResponse: {
          accessToken: '...',
          expiresIn:'...',
          signedRequest:'...',
          userID:'...'
    }
}

위에서 (1) status는 다음 중 하나이다.

(1) status 값
connected	사용자가 Facebook 로그인 o / 앱 로그인 o
not_authorized	사용자가 Facebook 로그인 o / 앱 로그인 x
unknown	사용자가 Facebook 로그인 x => 앱에 로그인했거나 FB.logout()이 호출됐는지 알수없음 => Facebook에 연결할 수 없음

 

(connected 상태인 경우) authResponse 값
accessToken	앱 사용자의 액세스 토큰
expiresIn	토큰 만료로, 갱신해야 하는 UNIX 시간
signedRequest	앱 사용자 정보, 서명된 매개변수
userID	앱 사용자 ID

 

[ 로그인 확인 이후 단계 ]

로그인 상태를 확인했으면 다음을 수행할 수 있다.

connected 상태인 경우 => 앱 로그인된 환경으로 리디렉션된다.

not_authorized or unknown => FB.login()을 사용하여 페이스북 로그인 버튼 or 대화상자 메시지를 표시한다.

 

 

[ 로그인 버튼 삽입 ]

로그인 버튼 삽입은 다음 url을 참고한다.

developers.facebook.com/docs/plugins/login-button

 

로그인했는지 확인하는 js 콜백함수를 onlogin 속성으로 입력한다.

<fb:login-button 
  scope="public_profile,email"
  onlogin="checkLoginState();">
</fb:login-button>

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

 

 

 

공식 사이트

developers.facebook.com/apps/426748558342092/fb-login/quickstart/