카카오(Kakao) - 로그인 로그아웃 API 사용하기 (DB에 데이터 저장)

 

https://developers.kakao.com/

Kakao Developers

먼저 위 사이트에 들어가게 되면,

 

로그인 한 후,

이렇게 애플리케이션 추가를 눌러 생성할 수 있다. 

잘 들어오면 이 REST API 키를 확인할 수 있는데, 잘 기억해두자.

 

이후 카카오 로그인을 눌러 활성화 시켜 준 후, Redirect URI을 설정해주자. 

 

이후 설정에 동의항목에 들어가보면, 개인정보를 설정해줄 수 있다. 이거는 카카오톡으로 로그인 했을때,

관리자가 알 수 있는 기능이다. (난 이 데이터를 토대로 DB를 생성해주었다. )

 

그리고 반드시, 로그아웃시 정상적으로 세션이 종료되기 위한 Logout Redirect URI도 설정해주어야한다.

 

자, 이제 본격적으로 코드를 짜보자.

 

---

나는 오라클 DB, Mybatis, 스프링 부트를 이용해서 데이터를 저장해보았다.

 

이전에 대충 쓰다 버린 html을 재활용하여 현재 fragment가 연결된 상태이다. 

 

html

<a href="javascript:kakaoLogin();"></a>
<img src="https://www.kefe.co.kr/m/image/sub/signup/signup_28.jpg" style="height: 30px; width: auto;" onclick="kakaoLogin();" >

Js

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script type="text/javascript" src="/js/admin/cate_manage.js"></script>

위 js 코드 중에서 

 

 

이 스크립트는 카카오톡과 연결하기위한 외부 js로 설정해주어야하고,

그 아래에 있는 스크립트는 내가 사용할 자바스크립트이다.

 

나는 이 화면에서, 카카오 아이디 로그인 버튼을 클릭하면 카카오 로그인 페이지가 나올 것이다.

 

