페이스북 연동 로그인 API

페이스북 로그인 관련

엑세스 토큰 관련 설명은 카카오톡 API 참고.

<!-- 페이스북 아이디를 연동해서 로그인 -->
 
 <center>
<button type= "button" id= "loginBtn" ><img src="C:/img/facelogin.png"/>페이스북 로그인</button>
 </center>
 
            <div id="access_token"></div>
            <div id="user_id"></div>
            <div id="name"></div>
            <div id="email"></div>
            <div id="gender"></div>
            <div id="birthday"></div>
            <div id="id"></div>            
            
<script>
function getUserData() { //유저의 데이터를 가지고 오는 함수
    /* FB.api('/me', function(response) {
        document.getElementById('response').innerHTML = 'Hello ' + response.name;
        console.log(response);
    }); */
    FB.api('/me', {fields: 'name,email'}, function(response) { 

//유저의 이름과 이메일을 가져오는 것이 성공하면 변수에 그 값을 저장시킨다.
        
        var facebookname = response.name;    //페이스북 아이디를 변수에 저장함
        var facebooke_mail = response.email;    //페이스북 이메일을 변수에 저장함
        
        //해당 주소로 이동
        window.location.replace("http://" + window.location.hostname + ( (location.port==""||location.port==undefined)?"":":" + location.port) + "/hansub_project/home?facebookname="+encodeURI(facebookname)+"&facebooke_mail="+facebooke_mail);
 
    });
}
  
window.fbAsyncInit = function() {
    //SDK loaded, initialize it
    FB.init({
        appId      : '488986078336253', //페이스북 개발자 홈페이지에서 앱을 등록하고, 앱 id를 받아온다.
        cookie     : true,  // enable cookies to allow the server to access
                // the session
        xfbml      : true,  // parse social plugins on this page
        version    : 'v3.3'     // 페이스북 개발자 홈페이지에서 버전을 확인한 후 작성한다.
    });
  
    //check user session and refresh it

   //유저의 로그인 상태를 판단하는 함수, 로그인이 되어있다면 해당 유저의 데이터를 가져온다.
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {        //만약 정상적으로 실행되었다면 유저의 데이터를 가져온다.
            //user is authorized
            //document.getElementById('loginBtn').style.display = 'none';
            getUserData(); 
            
        
            
        } else {
            //user is not authorized
        }
    });
};
  
//load the JavaScript SDK
(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 = "//connect.facebook.com/ko_KR/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
  
//add event listener to login button
document.getElementById('loginBtn').addEventListener('click', function() {
    //do the login
    FB.login(function(response) {
        if (response.authResponse) {

            //엑세스 응답 토큰을 가져와 변수에 저장
            access_token = response.authResponse.accessToken; //get access token
            user_id = response.authResponse.userID; //get FB UID 
            //이메일을 가져와야 한다.


            console.log('access_token = '+access_token);
            console.log('user_id = '+user_id);
            //user just authorized your app
            //document.getElementById('loginBtn').style.display = 'none';
            getUserData();
        }
    }, {scope: 'email,public_profile,user_birthday',
        return_scopes: true});
}, false);
 
 
 
</script>