SPRING MVC 카카오톡 로그인 해보기

SPRING MVC 카카오톡 로그인 해보기

카카오톡 로그인이라기보다 카카오톡 간편 가입이라고 제목을 붙였어야 했나 잠깐 고민이되었지만 이게 중요한게 아니니 넘어 가야겠다. 

카카오톡 로그인을 하기 위해선 카카오톡 개발자 사이트에 애플리케이션을 등록해야하는데요. 

developers.kakao.com/console/app

카카오계정 로그인

애플리케이션추가하기

애플리케이션을 추가를 합니다. 입력만 하면 되는거라 어렵지 않을것이에요 입력을 하고 나면 생성이 되는데요. 

요약정보를 눌러보면 앱키를 발급해줘요 저는 자바스크립트로 로그인을 할건데요. 여기서 2가지 앱키가 필요해요. 

JAVASCRIPT 키와 REST API 키가 필요합니다. 

옆에 메뉴를 눌러보다가 보면 플랫폼이라고 보이는데요 거기에 WEB을 추가합니다. 

WEB

WEB를 추가해요. 

카카오 로그인

카카오 로그인을 ON으로 활성화 시켜주세요. 

동의 항목을 설정을 하시구요. 

 

동의항목

이러면 대충 개발자 사이트에선 설정이 된거 같아요. 

여기서 중요한점은 REDIRECT URI 인데요 인데요. 제가 로그인하겠다고 앱키와 넘겨주면 코드값을 받을 주소를 입력하는곳이에요. ^^ 

그럼 세팅이 되었다면 계속 진행해볼께요. 

메뉴를 이동해야 하는데요. 문서 > 카카오로그인 > 이해하기 

여기로 이동해요. developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

그럼 아래쪽에 카카오 로그인 JAVASCRIPT가 보이는데요. 

로그인 설명

여기에 나와 있는대로 차근차근 따라하시면 되요. 

<!-- 카카오 로그인 -->              
<script type="text/javascript" src="https://developers.kakao.com/sdk/js/kakao.min.js" charset="utf-8"></script>
<script type="text/javascript">
//초기화 시키기. 
$(document).ready(function(){	
	Kakao.init('자바스크립트 앱키 입력');
	Kakao.isInitialized();
});
</script>

로그인 하는페이지에 카카오라이브러리를 초기화 시켜주시고요. 

로그인 버튼을 만드시고 실행되게 하세요. 

<script type="text/javascript">
function loginWithKakao() {
  Kakao.Auth.authorize({
	  redirectUri: 'http://localhost:8080/user/loginpage_kakao_callback'
	});
  }
</script>

로그인버튼을 누르면 이렇게 실행이 될껀데요. 그럼 서버에서 코드값을 받아서 넘어와요. 

코드값으로 토근을 값을 받아와야 하는데요 이건 스크립트로 지원하지 않아요 REST API를 사용해서 해야 해요.

컨트롤러 단에서 loginpage_kakao_callback이 호출될때 코드값으로 토근값을 받아와서 페이지로 넘기도록 할게요. 

//카카오톡 로그인.. 
		@RequestMapping(value = "/loginpage_kakao_callback", method = RequestMethod.GET)
		public String loginpage_kakao_callback(HttpServletRequest request, HttpServletResponse response,
				HttpSession session, Model model) throws Exception {
			UrlPathHelper urlPathHelper = new UrlPathHelper();
			String originalURL = urlPathHelper.getOriginatingRequestUri(request);
			Map<String, String[]> paramMap = request.getParameterMap();
			Iterator keyData = paramMap.keySet().iterator();
			CommonData dto = new CommonData();
			while (keyData.hasNext()) {
				String key = ((String) keyData.next());
				String[] value = paramMap.get(key);
				dto.put(key, value[0].toString());
			}
			String url = "https://kauth.kakao.com/oauth/token";
			RestTemplate restTemplate = new RestTemplate();
			HttpHeaders headers = new HttpHeaders();
			headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
			LinkedMultiValueMap<String, String> map = new LinkedMultiValueMap<String, String>();
			map.add("client_id", "REST 앱키를 입력하세요.");
			String redirect_url = "http://localhost:8080/user/loginpage_kakao_callback";
			map.add("redirect_uri", redirect_url);
			map.add("grant_type", "authorization_code");
			map.add("code", dto.get("code"));
            
			HttpEntity<LinkedMultiValueMap<String, String>> request2 = new HttpEntity<LinkedMultiValueMap<String, String>>(
					map, headers);
			CommonData response2 = restTemplate.postForObject(url, request2, CommonData.class);
			map.clear();
			model.addAttribute("access_token", response2.get("access_token"));
			return "/user/loginpage_kakao_callback";
		}

