프로젝트 소개(spec)
현재 프로젝트 하면서 소셜 로그인 kakao를 web에 연결해야 할 필요가 있어, 또한 좀 삽질을 해서 기록하고자 적는다.
client는 React로 구현했고 과거엔 passport라는 라이브러리 사용해서 구현했는데, 이번엔 라이브러리 사용 없이 구현해보고자 한다. (passport 말고 react-kakao-login이라는 라이브러리도 있다.)
kakao 개발 사이트 가면 아래 처럼 지원해준다.
web이면 REST API랑 JavaScript 둘다 사용가능한데, 2개의 뚜렷한 차이는 확실히는 잘 모르겠는데, js는 sdk 형태로 public 폴더에 index.html에 카카오 cdn을 걸어줘서 load해서 사용한다. sdk 형태라 사용이 더 편리한데, 편리하다는 뜻은 나중에 문제생기면 더 복잡해진다는 느낌이 있기에..
REST API 방식으로 구현하였다.
1. 앱 등록
앱 등록의 경우 kakao 개발자 사이트에도 잘 나와있고, https://hymndev.tistory.com/72 이 블로그에도 잘 나와있고 찾으면 잘나와있다. 등록은 대부분 활성화 하면 되고,
등록하면 아래 사진처럼 앱키가 만들어지는데 나중에 통신할때 사용된다.
그리고 아래 플랫폼 / web 부분에 redirect URI 등록하는 부분이 있는데 우린 앱에서 8080포트 사용하고, react는 (보통) 3000포트 사용하니 기본값
http://localhost:3000 으로 등록 해주면 된다.
아 빠뜨린게 redirect URL도 등록해줘야 한다.
redirectURL이란 우리가 인가코드를 받으려고 request를 보내면 response로 인가 코드 code=블라블라가 get 통신으로 파라미터 형으로 데이터가 온다.
그걸 받아주기 위해 url을 개발자 맘대로 지정해줘야 한다. 두번째 사진처럼 지정해준다.
2.과정 이해하기
아래 카카오 developer 가면 도표에 잘 나와 있는데 정리해 보았다.(draw 빡세네 -_-)
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#before-you-begin
보통 8까지 처리 되면 액세스토큰과 리프레쉬 토큰을 받았으니 로그인 처리는 끝난걸로 볼 수 있다. 다만 우리팀처럼 kakaoID를 키로 사용한다거나 하는 정책이라면 사용자 정보까지 9~10을 통해 가져올 수 있다.
다른 블로그 보면 7,8 토큰 받기 과정부터 백엔드로 code만 넘겨서 7,8을 수행하는 경우가 많다. 아마 access_Token 처리를 client에서 하기 부담? 스러워서 그런것 같기도 하다. (보안상?)
자아,
1번 부터 react 코드에서 보여주자면,
- 카카오 버튼을 만들고 링크로 인가코드 받기 요청을 한다.
두번째 사진처럼 난 함수로 만들어 사용했는데, 세번째 사진 보면 Redirect url과 client id (아까 앞에서 받은거, 여기선 restAPI용) 을 가지고 get 통신 URL을 만들어 window.location.href를 사용해 페이지로 이동한다.
여기서 app 키 같은건 보안 신경써야 되는 자원이므로 .env 파일을 만들어 저장해주고 위처럼 process.env.블라블라... 로 사용하면 된다. (react env 검색해보시길)
env 파일을 사용할때 주의할 점이 2가지 있는데
- react서 env 파일 사용할때 env 파일에 저장할 키를 REACTAPP_blabla...로 접두어를 REACT_APP 이 꼭 붙어야 사용 가능하다. 안붙이면 못씀
- git 보통 다 같이 쓰는데 .gitignore 파일에 .env을 적어서, env가 깃에 올라가는 삽질을 하지 않도록 한다.
카카오 인가 받기 url은 아래 사이트에 나온다.
맨 아래 사진 보면 response로 code를 받는다는 걸 알 수 있다.
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code
그래서 내가 만든 버튼을 클릭하면, 아래와 같은 페이지가 나온다.
(난 이미 카카오 로그인이 되어 있기에 맨 위에 소개된 2의 카카오톡으로 로그인 페이지가 생략되었다 그에 따라 3번 과정까지 생략되고, 4~5번 인가 페이지 "이 회사의 서비스를 동의하겠습니까? 또한 이전에 동의 클릭했기에 생략되어 6번으로 바로 간다)
(2,3 과 4,5번 과정이 위 화면과 같다, 6번이 위 사진 맨 오른쪽 인가코드 발급)
위쪽 사진처럼 카카오 서버에서 url 형태로 파라미터를 쏴주는데, 그 전에 react 개발자는 redirect URL에 맞게 빈 컴포넌트를 만들어 줘야 한다. 이런 부분은 타 블로그에 개발자들이 소개 된게 없어서 해맸는데 ㅠ(아마 기본적이라 생각해서 다 생략하심 ㅠㅠ) 간단하게 redirectURL에 맞게 페이지(=컴포넌트) 하나만 만들어주면된다. 즉 404만 안뜨게 하면 된다 ㅎㅎ
위처럼 router로 걸어주고, 컴포넌트는 우선 아래 처럼 return 부분에 걍 빈 jsx 태그 만 넣어줘도 된다.(어차피 내용이 없는 페이지니.. 단순 콜백용)
이러면 kakao서버 : "니놈의 redirectURL로 내가 code를 넘겨주마"
했을때 예 알겠슴다 하고 받아낼 수 있게 된다.
(참고로 잡설일수 있지만 내 사진속의 소스는 윗부분 짤린 부분은 if Login is Successful, 일때 타는 Route이고 비로그인시는 사진의 Route를 타게 설정했다.)
그럼 다시 아까 빈 페이지 콜백 받아 url code= 형태로 받은쪽으로 돌아가면,
아래처럼 URL 인스턴스를 사용해서 location에서 toString()으로 url 받아.. 처리 해주면 paras 값을 받을 수 있고, params에서 get() 활용해서 code를 받아 7번 토큰 받기를 위한 url을 만들 수 있다.
아래 카카오 사이트에 나와있다.(아래는 이론, 위에는 실습)
카카오서 제공한 샘플을 보면 헤더에 "Content-Type": applcati...
data에 뭘뭘 넣어라 적혀 있다.
위에 명세처럼 넣어서 코드를 짜보면
위처럼 짤수 있다. header에 설명대로 잘 넣었고, url로 잘 만들었다. 그래서 전송해보면 콘솔에 뭐가 뜰까?
짠 access_token과 refresh_token을 받는데 성공했따..
액세스 토큰은 수시 접근 토큰? 정도로 생각하면 될거고, 리프레쉬토큰은 액세스 토큰을 편하게 자주 재발급 받기 위해 긴 시간?(1month나 2달정도?) 변경 되지 않으며 액세스 토큰 발급을 위해 유지 되는 토큰이라 알고 있다. 주로 액세스 토큰을 클라이언트 단에서 사용하니 짧게 몇시간 정도 처리 해서 탈취나 해킹에 방지 하기 위해 이러한 2가지 토큰 시스템을 운용하는걸로 알고 있다..(맞죠?)
참고로 아래는 카카오 토큰 정책이다.access는 6시간 refresh는 2달이다
그런데 내 프로젝트는 kakaoID 와 email같은 유저 개인정보도 프론트에서 받아오기로 했다.
그래서 한번더 호출 해야 한다. 아까 코드에 이어 로직을 아래처럼 짰다. 코드를 설명하자면 axios.post 통신으로 https://kapi.kakao.com/v2/user/me 를 첫 파라미터에 넣어주고, 두번째는 data 파라미터 부분엔 빈객체, 3번째 headers 부분에 'Bearer ${access_token}' 형태로 넣어준다, 이때 401 'no auhorization key' 라는 error라 뜰 수 있는데 이 에러일때 쉽게 의심할수 있는 실수가 2가지 있다.
- Hedaer에 'Bearer ${access_token}' 넣는데 Bearer 뒤에 스페이스를 안치는 것!
- 이건 내 경우였는데, axios.post() 함수에서 첫번째 파라미터는 url, 두번째 파라미터는 데이터, 세번째 파라미터는 headers인데, headers를 두번째 파라미터로 넣어버리면 post()의 data부분에 headers가 넣어져서, 실제 request headers는 빈값이 되고 post body 부분에 headers라는 객체로 들어가버린다.
따라서 post 통신시 데이터가 없을땐 {}이런식으로 비워 줘야 된다.
2번째 사진보면 카카오 api문서가 나온다.
3번쨰 response 사진 보면 id를 발급해준다는걸 확인 할 수 있다.
코드 호출 후 사용자 정보가 성공적으로 받아졌다.
아 이제.. id는 server로 보내고, 내 프론트 페이지엔 setIsLogin(true)로 해주면 로그인 처리가 되겠지 (뿌듯)
이하 잡설 : 사실 카카오나 구글등 공식문서는 쉽게 쓰였다, 누구에게? 이미 프로젝트 몇번 경험해본 개발 경험이 좀 있는 개발자나, http프로토콜을 상당수준 이해하고 전공 지식이 풍분한 이들에게..
개발을 입문하거나 처음 또는 프로젝트를 많이 해보지 않은 개발자에겐 사실상 어렵게 쓰였다. 카카오 정도면 쉽게 쓰인거 아니냐? 라고 반문할 개발자가 있겠지만 그건 당신이 잘난거고, 사실상 쉽게 쓰인 많은 라이브러리 문서들 보면 일단 Get Started 에 몇 문단 읽으면 바로 구현이 가능하게 되어 있다. 정말 린하고 가볍게 스타트를 하게 해주고, 그다음에 intermediate, adavnced 내용까지 하단 또는 다른 메뉴로 쭈욱 찾아볼수 있다. 그게 쉽게 쓰이고 고객 지향적으로 쓰인건데, 그런점에서 상대적으로 비교했을땐 카카오 문서는 그렇게 쉽게 쓰인 문서는 아닌것 같다.
내가 카카오 문서를 다시 쓸 권한이 생긴다면 일단 초기에 웹 개발자는 javaScript sdk 랑 RestApi랑 둘중에 뭘 쓰면 어떤점이 장단점인지 알려줄것이고, react 같은 경우도 간단하게 example 코드를 만들어서 통신하는것까지 예시로 올려놓을것이다. 카카오 개발자 신입이 만들더라도 1일 내로 만들 공수 같은데.. 그리고 지금 메뉴는 구현 설명 구현 설명 이렇게 혼재해 있어서 어디서부터 설명을 집중해서 읽고 어딜 보고 url을 구현하고 이런게 좀 헷갈리게 되어 있다.
문서기획할때 설명 : 하고 로직 설명하고 실전 이나 구현 : 하고 구현 적고 이렇게 분리해서 문서를 읽기 용이하게 해뒀으면 하는 바램이 있다.
참조(제 블로그가 허접하면 아래 페이지로 공부하세용ㅎ 다 잘나옴):
https://han-py.tistory.com/417
https://data-jj.tistory.com/53
https://hymndev.tistory.com/72
https://injekim97.tistory.com/137
