Vue.js 에서 카카오톡 간편로그인 OAuth 로그인 기능 구현
카카오톡 간편 로그인을 Vue.js 애플리케이션에 구현하는 방법에 대해 알아보겠습니다.
이를 위해 카카오 개발자 사이트에서 애플리케이션을 생성하고, 카카오 로그인 API를 사용하여 OAuth 로그인을 설정합니다.
1) 환경설정
이전 게시물에서 구글 간편 로그인 기능을 구현해 보았습니다.
관련 링크 > 구글 간편로그인 구현방법
이번에는 카카오 API를 이용하여 OAuth 로그인을 진행해 보겠습니다.
카카오 개발자 사이트에 접속하여 로그인 후 내 애플리케이션을 만듭니다.
내 애플리케이션으로 이동합니다.
아래와 같이 플랫폼>Web에 도메인 주소를 등록해 주세요. (로컬 환경 또는 호스팅 중인 웹사이트 URL)
카카오 로그인>활성화 On>리다이렉트Url등록 (로컬 환경or호스팅 중인 웹사이트 URL)
동의 항목 > 사용자의 동의 처리 부분 설정을 해주면 끝입니다.
여기서 필요한 부분은 위에서 설정한 리다이렉트url과 앱키에서 확인할 수 있는 Rest API 키를 활용해야 하니 env 파일에 저장합니다.
VUE_APP_KAKAO_CLIENT_ID=your_kakao_client_id
VUE_APP_KAKAO_REDIRECT_URL=your_redirect_url
2) 소스코드
먼저 env에 api 키와 리다이렉트url을 가져와서 아래와 같이 url을 변수에 저장합니다.
그리고 카카오 로그인 버튼을 만들어주고 클릭했을 때 위 url로 이동합니다.
<a :href="kakao_url"><img src="@/assets/kakao_login.png"></a>
여기까지만 하면 카카오톡 로그인 화면으로 이동이 되고, 로그인 처리 시 설정한 리다이렉트url로 리턴이 됩니다.
콜백처리를 위해 리다이렉트 되는 url을 라우터 처리를 먼저 해주고,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | const routes = [ { path: '/', name: '/', component: MainIndex}, { path: '/regi01', name: 'regi01', component: RegistTemplate}, { path: '/signup', name: 'signup', component: SignUpTemplate}, { path: '/login', name: 'login', component: LoginTemplate}, { path: '/auth/kakao/callback', name: '/auth/kakao/callback', component: SignUpTemplate}, ]; mounted(){ this.handleKakaoCallback(); }, //카카오 로그인 콜백 handleKakaoCallback() { const urlParams = new URLSearchParams(window.location.search); const code = urlParams.get('code'); if (code) { this.getKakaoToken(code); } }, getKakaoToken(code) { this.loading = true; const data = { grant_type: 'authorization_code', client_id: process.env.VUE_APP_KAKAO_CLIENT_ID, redirect_uri: process.env.VUE_APP_KAKAO_REDIRECT_URL, code: code }; fetch('https://kauth.kakao.com/oauth/token', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams(data) }) .then(response => response.json()) .then(tokenData => { if (tokenData.access_token) { this.getKakaoUserInfo(tokenData.access_token); } else { alert('카카오 로그인 실패: 토큰을 받아올 수 없습니다.'); this.loading = false; } }) .catch(error => { alert('카카오 로그인 실패: ', error); this.loading = false; }); }, getKakaoUserInfo(accessToken) { fetch('https://kapi.kakao.com/v2/user/me', { method: 'GET', headers: { 'Authorization': `Bearer ${accessToken}` } }) .then(response => response.json()) .then(userData => { const kakaoUserId = userData.properties.nickname; const kakaoUserNM = userData.properties.nickname; const kakaoPicture = userData.properties.profile_image; const pwd = userData.id; // 임의로 user ID 사용 const OAuthYn = 'Y'; console.log("kakaoUserId = " + kakaoUserId); console.log("kakaoUserNM = " + kakaoUserNM); console.log("kakaoPicture = " + kakaoPicture); SignUpAction.methods.signup01(kakaoUserId, kakaoUserNM, pwd, kakaoPicture, OAuthYn, (res) => { if (res.status === 200) { alert('로그인 성공'); // 성공 후처리 로직을 작성해 주시면 됩니다. } }, (error) => { // 에러 콜백 alert('회원가입에 실패했습니다.', error); this.loading = false; } ); }) .catch(error => { alert('카카오 사용자 정보를 가져오는 데 실패했습니다: ', error); this.loading = false; }); } | cs |
위 코드를 참조하여 로그인 성공 시 주어지는 토큰으로 사용자명, 프로필사진을 가져와서 로그인 후속 처리 로직을 작성하면 됩니다.
자세한 내용은 카카오 개발자 사이트의 가이드 문서를 참조하시기 바랍니다.
궁금한 점이나 피드백이 있으시면 언제든지 댓글이나 이메일로 연락해 주세요. 😊
읽어주셔서 감사합니다.