페이스북 로그인 API 적용

적용 화면

 

제일 속 썩였던 페이스북 로그인 ㅠㅠㅠㅠㅠㅠ

 

2018/05/24 - [Error] - Insecure Login Blocked: You can't get an access token or log in to this app from an insecure page. Try re-loading the page as https://

여기 링크보면 알겠지만, 페이스북이 2018년 3월부터 HTTPS 프로토콜만을 고집한대서 localhost 에 겨우겨우 ssl 적용하여 만들었다.. 

  =>SSL적용방법

참고로, 페이스북 document 에서 기재된 방법으로 해보다가 내 입맛에 맞게 리펙토링한 소스다 ㅎㅎㅎㅎㅎ

 

---

loginView.jsp - header 부분, 페이스북 js 연동

<!-- 페이스북 로그인 -->
<script src="https://connect.facebook.net/en_US/sdk.js"></script>

 

loginView.jsp - body 부분, 로그인버튼

 

<!-- 페이스북 로그인 추가 -->
<div id="facebookLogin" align="center">
     <a id="facebook-login-btn" href="#">
        <img src="/images/sns/facebook.PNG">
    </a>
</div>

 

loginView.jsp - javaScript 부분

 

//페이스북 로그인    
$(function(){
    FB.init({
        appId            : '{APPID}',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v3.0'
    });
    
    $("#facebook-login-btn").on("click", function(){
    FB.getLoginStatus(function(res) {
        //console(JSON.stringify(res));
        
        FB.api('/me?fields=name,picture', function(res) {
            res.id += "@f";
            
            $.ajax({
                     url : "/user/json/checkDuplication/"+res.id,
                     headers : {
                         "Accept" : "application/json",
                         "Content-Type" : "application/json"
                  },
                  success : function(idChk){
                          
                      if(idChk==true){ //DB에 아이디가 없을 경우 => 회원가입
                            console.log("회원가입중...");
                            $.ajax({
                                url : "/user/json/addUser",
                                method : "POST",
                                headers : {
                                  "Accept" : "application/json",
                                  "Content-Type" : "application/json"
                                },
                                data : JSON.stringify({
                                  userId : res.id,
                                  userName : res.name,
                                  password : "facebook",
                                }),
                                success : function(JSONData){
                                   alert("회원가입이 정상적으로 되었습니다.");
                                   $("form").attr("method","POST").attr("action","/user/snsLogin/"+res.id).attr("target","_parent").submit();
                                }
                            })
                           }
                          if(idChk==false){ //DB에 아이디가 존재할 경우 => 로그인
                            console.log("로그인중...");
                            $("form").attr("method","POST").attr("action","/user/snsLogin/"+res.id).attr("target","_parent").submit();
                           }
                        }
                 })
            }); //e.o.FB.api
        }); //e.o.FB.getLoginStatus
    })//e.o.onclick
    
});//e.o.facebook

_M#]