[Vue.js] 미니프로젝트:로그인 처리 - 로그인 컴포넌트 구현

Login 컴포넌트를 구현하자. views 폴더 밑에 Login.vue 파일을 생성하고 router -> index.js에 path: ‘/kakaologin’으로 KakaoLogin.vue를 추가한다.

<template>
    <div>
        <a id="custom-login-btn" @click="kakaoLogin()">
            카카오 계정으로 로그인
        </a>
    </div>
</template>
<script>
export default{ 
    methods:{
        kakaoLogin(){
            window.Kakao.Auth.login({
                scope : 'profile_nickname, profile_image',
                success : this.getKakaoAccount,
            });
        },
        getKakaoAccount(){
            window.Kakao.API.request({
                url : '/v2/user/me',
                success: res => {
                    const kakao_account = res.kakao_account;
                    const nickname = kakao_account.profile.nickname;   // 카카오 닉네임

                    console.log("kakao_account", kakao_account)
                    console.log('nickname', nickname)
                    console.log('profile_image', kakao_account.profile.image)
                },
                fail : error => {
                    console.log(error);
                }

            })
        }
    },
}
</script>

카카오 계정으로 로그인 a태그로 카카오 로그인 연동하기.

window.Kakao.Auth.login() 함수를 호출함으로써, 카카오 계정으로 로그인 팝업을 호출할 수 있다.

이때 주의해야 할 것은 파라미터로 전달되는 scope에 정의된 profile_nickname, profile_image 키다. 이 키는 카카오 개발자 센터에서 동의 항목으로 활성화한 각 항목의 ID이다. 여기서 전달되는 scope가 동의 항목에서 활성화한 항목 ID와 다를 경우 실행되지 않는다.

카카오 개발자 센터에서 등록한 동의 항목을 포함한 카카오 계정으로 로그인 팝업 화면이 나타난다.

동의하고 계속하기 버튼을 클릭하면 등록된 Redifect URI인 http://localhost:8081/login을 호출한다.

이때 구현한 메소드인 getKakaoAccount 메소드가 실행되고, 카카오로부터 동의 항목에 해당하는 정보를 받아오게 된다.

카카오로부터 받아온 사용자 정보를 콘솔에 출력하면 다음과 같은 정보를 확인할 수 있다.

이 정보를 이용해서 로그인을 구현하면 된다. 일반적으로 사용자의 이메일 정보를 사용자 ID로 등록해서 사용합니다.

즉 사용자가 카카오 로그인을 진행하면 사용자의 이메일 정보가 어플리케이션 서버 데이터베이스의 사용자 테이블에 등록되어 있는지 확인하고, 등록이 안되어 있다면 데이터베이스에 등록은 로그인 시키면 된다. 사용자 이메일이 이미 등록되어 있다면 데이터베이스에 등록 절차 없이 로그인시키면 된다.

로그아웃은 window.Kakao.Auth.logout() 함수를 실행하면 된다.

    kakaoLogout(){
        window.Kakao.Auth.logout((response) => {
            // 로그아웃
            console.log(response)
        })
    }