카테고리 없음

카카오 간편로그인, 로그아웃, 회원탈퇴

미니시리 2023. 3. 12. 22:26

카카오 간편로그인 api 적용 코드 정리

 

로그인 버튼 생성

<li class="btn_sns_login">
    <a id="kakao-login-btn" title="카카오 로그인"></a>
</li>

 

로그인 기능 추가

<script type='text/javascript'>
      //<![CDATA[
        // 사용할 앱의 JavaScript 키를 설정해 주세요.
        Kakao.init('eb7e4e37bbb52884645e581a8b386bb1');
        
        Kakao.isInitialized();
        
        // 카카오 로그인 버튼을 생성합니다.
        Kakao.Auth.createLoginButton({
			container: '#kakao-login-btn',
			success: function(response) {
				console.log("response1", response);
				Kakao.API.request({
					url: '/v2/user/me',
					success: function(response) {
						$('#id').val(response.id);
					  	$('#email').val(response.kakao_account.email);
					  	if(!response.kakao_account.name === '' || response.kakao_account.name === null){
							$('#name').val(response.kakao_account.name);
						} else {
							$('#name').val(response.properties.nickname);
						}
						
						// 유저 아이디, 이메일 주소, 이름을 Session에 저장하였습니다.
		                sessionStorage.setItem("user_sns_id",response.id);

		                // 네이버 로그인과 카카오 로그인을 구분하기 위해 별도의 세션을 저장합니다.
		                sessionStorage.setItem("kinds","kakao");
		                
		                LoginForm.action = contextPath + '/cert/kakao';
		                LoginForm.submit();
						
					},
					fail: function(error) {
						showAlert('회원가입에 실패하였습니다. 관리자에게 문의해주세요',"success");
						console.log("request fail", error);
					}
				});
				
			},
			fail: function(error) {
				console.log("fail", error);
			},
		});
      //]]>
    </script>

 

로그아웃 기능 추가

<script type="text/javascript">
		function kakaoLogout() {
			
			if (!Kakao.Auth.getAccessToken()) {
			  console.log('Not logged in.');	//이지 로그아웃 되어있음
			  return;
			}
			Kakao.Auth.logout(function(response) {
                if(response == true){
                    Kakao.Auth.setAccessToken(undefined);	//토큰 제거
                    sessionStorage.clear();					//세션 제거
                    localStorage.clear();					//로컬스토리지 제거
                } else {
                    alert("잘못된 정보입니다. 관리자에 문의해 주시기 바랍니다.");
                }
			});
	  	}
	</script>

 

회원탈퇴 기능 추가

if('kakao' == kinds){		//탈퇴시 구분할 수 있도록 세션에 kakao를 구분하는 변수를 생성
    Kakao.API.request({
      url: '/v1/user/unlink',
      success: function(res) {
        alert('카카오 회원 탈퇴 되었습니다.');
        location.href = contextPath + '/logout';
      },
      fail: function(err) {
        alert('네이버 탈퇴에 실패하였습니다. 관리자에게 문의바랍니다.');
      },
    });
}