우당탕탕 개발일기
[React] 카카오 로그인 구현하기(자바스크립트 SDK) 본문
카카오 로그인은 늘 해보고싶었지만 항상 시간에 치여 시도못했던 기능이었는데 이번 실전프로젝트 때 맡게 되었다!
레퍼런스들을 찾아보면서 어렵다는 글들이 유독 많이 보여서 겁을 잔뜩 먹고 시작했는데
다행히 다른 분들의 시행착오가 담긴 친절한 포스트들이 많아서 금방 해결할 수 있었다! 걱정금지🙅🏻♀️
카카오 로그인에도 여러가지 방법이 있는데 내가 했던 것은 JavaScript SDK를 이용한 팝업 방식의 로그인!
그리고 카카오 사용자 정보에서 닉네임을 받아와서 사용했다. 🔗 JavaScript SDK 문서
그냥,, 구현하면서 내가 헷갈렸던 부분들을 그냥 휘뚜루마뚜루 정리해두려고한다..!
완전히 100% 이해를 하고 하는 것이 아니라 틀린 부분이 있을 수도 있다!
구현하는데에 참고용으로 봐주셨으면 좋겠다!
카카오 로그인을 구현하기 전 동작 원리를 알고 찾아보면 이해하는데 좀 더 도움이 될 것 같다. 우리가 지금 할 것은
1️⃣ 인증(인가) 코드를 요청해서 받고, 2️⃣ 받은 인가 코드로 토큰을 요청해서 받고, 3️⃣ 받은 토큰으로 로그인을 실행시키는 것이다.
단어 정도만 눈에 익혀두어도 좋을 듯 하다!
0. 사전 준비 (애플리케이션 등록)
카카오 api 기능을 구현하기 위해서 필수적으로 해야하는 사전작업이 있다.
🔗 앱 만들기, 앱 키, 플랫폼 등록, 🔗 카카오 로그인 활성화, Redirect URI 등록, 동의 항목 설정 이 여기에 해당된다.
찾아보면 워낙 친절한 설명들이 많고, 공식 문서도 잘 되어있어(🔗 클릭!) 차근차근 따라하면 될 것 같다.
앱 키 > JavaScript 키는 나중에 사용되는 곳이 있으므로 확인.
플랫폼 등록시 로그인을 구현할 웹 도메인을 등록해야한다.
나는 개발하면서 테스트를 해야했기 때문에 localhost으로 등록해두었다.
여기에 입력되지 않은 도메인으로 접속하게 되면 이런 화면을 마주하게 된다.!
카카오 로그인은 서비스와 카카오 서버가 서로 정보를 주고받는 방식으로 진행된다.
카카오 서버는 Redirect URI로 서비스에서 필요한 로그인 인증 정보(해당 사용자에 대한 인가 코드)를 보내고,
서비스는 Redirect URI로 받은 로그인 인증 정보를 처리해 다음 단계 요청을 보낸다.
카카오톡에서 주는 인가 코드가 저 주소 뒤에 붙어 나온다.
무슨 말인지 몰라서 일단 실행부터 되라ㅜㅜ 하는 마음에 그냥 검색해서 나왔던 포스팅대로 임의(/kakaoLogin)로 적었다.
이제 홈페이지에서 하는 작업들은 끝! 코드를 작성하기 전에 필요한 작업들도 있다.
먼저 📁public > index.html의 <head> 안에 <script>를 적어주는 것부터 시작해야한다.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init(' JavaScript 키 ');
</script>위의 스크립트는 카카오가 제공하는 SDK 다운로드 경로이고, 이를 통해 항상 최신 버전을 사용할 수 있게 해주는 것이다.
다운로드한 JavaScript SDK 파일을 웹 페이지에 포함시키는, 즉 카카오 로그인을 실행시킬 수 있게 하는 스크립트인 것!
반드시 <head> 안에 있어야 기능이 작동한다!
아래 스크립트는 JavaScript 앱 키를 할당하여 초기화 함수를 실행시키는 것이다.
이 때 따옴표 안에 위에서 설정되었던 앱 키> JavaScript 키를 넣어주어야한다.
다음은 브라우저의 window 객체에서 Kakao API를 가져오는 작업을 해주어야한다. 방법은 너무 간단하다!
카카오 로그인을 구현할 리액트 컴포넌트 상단에 아래 코드를 작성해주면 Kakao API에 접근할 수 있다.
const { Kakao } = window;저렇게 작성을 해줘야 코드 작성시에 kakao.~~가 가능해진다. (안하면 window.Kakao.~~~)
이렇게 하면 사전 작업 모두 끝! 👏
1. 카카오 로그인하기 🔗
공식 문서에는 Kakao.Auth.authorize 함수를 실행시켜 카카오 로그인을 진행하게 설명되어있지만,
따로 검색을 하였을 땐 Kakao.Auth.login 함수를 사용하는 분들이 더러 있었다. 나도 login 함수를 사용!
🔗에 따르면 카카오 로그인은 팝업창의 여부에 따라 리다이렉트 방식과 팝업 방식으로 나누어져있다.
여기서 리다이렉트 방식이 .authorize를, 팝업 방식이 .login을 사용했다.
<script type="text/javascript">
function loginWithKakao() {
Kakao.Auth.authorize({ //📍
redirectUri: 'https://developers.kakao.com/tool/demo/oauth'
})
}
(...)
</script>↑ 리다이렉트 방식 ↓ 팝업 방식
<script type="text/javascript">
function loginWithKakao() {
Kakao.Auth.login({ //📍
success: function(authObj) {
alert(JSON.stringify(authObj))
},
fail: function(err) {
alert(JSON.stringify(err))
},
})
}
</script>
흑흑... JavaScript SDK는 팝업 방식만 사용한다고 진짜 얼..핏.. 본 것 같기도 하고...
(+) " ... Kakao.Auth.login는 사용자 정보 수집 동의 팝업을 띄운다. 수집 항목에 동의 후 계속할 시 인가 코드를 획득하는 인증 과정을 알아서 처리해준다 ..." https://velog.io/@sayi/React-카카오-로그인로그인-사용자-정보-수집
아무튼 정확하게 무슨 차이인지 모르겠지만 일단 login 함수를 활용해 아래와 같이 작성했다.
여기서 포인트는 scope와 Kakao.Auth.login 함수!
scope는 Kakao.Auth.login 함수의 인자에 해당하고, 사용자 동의를 받고(로그인 할 때 동의하는 항목들!) 수집가능하다. 🔗
나는 닉네임이 필요했어서 동의 항목에 닉네임을 넣어두고, scope에 닉네임에 해당하는 키값(profile_nickname)을 넣어주었다.
scope의 키 값들은 🔗의 ID값을 확인!
Kakao.Auth.login의 reponse를 콘솔로 찍으면
access_token과 함께 scope로 지정해두었던 값이 들어와있음을 알 수 있다.
2. 토큰 할당하기 🔗
여기가 바로 인가 코드를 받은 다음 토큰을 받는 과정!
Kakao.Auth.setAccessToken(ACCESS_TOKEN);" 로그인을 완료하여 토큰 값이 서비스 서버로 전달되면, 서비스 서버에서 토큰을 받아사용자 정보 가져오기 등 카카오 API를 호출할 때 사용할 수 있다. 만약 로그인 이외의 카카오 API를 JavaScript SDK로 호출하려면 토큰 할당을 해야 합니다. 로그인 이후 다음과 같이 Kakao.Auth.setAccessToken 함수를 통해 서버에서 발급받은 토큰을 할당해야한다. 서비스 서버에서 로그인 응답을 통해 전달받은 액세스 토큰(Access token) 값을 JavaScript SDK에서 사용할 수 있도록 설정한다."
login 함수가 성공적으로 실행되면 success callback이 실행되어 인증정보를 response로 받는다.
이 response에 들어있는 access_token을 카카오 SDK에 설정해주었다.
이렇게 토큰을 설정해주면 이 다음에 할 사용자 정보를 호출하는 과정에서 사용할 수 있다.
ACCESS_TOKEN은 그냥... 변수 선언 해준것..!
3. 사용자 정보 가져오기 🔗
나는 id값과 사용자의 닉네임을 받아와 웹에 띄워야해서 사용자 정보 가져오기 과정도 추가했다.
방법은 세상 간단하다. url에 /v2/user/me를 지정해하고, Kakao.API.request() 함수를 호출하면 끝!
그럼 받아져오는 request 함수의 response는 아래와 같다.
scope로 지정해 둔 nickname이 잘 들어가있는 걸 확인할 수 있다
💡 최종 코드
이렇게 코드를 완성했다! 물론 쟤는 카카오 로그인 실행 함수이므로 onClick으로 달아줄 버튼은 밑에 따로 작성해야한다!
버튼은 데모페이지에 있던 버튼을 그대로 긁어왔다. 버튼 디자인은 🔗를 참고해 저작권 침범하지 않게 조심!!🛎
import React from 'react';
import axios from 'axios';
const { Kakao } = window;
export const LoginWithKakao = () => {
const scope = 'profile_nickname';
Kakao.Auth.login({
scope,
success: function (response) {
Kakao.Auth.setAccessToken(response.access_token);
const ACCESS_TOKEN = Kakao.Auth.getAccessToken();
Kakao.API.request({
url: '/v2/user/me',
success: (response) => {
const { profile } = response.kakao_account;
// axios로 서버 로그인 실행
},
fail: function (error) {
console.log(error);
},
});
},
fail: function (err) {
console.log(err);
},
});
};
const KakaoLogin = () => {
return (
<a id="custom-login-btn" onClick={LoginWithKakao}>
<img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" width="222" />
</a>
);
};
export default KakaoLogin;끝!!
검색하면서 구현할 때 헷갈렸던 점을 최대한 설명해보려고했는데, 너무 구구절절이 된 것 같기도 한 느낌..!😂
다시 한 번 이게 정답이 아님을 말씀드리며,, 작은 도움이라도 되었으면 좋겠다!🧚🏻♀️
📍 참조
로그인 동작 원리 이해에 도움이 되는 글
https://velog.io/@seize/React-카카오-소셜-로그인
[React] 카카오 소셜 로그인
이번 프로젝트에서 카카오 소셜 로그인을 맡게 되었다. 소셜 로그인 중 카카오가 가장 쉽다고 한다. 그 이유는 카카오 개발자 사이트에서 사용 가이드를 친절하게 작성해놓았기 때문이라고 한
velog.io
코드 구현에 도움이 되는 글
https://dang2dangdang2.tistory.com/180
[React] 카카오 로그인 연결해보기-1
먼저 시작하기 전에 여러 블로그를 참고해보았으나 여러 블로그 글을 이해하지도 못한 채 복붙하니까 왜 안되는지도 모르고 이상하게 떠서 developers 참고하여 처음부터 찬찬히 따라해보았습니
dang2dangdang2.tistory.com
https://dang2dangdang2.tistory.com/186?category=995896
[React] 카카오 로그인 연결해보기 - 2
이렇게 넘어오는게 토큰인줄 알았는데,,, 얘네는 인가 코드였다,,,! 내가 하고싶었던 거는 토큰 받아서? 사용자 정보를 console에 띄우고 싶었는데 뒤지도록 안되더라 한 10시간 동안 한거 같다. 그
dang2dangdang2.tistory.com
'What I Learned > React' 카테고리의 다른 글
| REACT 자주 보는 에러들 (0) | 2022.08.25 |
|---|---|
| setstate 사용 시 리렌더링 안되는 오류 (0) | 2022.08.25 |
| React로 ProgressBar 구현하기 (*진행중*) (0) | 2022.03.02 |
| [React] export ~~~ was not found in~~~ (0) | 2022.02.07 |
| [React] React Hook is called in function *** that is neither a React function component nor a custom React Hook function. (0) | 2022.02.07 |