4. 페이스북 로그인 OAuth 기능 구현 (SDK used)

앞서 말한 것처럼 SDK를 사용하지 않고 앞과 같은 예제로 기능을 구현한다면 보안상 문제점이 굉장히 많다.

이러한 보안을 모두 커버하기에는 개발자에게는 한계가 많다. 때문에 각 기업에서 제공하는 SDK 도구를 이용하여 해결해야 한다. 하지만 SDK 도구를 이용하더라도 현실의 복잡성을 대신해주긴 하지만 사용법도 복잡하고, 러닝 커브가 높다. 때문에 앞서 설명한 OAuth의 본질적인 원리를 이해해야 하는 것이 필수이다.

 

1. Facebook Login SDK 사용

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.3'
    });
  };
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

 SDK가 다운되고 자동으로 fbAsyncInit 함수가 호출되도록 설계되어 있다. 또한 SDK의 로드가 끝나고 사용하는 FB.init 메서드를 호출하여 app-ID를 초기화하도록 되어 있다.

눈치를 챘다면 FB에서 여러 가지 로그인에 관한 상태를 설정하고 체크할 수 있는 메서드가 들어있다. ( SDK 세부 사용 설명서 )

 

2. SDK 호출 할 fb-sdk.html 생성 후 로그인 상태 체크

위에서 설정한 fbAsyncInit 함수 안에서 getLoginStatus 함수를 통해 로그인 상태를 체크한다.

FB.getLoginStatus(function(response) {
                    if(response.status === 'connected') {
                        document.querySelector('#authBtn').value = "Logout";
                    } else {
                        document.querySelector('#authBtn').value = "Login";
                    }
                })

만약 정상적으로 로그인 되어 있다면 connected와 함께 이에 해당하는 정보가 들어있을 것이다.

 

3. 로그인 상태를 확인할 버튼 생성

<input type="button" value="checking....." id="authBtn">

만약 로그인이 되어있다면 Logout으로, 로그인이 되어있지 않다면 Login으로 버튼이 바뀔 것이다.

 

 4. 버튼 이벤트 설정

페이스북 로그아웃에 대한 정보를 찾아본다.

FB.logout(function(response) {
   // Person is now logged out
});

 

다음 로그인과 로그아웃 상태에 따른 기능 추가.

<input type="button" value="checking....." id="authBtn" onclick="
            if(this.value === 'Login') {
                FB.login(function(response) {
                    location.reload();
                });
            } else {
                FB.logout(function(response) {
                    location.reload();
                });
            }
        "> 

 

 5. 로그인 시에 사용자 이름을 받아 출력

출력할 div 생성하자.

<div id="welcome"></div>

 

페이스북에서 이제 사용자 정보를 얻어 올 수 있는 FB.api를 활용한다.

FB.api(
  '/me',
  'GET',
  {},
  function(response) {
      // Insert your code here
  }
);

 

이제 로그인 체크시에 로그인 상태라면 사용자 이름을 받아서 출력할 수 있도록 한다.

FB.getLoginStatus(function(response) {
                    if(response.status === 'connected') {
                        document.querySelector('#authBtn').value = "Logout";
                        FB.api(
                            '/me',
                            'GET',
                            {"fields":"id,name"},
                            function(response) {
                                document.querySelector('#welcome').innerHTML = "Welcome, " + response.name;
                            }
                        );
                    } else {
                        document.querySelector('#authBtn').value = "Login";
                    }
                })

 

이전에 SDK를 사용하지 않았을 때와 비교해보면 access token을 전혀 사용자가 사용하지 않았다는 것이다. 이처럼 실제 내부적으로는 access token을 이용하여 Resource Server와의 인증절차가 있지만, SDK를 사용하여 간편하게 이용할 수 있는 것이다.

 이 과정에서 생각해야 할 부분은 access tokend의 권한 범위이다. 앞서 AOuth의 원리를 설명할 때 access token은 Resource Server에서 제공하는 api의 접근을 인증하기 위한 수단이라 하였는데, 이러한 access token은 모든 기능에 접근할 수 있는 것이 아니다. 이름과 같은 보안 요구가 낮은 정보는 별로의 작업 없이 가져올 수 있지만, 이메일과 같은 private 한 정보는 별도의 작업이 필요로 한다.

 이처럼 프로그래밍에서는 접근 범위를 scope라고 부르고, 이 범위에 따라 이용할 수 있는 기능이 달라진다.

 

6.  Login 함수 호출 시 Scope 설정

* 페이스북 SDK Scope 설정

* 페이스북 SDK Scope 사용자 데이터 목록

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

 

7. api 호출시 Scope 설정

여기서 3번째에 들어가는 필드가 원하는 Scope이다. Scope로 원하는 값을 얻어 낼 수 있다. 

FB.api(
  '/me',
  'GET',
  {"fields":"id,name,email"},
  function(response) {
    console.log(response);
    document.querySelector('#welcome').innerHTML = "Welcome, " + response.email;
  }
);