카카오 간편로그인!!

세미 프로젝트를 진행하면서 내가 맡은 로그인/마이페이지 파트를 빠른 속도로 구현해 나갔다. 그래서 남은 시간을 활용하여 여러가지 기술들을 하나씩 더 입혔는데 그중에 하나가 바로 카카오 간편로그인이다. 원래는 네이버든 구글이든 상관없었으나 카카오페이를 구현하고 나서 통일성을 주기위해 카카오 간편로그인을 하기로 했다. 되게 간편하고 좋은 기술이지만 막상 이 기술을 사용해보니 내 생각과는 다른점이 매우 많았고 특히나 많은 정보를 주지않는 점 때문에 설계에 신경을 더 많이 썼던것 같다. 

이제 하나씩 구현해보자~

순서

1.카카오 디벨로퍼 가입

2.카카오 디벨로퍼 환경설정

3.코드 구현

1. kakao Developers 가입하기

https://developers.kakao.com/

2. 환경설정

빨간 네모친대로 들어와서 플랫폼에 웹을 추가해주자. 그리고 사이트 도메인에 자신이 제작중인 페이지의 메인화면 주소을 넣으면된다. 카카오 간편 로그인을 했을경우 이 경로로 리다이렉트된다. 그래서 경로가 없거나, 잘못된 경로일 경우(local로 했다가 배포할 경우 오류) 간편로그인이 실패한다. (도메인이 없고 로컬호스트로 테스트중이면 로컬호스트를 넣으면된다.)

두번째 설정을 해줘야하는 부분은 사용자 관리다. 활성화를 시켜주고 가운데 보면 개인정보 보호항목으로 profile의 닉네임/프로필 사진은 필수로 건내주지만 보시다 시피 이메일, 성별, 생일은 연결 시 선택이다. 심지어 카카오는 회원가입 간소화로 인해 성별이나 생일등등 필수로 작성하지 않아서 공란일 확률도 있다. 

근데 그전에 어차피 사용자가 선택항목을 굳이 선택해서 정보를 잘 주지는 않으니까 필수로 건내받는 고유id번호와 닉네임과 프로필 사진 빼고는 그냥 없다고 생각하면된다. 

그래서 보통의 사이트는 필요한 필수 항목을 입력하게 하는 항목을 따로 만들어서 정보를 받던지 굳이 필요한게 아니면 다른 값을 채운다. 필자 같은 경우에도 포폴용 프로젝트기 때문에 개발자 임의의 값을 주고 회원정보 변경에서 바꿀수 있도록 조치를 취했다.

사전 준비는 끝! 이제 개발 가이드로 가서 개발 해보자!!

3.코드구현

여기에 가면 대충 api 코드가 있긴한데 저거대로만 해서는 코드가 실행이 안된다. 그래서 진짜 2~3일간 엄청난 서치끝에 저 코드 뒤에 추가적으로 카카오api로 보내주는 구문을 알아냈다. 

먼저 카카오 로그인이 성공이 되면 Kakao.API.request라는걸 통해 토큰 값으로 카카오에 저장된 회원정보를 가져오는 것 이다. 그러면 res나 JSON을 파싱해서 콘솔로 찍어보면 해당값을 가져올 수 있다. 

그걸 다시 AJAX로 카카오 로그인 서블릿으로 보낸다. 받은 데이터를 가지고 먼저 있는 회원인지 조회를 해보고 있다면 로그인 로직으로 넘어가고 없다면 회원가입 로직을 진행 후 로그인 시켜서 리턴한다.

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

<!-- 카카오 버튼이 생기는 a태그 -->
<div id="kakaoLogin">  
    <a id="kakao-login-btn"></a>
    <a href="http://developers.kakao.com/logout"></a>
</div>
 
