ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 카카오 간편로그인, 로그아웃, 회원탈퇴
    카테고리 없음 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('네이버 탈퇴에 실패하였습니다. 관리자에게 문의바랍니다.');
          },
        });
    }

    댓글

Designed by Tistory.