[ci4] 소셜로그인 페이스북 로그인/로그아웃

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id', // api key
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v14.0' // graph 안쓰면 최신 14쓰면 된다.
    });
  };
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

페이스북 로직을 호출할 때 초기화시켜주고, 개발용 정보를 넣어주는 부분

 

// 로그인을 했을때 응답부분 체크로 실패인지 아니면 로그인했는지 여부를 확인 가능.
FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

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


// 로그인 상태 체크
FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }

샘플코드도 있고, 내용이 무지 쉽게 구성되어 편했다.

let facebook = document.getElementById('Facebook');
    facebook.addEventListener("click", function() {
        FB.login(function(response) {
            if (response.status === 'connected') {
                alert('페이스북 로그인 클릭함');
                console.log(response);
                FB.api('/me', {fields: 'email'}, function(response) {
                    console.log('Successful login for: ' + JSON.stringify(response));
                });
            } else {
                alert('페이스북 로그인 실패');
                // The person is not logged into your webpage or we are unable to tell. 
            }
        }, {scope: 'email'}); // 해당 부분이 있어야 이메일 권한을 획득한다.
    });

-참고 코드-

https://developers.facebook.com/docs/facebook-login/web?locale=ko_KR 

웹 - Facebook 로그인 - 문서 - Facebook for Developers