미니 프로젝트 - 로그인 처리

카카오 계정으로 로그인하기

 

1. 카카오 개발자 센터에 접속한 다음 회원가입해주세요
2. '내 어플리케이션' 클릭
3. '어플리케이션 추가하기' 클릭
4. 어플리케이션을 생성한 후 클릭
5. 플랫폼 등록을 해준 후 web에 사이트 도메인을 넣어줍니다.

이후 아래 기록 사항을 따라해주세요.

• 카카오 로그인 사용 시 Redirect URI를 등록해야 합니다.등록하러 가기 << 클릭
• 카카오 로그인 활성화시키기
• Redirect URI 등록하기
• http://localhost:8080/login 입력하기
• 내 애플리케이션>제품 설정>카카오 로그인>동의항목    에서 프로필 정보를 필수 동의로 설정합니다.

• 내 애플리케이션>제품 설정>카카오 로그인>동의항목    에서 카카오 이메일을 선택 동의로 설정합니다.
• VS Code를 열어 public/index.html 파일을 열어 아래 코드를 추가합니다.

• main.js 파일을 열고 제일 하단에 window.Kakao.init("3fd5dc287ce0db69209e1644d1a0273d");를 넣어줍니다.          (괄호 안에 있는 키는 카카오에서 제공한 어플리케이션에서 발급받은 자바스크립트 키를 넣어줍니다.)
• npm run serve (서버 재가동 필요~!)

 

아래서부터는 <Vue.js 프로젝트 투입 일주일 전> 코드랑 살짝 차이가 있다.

• src.view.KakaoLogin.vue 파일을 열어 아래 코드를 입력한다.

<template>    <div>        <a id="custom-login-btn" @click="kakaoLogin()">        <img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" width="222"         /></a></div> </template><script>export default {      methods:{            kakaoLogin() {            window.Kakao.Auth.login({                scope : 'profile_nickname, account_email',                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; //카카오 닉네임                    const email = kakao_account.email;                    console.log('nickname', nickname);                    console.log('email', email);                     alert("로그인 성공!");                },                fail : error => {                    console.log(error);                }            })        }    }}</script>

※ Bold 처리된 profile_nickname, account_email은 책 출판시 ID와 차이가 있으니 수정해주어야 한다.

필자는 어떤 것이 오류인지 몰라 시간 소비를 꽤나 했다..

 

• index.js와 main.js에 KakaoLogin.vue을 넣어준다. (생략)
• 아래와 같은 화면 출력시 성공~!