code 값으로 access_token 값을 받아와요. 

그럼 이것으로 이제 사용자 정보를 받아와 볼께요. 

<script type="text/javascript">
var kakao_message = new Object();   
	$(document).ready(function(){	
		var ACCESS_TOKEN= $("#access_token").val();
		//할당받은 토근을  세팅
		Kakao.Auth.setAccessToken(ACCESS_TOKEN);
		console.log(Kakao.Auth.getAccessToken());		
		Kakao.API.request({
		    url: '/v2/user/me',
		    success: function(response) {
		        console.log(response);
		        kakao_message['id']=response['id'];
				kakao_message['email']=response['kakao_account']['email'];
				kakao_message['nickname']=response['kakao_account']['profile']['nickname'];
		        console.log(kakao_message);
		        var m_uid = 'KAKAO_'+kakao_message['id'];
				console.log(""+window.location.hostname+"");
				var data = JSON.stringify({
					uid : m_uid
				 , uname : kakao_message['nickname']
				 , uemail : kakao_message['email']
				 , join_pass : 'KAKAO'
				});
				// 로그인시 서버에서 넘어왔음.. 
				//로그인정보가 있다면 로그인 시도하기.. 
				var url = '/user/userid_duplicate_check';
				getPostData(url,data,callback_userid_duplicate_check, false);	
				
				if(!is_userid) //sns가입된 id가 있다면 로그인 시도.
				{
					url = '/user/naver_kakao_sns_login';					
					getPostData(url,data,callback_join_ok, false);
				}
				else if(is_userid) //sns로 가입된 id가 없다면 가입시도..
				{
					$("#i_id").val(m_uid);
					$("#i_name").val(kakao_message['nickname']);
					$("#i_email").val(kakao_message['email']);
				}
		    },
		    fail: function(error) {
		        console.log(error);
		    }
		});
	});
	
</script>

loginpage_kakao_callback 에서 페이지 로드가 되면 발급 받은 토근으로 정보를 받아와야하는데요. 

Kakao.API.request({ url: '/v2/user/me' }); 를 호출 하면 되요. 

로그인에 성공을 하면 닉네임과 이메일 그리고 id를 받아올수 있었어요. 

이제 이걸로 제가 간편가입을 한적이 있는지 체크를 해볼텐데요. ajax로 알아봐요.

uid로 체크를 하는데요.

체크하는 컨트롤러는 이렇게 해봤어요. 

@RequestMapping(value = "/userid_duplicate_check", method = RequestMethod.POST)
	@ResponseBody
	public CommonData userid_duplicate_check(HttpServletRequest request, HttpServletResponse response, @RequestBody CommonData dto, Model model) throws Exception
	{
		Util_Message smsp = Util_Message.getInstance();
		CommonData result = new CommonData();
		int cnt = first_service.listSearchCount(dto, "MemberMapper.userid_duplicate_check");
		if (cnt > 0)
		{
			result.put("result", "id_duplication");
			return result;
		}
		result.put("result", "ok");
		return result;
	}

간단하게 id중복체크로 가입된적이 있는지 확인을해요.

 <select id="userid_duplicate_check" resultType="int"> 
        SELECT count(1)
          from tb2019_member
     <trim prefix="WHERE" prefixOverrides="AND|OR">
	  	<if test="uid != null and uid != ''">
	   		and uid = #{uid}
	  	</if>
	 </trim>
    </select>

체크가 끝났으면요.

var callback_userid_duplicate_check = function(result)
{
	console.log(result);
	if(result['result']=='id_duplication')
	{	
		is_userid = false;
	}
	else if(result['result']=='ok')
	{													
		is_userid = true;			
	}
}

is_userid값을 확인을 하는데요. 있다면 false값을 넣어 바로 로그인으로 넘기고 없다면 가입하는 절차를 거쳐야 해요. 

휴대폰 번호를 추가로 입력을 받아야해서 카카오에서 받은 이름과 이멜은 입력해주시고요 휴대폰번호만 입력하도록 해요.  이게 필요없다면 자동가입시키시면 되요. 

패스워드는 제가 임의로 생성해서 넣어두었는데요 SNS로 로그인시 아디나 비번을 직접 입력할게 아니라서 임의로 넣었어요. 

그리고 가입처리를 하고나서 로그인 처리를 하시면 됩니다. 

DB는 기존 홈페이지 가입시 쓰는 테이블과 혼용해서 사용중이고요. JOIN_PASS 값으로 카카오 네이버 홈페이지가입 이렇게 처리를 했어요. 이후 방법은 일반적인 홈페이지 내용과 동일해서 이만 줄일게요.