이번에 카카오API를 통한 연동 방식에 대해 도움을 주고자 새롭게 카테고리를 오픈하였다. 

특히 카카오 로그인 API의 경우 평소 많이 쓰기도하지만 나같은 경우 JAVASCRIPT 방식은 거의 접하지 않아

혹시나 사용할 일이 생길 경우 참고하기 위해 포스팅을 하게되었다. 

물론 카카오 로그인 API 문서에도 잘 명시되어있고 팝업의 경우 가장 난이도가 낮기때문에

사용 및 접근하기가 쉽다. 

아래는 소스코드 샘플이니 혹시나 연동할일이 있을 경우 카카오API 문서와 함께 참고하여  개발하면 

많은 도움이 될 듯 하다. 

다음편은 PHP 에서 REST API를 통한 카카오로그인 인증편을 포스팅할 예정이다.

<div class="wrap-kakao-login">
	<h1>카카오톡 API를 이용한 로그인 샘플(팝업방식)</h1>
	<ul>
		<li><a href="/kakao-login.php">처음화면으로</a></li>
		<li><a href="#none" onclick="kakaoLogin.getLoginCheck(); return false;">로그인 인증체크</a></li>
		<li><a href="#none" onclick="kakaoLogin.logout(); return false;">로그아웃</a></li>
		<li><a href="#none" onclick="kakaoLogin.auth();return false;" class="kakao-login"><img src="//k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="180" alt="카카오 로그인 버튼"/></a></li>
	</ul>
	<h3>인증후 사용자 정보(아이디(고유번호),이메일,닉네임,성별)</h3>
	<ul>
		<li>아이디(고유번호): <input type="text" name="id" value=""></li>
		<li>닉네임: <input type="text" name="nickname" value=""></li>
		<li>이메일: <input type="text" name="email" value=""></li>
		<li>성별: <input type="text" name="gender" value=""></li>
	</ul>
</div>
<style>
	.wrap-kakao-login{ padding:2%; }
	.wrap-kakao-login li{ margin:10px 0; }

</style>

<!-- jquery 라이브러리 : version 2.2.4 -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<!-- kakao sdk -->
<script src="//developers.kakao.com/sdk/js/kakao.js"></script>
<script type="text/javascript">
	var kakaoLogin = {

		/* 설정 : <수정필요> */
		config : {
			javascriptKey : '카카오 developers > 내 애플리케이션 에서 발급받은 javascript 키값',
			redirectUri : '카카오 developers > 내 애플리케이션 에서 설정한 리다렉트 URL',
			errmsg : new Array('현재 카카오로그인 서비스를 이용할 수 없습니다.','카카오로그인 서비스 인증정보가 올바르지 않습니다.','카카오로그인 정보 호출에 실패하였습니다.','예기치 못한 오류가 발생하였습니다.')
		} ,

		/*초기화*/
		init : function(){
			try{
				var thisEl = this;
				Kakao.init(kakaoLogin.config.javascriptKey);
				if( Kakao.isInitialized() !== true){
					throw thisEl.config.errmsg[0];
				}
			}catch(e){
				return thisEl.debug(e);
			}
		},

		/*로그인인증(팝업)*/
		auth : function(){
			try{
				var thisEl = this;
				Kakao.Auth.login({
					success: function(response) {
						try{
							if(response.access_token) {
								Kakao.Auth.setAccessToken(response.access_token);
								thisEl.getUserInfo();
							}else{
								throw thisEl.config.errmsg[1];
							}
						}catch(e){return thisEl.debug(e);}

					},
					fail: function(e) {
						return thisEl.debug(e);
					},
				});
			}catch(e){
				return thisEl.debug(e);
			}
		},

		/*로그아웃*/
		logout:function(){
			try{
				if (!Kakao.Auth.getAccessToken()) {
				  alert("로그인중이 아닙니다.");
				  return;
				}
				Kakao.Auth.logout(function() {
					$('input[name="id"]').val('');
					$('input[name="email"]').val('');
					$('input[name="nickname"]').val('');
					$('input[name="gender"]').val('');					
				  alert("로그아웃되었습니다.");

				});				
			}catch(e){
				return thisEl.debug(thisEl.errmsg[3]);
			}		
		},

		/*로그인체크*/
		getLoginCheck : function(){
			var thisEl = this;
			Kakao.Auth.getStatusInfo(({ status }) => {
				try{
					if( status == 'connected'){ 
						alert("현재 로그인 중입니다.");
					}else{
						alert("현재 로그인중이 아닙니다.");
					}
				}catch(e){ return thisEl.debug(thisEl.config.errmsg[3]);}
			});
		},

		/*사용자정보가져오기*/
		getUserInfo : function(){
			try{
				var thisEl = this;

				Kakao.Auth.getStatusInfo(({ status }) => {
					try{
						if( status == 'connected'){ 
							Kakao.API.request({
								url: '/v2/user/me',
								success: function(res) {
									if(typeof res.id != 'undefined' && res.id ) $('input[name="id"]').val(res.id);
									if(typeof res.kakao_account.profile.nickname != 'undefined' && res.kakao_account.profile.nickname ) $('input[name="nickname"]').val(res.kakao_account.profile.nickname);
									if(typeof res.kakao_account.email != 'undefined' && res.kakao_account.email ) $('input[name="email"]').val(res.kakao_account.email);
									if(typeof res.kakao_account.email != 'undefined' && res.kakao_account.email ) $('input[name="gender"]').val(res.kakao_account.gender);
								},
								fail: function(error) {
									return thisEl.debug(thisEl.config.errmsg[2]);
								}
							});
						}else{
							return thisEl.debug(thisEl.config.errmsg[2]);
						}
					}catch(e){ return thisEl.debug(thisEl.config.errmsg[3]);}
				});

			}catch(e){return thisEl.debug(e);}
		},

		/*디버깅*/
		debug : function(msg){
			try{
				if( typeof msg == 'string'){ alert(msg); }
				else{ console.log(msg); }
			}catch(se){console.log(se);}
			return false;
		}
	}
	/*카카오로그인 API 초기화*/
	$(document).ready(function(){
		kakaoLogin.init();
	});
</script>