카카오 로그인 API 적용

 

jQuery 와 Ajax 를 이용해 카카오로그인을 구현했다.

각 sns로그인 구분을 위해 카카오서버에서 받아온 id값 뒤에는 "@k" 를 붙였고,

id값이 회원DB에 존재하지 않는 경우 바로 회원가입하고 로그인하여 index.jsp 로 이동되게끔 처리했다.

 

---

loginView.jsp - javaScript 부분

//카카오 로그인
Kakao.init('javascript APP KEY');
        
$("#kakao-login-btn").on("click", function(){
    //1. 로그인 시도
    Kakao.Auth.login({
        success: function(authObj) {
          //console.log(JSON.stringify(authObj));
          //console.log(Kakao.Auth.getAccessToken());
        
          //2. 로그인 성공시, API를 호출합니다.
          Kakao.API.request({
            url: '/v1/user/me',
            success: function(res) {
              //console.log(JSON.stringify(res));
              res.id += "@k";
              
              $.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.properties.nickname,
                                  password : "kakao123",
                                }),
                                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();
                        }
                    }
              })
            },
            fail: function(error) {
              alert(JSON.stringify(error));
            }
          });
                  
        },
        fail: function(err) {
          alert(JSON.stringify(err));
        }
      });
        
})//e.o.kakao

 

 

loginView.jsp - HTML 부분

 

<!-- 카카오 로그인 추가 -->
<div id="kakaoLogin" align="center">
    <a id="kakao-login-btn">
    <img src="//k.kakaocdn.net/14/dn/btqbjxsO6vP/KPiGpdnsubSq3a0PHEGUK1/o.jpg" width="80%"/>
    </a>
    <a href="http://developers.kakao.com/logout"></a>
</div>

 

userController.java

 

@RequestMapping(value="snsLogin/{userId}", method=RequestMethod.POST)
public String snsLogin( @PathVariable String userId, HttpSession session ) throws Exception{
    System.out.println("/user/snsLogin : POST");
        
    User dbUser = userService.getUser(userId);
        
    session.setAttribute("user", dbUser);
        
    return "redirect:/index.jsp";
}