스프링 - 페이스북 로그인 구현 (페이스북 아이디로 로그인)

1. https://developers.facebook.com/ (페이스북 개발자센터 접속) 하고, 앱 만들기 선택

2. 앱을 등록했다면 Facebook 로그인 -> 시작하기 버튼 선택, 플랫폼을 웹으로 선택

============================== 코드 부분=========================================

1. 로그인 페이지 (login.jsp) 로그인 버튼을 구현할 부분

<!-- 페이스북 아이디를 연동해서 로그인 -->
 
 <center>
<button type="button" id="loginBtn"><img src="file:///C:/Users/user/git/hs_project/hansub_project/src/main/webapp/WEB-INF/views/images/facelogin.jpg" />페이스북으로 로그인</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;
        window.location.replace("http://" + window.location.hostname + ( (location.port==""||location.port==undefined)?"":":" + location.port) + "/hansub_project/home?facebookname="+facebookname);
 
    });
}
  
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' // use graph api version 2.8 //페이스북 개발자 홈페이지에서 버전을 확인해서 작성해야 한다.
    });
  
    //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>

2. 메인 페이지 (home.jsp) 페이스북으로 로그인을 하면 사용자의 "이름" 을 받아서 세션에 담아 출력하는 부분

<!-- url 파라미터로 받은 로그인한 아이디 값이 있을시에는 "name+방문을 환영한다"고 출력이 되고, null값일 때에는 "guest님 방문을 환영합니다" 메시지가 출력되도록 한다.-->
    
    <%
        String navername = request.getParameter("navername");
        String kakaonickname = request.getParameter("kakaonickname");
        String facebookname = request.getParameter("facebookname"); //url로 넘긴 name를 파라미터로 받는다.
        
        session.setAttribute("navername", navername);
        session.setAttribute("kakaonickname", kakaonickname);
        session.setAttribute("facebookname", facebookname);  //그리고 그 값을 세션에 저장한다.
        
        
        if (navername == null && kakaonickname == null && facebookname == null) {
    %>
        guest님 방문을 환영합니다.
    <%@ include file="member/login.jsp"%>
    
    <%
        } else if (navername != null){
    %>
    <%=" (네이버) "+session.getAttribute("navername")%>님 방문을 환영합니다.
    <form action ="naver_logout.do" method = "post">
    <button type = "submit" name = "submit" >로그아웃</button>
    </form>
    
    <%    
        } else if (kakaonickname != null){
    %>
    
    <%=" (카카오톡) "+session.getAttribute("kakaonickname")%>님 방문을 환영합니다.
    
    <form action = "kakao_logout.do" method = "post">
    <button type = "submit" name = "submit">로그아웃</button></form>
    
    <%
        } else if (facebookname != null){  //name값이 null값이 아닐때 실행되는 부분.
    %>
    
    <%=" (페이스북) "+session.getAttribute("facebookname")%>님 방문을 환영합니다.
    
    <form action = "facebook_logout.do" method = "post">
    <button type = "submit" name = "submit">로그아웃</button></form>
    
    <% 
    
        };
    
    %>

3. 컨트롤러 (MemberController.java) 로그아웃시 맵핑되는 부분

    //페이스북 관련 로그아웃 메소드
        @RequestMapping("facebook_logout.do")
        public String facebook_logout(HttpSession session, HttpServletRequest request) {
                    
        //세션에 담긴값 초기화
        session.invalidate();
                    
        return "home";
    }

출처

http://blog.naver.com/PostView.nhn?blogId=daeng2c&logNo=220946788245&parentCategoryNo=&categoryNo=13&viewDate=&isShowPopularPosts=true&from=search