<script type='text/javascript'>
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('javascript key');
    // 카카오 로그인 버튼을 생성합니다.
    Kakao.Auth.createLoginButton({
      container: '#kakao-login-btn',
      success: function(authObj) {
          
          //로그인 성공시, kakao API를 호출한다.(카카오에 있는 데이터 불러옴)
          Kakao.API.request({
              url: '/v2/user/me',
              success: function(res){
                  console.log(res);
                  console.log(res.id);
                  console.log(res.kakao_account);
                  console.log(JSON.stringify(res.properties.nickname));
                  console.log(JSON.stringify(res.kakao_account.email));
                  console.log(JSON.stringify(res.kakao_account.gender));
                  console.log(JSON.stringify(res.kakao_account.birthday));
                 $.ajax({
                    url:"<%=request.getContextPath()%>/member/kakaoLogin",
                    data:{"id":res.id, "name":JSON.stringify(res.properties.nickname)},
                    Type:"post",
                    success:function(data){
                        //성공적으로 하고나면 이동할 url
                        location.href="<%=request.getContextPath()%>/";
                    }
                    
                 });
              },
              fail: function(error){
                  alert(JSON.stringify(error));
              }
          });
         //접속된 회원의 토큰값 출력됨
        //alert(JSON.stringify(authObj));
        
      },
      fail: function(err) {
         alert(JSON.stringify(err));
      }
    });
</script>  

카카오 정보를 넘겨받은 서블릿

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        HttpSession session = request.getSession();
        String id = request.getParameter("id");
        String name = request.getParameter("name");
        //이름이 "홍길동" 식으로 넘어오기 때문에 "으로 짤라줌
        String[] names = name.split("\"");
        
        //회원이 있는지 검사, 없으면 회원가입부터 진행 후 로그인
        Member m = new MemberService().memberLogin(id);
        
        if(m==null) {
            //회원가입이 필요
            Member m2 = new Member();
            m2.setMemberId(id);
            //빈칸을 암호화 (로그인할 때 빈칸은 막히기 때문에 카카오로 로그인하는거 아니면 접근이 불가)
            m2.setMemberPw("z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg==");
            //실제 이름이 저장된 인덱스
            m2.setMemberName(names[1]);
            //일단 디폴트로 남자로 입력했음
            m2.setGender("남");
            //다른 데이터는 카카오에게 넘겨받지 못했다는 문구로 대체
            m2.setAddress("카카오에서 넘겨받은 데이터가 없습니다.");
            m2.setPhone("카카오에서 넘겨받은 데이터가 없습니다.");
            m2.setBirth("카카오에서 넘겨받은 데이터가 없습니다.");
            m2.setEmail("카카오에서 넘겨받은 데이터가 없습니다.");
            
            //카카오 자동 회원가입 로직 실행
            int rs = new MemberService().kakaoEnroll(m2);
            
            if(rs>0) {
                //회원가입 했으니 로그인까지 연동
                
                //memberNum 데이터는 못불러와서 그거 가져오기위해 다시 실행
                Member m3 = new MemberService().memberLogin(id);
                
                session = request.getSession();
                session.setAttribute("logined", m3);
                response.getWriter().append("/");
            }else {
                System.out.println("카카오 회원가입 실패");
            }
            
        }else {
            //있는 회원
            session.setAttribute("logined", m);
            response.getWriter().append("/");
        }
        
    }
 
 

우선 필자는 카카오가 주는 고유 id를 회원 아이디로 사용했고 확실하게 받을 수 있는 이름만 대입했다. 나머지의 경우에는 "카카오에서 넘겨받은 데이터가 없습니다."라고 처리를 했다. 예외처리가 가능하긴 했지만 세미발표 2일전에 완성시킨거라 어쩔수 없이 저렇게 처리했다. 

이제 남은건 비밀번호인데 여기는 일반 로그인 로직에서 사용할 수 없는 값이면 괜찮을것 같다. 나만의 방식이라 이게 어떨지 모르겠는데.. 내 홈페이지 같은 경우에는 로그인할 때 공백이 있으면 로그인이 안되기에 공백을 암호화해서 넣었다.

(비밀번호 칸을 비워두는것도 위험할거 같아서..) 

그렇게하면 카카오 간편 로그인을 통해 얻은 고유id 값 말고는 접근이 불가하다. 이런식으로 하면 간편로그인이 깔끔하게 구현이 된다.