스프링 - 카카오톡 로그인 구현 (카카오톡 아이디로 로그인)

1. https://developers.kakao.com/apps홈페이지에 접속해서 "앱 만들기" 버튼을 클릭한다.

2. 밑에 그림처럼 "앱 이름"과 "회사명"을 입력하고 "앱 만들기" 버튼을 클릭한다.

3. "앱 만들기" 버튼을 클릭하면 아래와 같이 화면이 출력되고, 키값들을 따로 적어놓자.

4. 플랫폼을 "웹" 으로 설정하고, "사이트 도메인" 값에 "http://localhost" 주소를 추가함

5. 아래와 같이 사용자 관리 설정과 개인정보 관련 동의사항 체크하고 작성

====================================코드 작성=================================

메인 페이지 (home.jsp) 중 일부

카카오톡이나 네이버 로그인이 되어있지 않을시에는 로그인창을 출력하도록 작성..

(세션에 소셜로그인을 해서 받아온 자료들을 넣고, 로그아웃 버튼을 누를시 컨트롤러로 맵핑되어서 세션을 초기화 시키고,

다시 메인으로 돌아오도록 함)

<!-- url 파라미터로 받은 로그인한 아이디 값이 있을시에는 "name+방문을 환영한다"고 출력이 되고, null값일 때에는 "guest님 방문을 환영합니다" 메시지가 출력되도록 한다.-->
    
    <%
        String navername = request.getParameter("navername");
        String kakaonickname = request.getParameter("kakaonickname");
        
        session.setAttribute("navername", navername);
        session.setAttribute("kakaonickname", kakaonickname);
        
        
        if (navername == null && kakaonickname == 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>
    
    <%
        };
        
    %>

로그인 페이지 (login.jsp) 중 일부 (로그인 버튼을 출력할 페이지)

아래 코드를 작성

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
width=device-width" />
 
 
 
<script src = "//developers.kakao.com/sdk/js/kakao.min.js"></script>
<a id="kakao-login-btn"></a>
<a href="http://developers.kakao.com/logout"></a>
<script type='text/javascript'>
 
Kakao.init('bd21082a499aaa79b4c08e01935a8a70'); //아까 카카오개발자홈페이지에서 발급받은 자바스크립트 키를 입력함
 
//카카오 로그인 버튼을 생성합니다. 
Kakao.Auth.createLoginButton({ 
    container: '#kakao-login-btn', 
    success: function(authObj) { 
           Kakao.API.request({
 
               url: '/v1/user/me',
 
               success: function(res) {
 
                     console.log(res.id);//<---- 콘솔 로그에 id 정보 출력(id는 res안에 있기 때문에  res.id 로 불러온다)
 
                     console.log(res.kaccount_email);//<---- 콘솔 로그에 email 정보 출력 (어딨는지 알겠죠?)
 
                     console.log(res.properties['nickname']);//<---- 콘솔 로그에 닉네임 출력(properties에 있는 nickname 접근 
                             
                 // res.properties.nickname으로도 접근 가능 )
                     console.log(authObj.access_token);//<---- 콘솔 로그에 토큰값 출력
          
          var kakaonickname = res.properties.nickname;    //카카오톡 닉네임을 변수에 저장 (닉네임 값을 다른페이지로 넘겨 출력하기 위해서)
                     
          window.location.replace("http://" + window.location.hostname + ( (location.port==""||location.port==undefined)?"":":" + location.port) + "/hansub_project/home?kakaonickname="+kakaonickname);
          //로그인 결과 페이지로 닉네임 값을 넘겨서 출력시킨다.,
                   }
                 })
               },
               fail: function(error) {
                 alert(JSON.stringify(error));
               }
             });
</script>
 

컨트롤러 (MemberController.java) 중 일부

로그아웃 버튼을 눌렀을때 세션에 저장된 값을 초기화하고, home로 이동

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

출처

https://firstblog912.tistory.com/8