Spring - 카카오톡 로그인 기능 구현 하기 -2

먼저 카카오 API 키 중 javascript 키를 입력하여 Kakao.init으로 카카오 api를 실행한다.

 

api.properties파일에서 api 키를 받아와 전달하여 KaKao.init을 해준다.

 

이제 코드로 들어가서 이전 개발자 페이지에 등록한 주소로 요청되는 페이지에 카카오 버튼을 만든다.

 

 

카카오 api 기능을 쓰기 위해서 해당 페이지 상단에 아래 코드를 추가한다.

 

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

해당 코드가 먼저 선언되야지 카카오 api를 사용 가능하다.

 

그 후 kakaoLogin() 함수를 아래와 같이 구성한다.

 

function kakaoLogin() {
	Kakao.Auth.login({
		success: function (response) {
		Kakao.API.request({
			url: '/v2/user/me',
			success: function (response) {
				kakaoLoginPro(response)
			},
			fail: function (error) {
				console.log(error)
			},
		})
	},
		fail: function (error) {
			console.log(error)
		},
	})
}

 

아주 간단하게 로그인 창을 띄울 수 있고, 로그인이 성공하면 내부에 있는 response에 유저 정보가 담긴다.

 

아래와 같이 정보가 온다.

개발자 모드에서 설정을 하면 더 많은 정보를 얻을 수 있다.

 

이제 해당 정보를 토대로 네이버와 동일하게 가입 및 로그인을 시키면 된다.

 

스프링(백엔드)에 정보를 보내기 위해서 kakaoLoginPro 함수를 만들어 ajax를 사용하여 데이터를 보냈다.

 

해당 함수는 아래와 같다.

 

function kakaoLoginPro(response){
	var data = {id:response.id,email:response.kakao_account.email}
	$.ajax({
		type : 'POST',
		url : '/user/kakaoLoginPro.do',
		data : data,
		dataType : 'json',
		success : function(data){
			console.log(data)
			if(data.JavaData == "YES"){
				alert("로그인되었습니다.");
				location.href = '/user/usermain.do'
			}else if(data.JavaData == "register"){
				$("#kakaoEmail").val(response.kakao_account.email);
				$("#kakaoId").val(response.id);
				$("#kakaoForm").submit();
			}else{
				alert("로그인에 실패했습니다");
			}
			
		},
		error: function(xhr, status, error){
			alert("로그인에 실패했습니다."+error);
		}
	});

위와 같이 받아 온 데이터를 객체로 변환하여 넘겨준다.

 

이제 네이버 로그인에 이어서 DB 설정 및 스프링 코드를 작성해야한다.

 

해당 부분은 3장에서!