js에서는 최종적으로 이렇게 코드를 짜주었다. 

 

 
function logout(){
    location.href = "https://kauth.kakao.com/oauth/logout?client_id=~~~~~~~~~~~~~~~~~~~~~~~~&logout_redirect_uri=~~~~~~~~~~~~~~~~~~~";
}
 
 
window.Kakao.init("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
 
function kakaoLogin(){
    
    window.Kakao.Auth.login({
        scope:'profile_nickname, account_email, gender',
        success: function(authObj){
 
            console.log(authObj);
            window.Kakao.API.request({
                url:'/v2/user/me',
                success: res => {
                    const kakao_account = res.kakao_account;
                    console.log(kakao_account);
                    
                    alert(JSON.stringify(res));
                    
                     console.log(res);
                    console.log(res.properties['nickname']);
                     console.log(res.kakao_account['email']);
                     console.log(res.kakao_account['gender']);
                      
                      const profileNickname = res.properties['nickname'];
                      const accountEmail = res.kakao_account['email'];
                      const gender = res.kakao_account['gender'];
                      
                      $.ajax({
                            url: '/admin/kakaoAjax', //요청경로
                            type: 'post',
                            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                            data: {'profileNickname' : profileNickname, 'accountEmail' : accountEmail, 'gender' : gender }, 
                            success: function(result) {
                            
                                alert(result['profileNickname']);
                                location.href=`/admin/cateManage`;
                                
                                
                            },
                            error: function() {
                                alert('실패~');
                            }
                        });
                }
            });
            
        }
    });
}

 

window.Kakao.init("~~~~~~~~~~~~~~~~~~");

처음에 있는 이 부분에서는 아까 처음에 만들었던 내 애플리케이션 페이지로 들어가 javascript 키와 연동시켜줘야한다.

 

따라서 이부분을 복붙해주고, 

아래에 있는 kakaoLogin 함수는 카카오 로그인을 하면서, DB에 저장하는 ajax를 함께 구현한 것이다.

 

먼저, 함수를 이까지 실행해보게 되면, 

 

 

 

이렇게 alert창을 거치고,

console.log가 찍히게 된다.

 

이후, 나는 웹에서 출력된 데이터들을 const 변수로 저장시킨 후, ajax를 통해 컨트롤러로 이동시켜주었다.

 

 

 

package com.study.test.admin.controller;
 
import java.util.HashMap;
import java.util.Map;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.study.test.admin.service.AdminService;
import com.study.test.admin.vo.KakaoVO;
import com.study.test.member.vo.MemberVO;
 
import jakarta.annotation.Resource;
 
@Controller
@RequestMapping("/admin")
public class AdminController {
 
    @Resource(name = "adminService")
    private AdminService adminService;
    
    @GetMapping("/cateManage")
    private String cateManage(Model model) {
        
        return "/content/admin/cate_manage";
    }    
    //카카오톡
    @PostMapping("/kakaoAjax")
    @ResponseBody
    public Map<String, Object> kakaoAjax(KakaoVO kakaoVO, String profileNickname, String accountEmail, String gender) {        
        System.out.println(profileNickname);
        System.out.println(accountEmail);
        System.out.println(gender);
        
        kakaoVO.setProfileNickname(profileNickname);
        kakaoVO.setAccountEmail(accountEmail);
        kakaoVO.setGender(gender);
        
        System.out.println(kakaoVO);
        
        adminService.kakaoLogin(kakaoVO);
        
        Map<String, Object> data = new HashMap<>();
                    
        data.put("profileNickname", kakaoVO.getProfileNickname());
        data.put("gender", kakaoVO.getGender());
        
        return data;
    }
}    
    

이렇게 컨트롤러에서 카카오톡 Ajax를 생성해, 변수들을 불러왔고, 그 변수들을 저장할 KakaoVO를 만들었다.

 

KakaoVO를 만들고, 오라클DB에서 테이블도 생성해주었다.

 

이후 이렇게 mapper에서 데이터들을 각각 지정해주고, insert 시켜주었고,

 

이렇게 Service에서 데이터들을 입혀주었다,

 

이후 다시 컨트롤러로 와서, adminService.kakaoLogin(kakaoVO)를 통해 쿼리가 삽입될 것이고,

이후 조회를 해보면, 카카오톡에 담긴 나의 아이디와 이름, 성별을 뽑아낼 수 있다.

 

이후 Map을 이용해 데이터들을 저장시켜준 후, 다시 ajax로 리턴시키게 되었다.

그리고, 다시 ajax로 오게 되면, 

내 이름을 이렇게 귀엽게 띄워줄 것이고, 페이지가 이동하게 된다.

단, 로그아웃을 한 후에, 다시 여기로 오려면 다시 테이블에 삽입되면서 테이블에 넣어주는 과정을 거치게 되는데,

기본키가 중복되어 실패로 뜨면서 페이지 이동이 안될 것이다. 이거는 추후에  수정하는 걸로 합의보자.

---

이제 로그아웃을 해보자.

자바 스크립트 맨위에 

function logout(){
location.href = " https://kauth.kakao.com/oauth/logout?client_id=~~~~~~~~~~~~~~~~~~~~~&logout_redirect_uri=~~~~~~~~~~~~~~~~~~~~~ ";
} 

해당 코드를 삽입해놨다.

 

로그아웃 버튼 클릭시 실행되는 함수인데,

 

https://kauth.kakao.com/oauth/logout?client_id={REST_API_KEY}&logout_redirect_uri={REDIRECT_URI}

원래 이 코드로써,

{REST_API_KEY} 에는 

이걸 넣어주고, 

 

{REDIRECT_URI}에는

이걸 넣어주면 된다.

 

이후 로그아웃 버튼을 누르면 

이 창이 나오는데, 카카오계정과 함께 로그아웃하면, 세션이 종료되는거 까지 마무리할 수 있다.