본문 바로가기
Web/JavaScript

[JavaScript] 카카오 아이디로 로그인, 로그아웃 구현

by HyunS_ 2021. 6. 27.
  • 카카오톡 아이디로 로그인, 회원 가입 하는 소스 입니다.
  • 로그아웃은 네이버와 동일하게 세션 초기화 하는 방법을 사용합니다.
  • Kakao Developers 에서 애플리케이션 추가(웹사이트) 및 자바스크립트 키를 확인합니다.
  • 네이버 로그인과는 다르게 별도의 CallBack 페이지가 없습니다.

[login.html]: 카카오톡 로그인 페이지 소스 입니다.

<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script>
        Kakao.init('자바스크립트 Key');
        if(Kakao.isInitialized()){
        var accesstoken= "";
            Kakao.Auth.createLoginButton({
            container:'#kakao-login-btn',
                success : function(e){
                console.log(e);
                accesstoken = e.access_token;
                    Kakao.API.request({
                        url:'/v2/user/me', // 유저 정보 가져오는 api url 
                        success:function(res){
                    var nickname =  res.properties.nickname;

                    sessionStorage.setItem("user_info",res.id);
                    sessionStorage.setItem("user_nick",res.properties.nickname);
                    sessionStorage.setItem("user_email",res.kakao_account.email);
                    sessionStorage.setItem("kinds",'kakao');

                    Kakao.Auth.logout(function(response) {
                        console.log(response);
                        if(response == true){
                            console.log("투루당");
                            location.href = "/comuser/member/join/?flag=WRITE";
                        } else {
                            alert("잘못된 정보입니다. 관리자에 문의해 주시기 바랍니다.");
                        }
                    }); 
                    }
                });

                },
                fail : function(e){
                    console.log(e);
                }

            })
        }else{
            alert('카카오 SDK 초기화 실패');
        }
</script>

[logout.html]: 카카오톡 로그아웃 입니다.

function Logout(){
    sessionStorage.clear();
}
728x90

댓글