많은 로그인 api가 있지만 카카오가 제일 문서 정리가 잘 되어 있다고 해서 이번 프로젝트에는 카카오 로그인 rest api를 이용하게 되었다.
일단 전체적인 흐름을 정리하자면
1.프론트엔드에서 사용자에게 로그인/동의 확인을 받은후 카카오로 인가코드를 요청
2.카카오에서 확인후 프론트엔드로 인가코드를 넘김
3.프론트엔드는 받은 인가코드를 백엔드로 전달
4.백엔드는 받은 인가코드와 프론트엔드가 사용한 Redirect URI를 카카오로 전달하여 토큰을 요청
5.카카오에서 확인후 토큰을 백엔드로 전달
6.백엔드에서는 카카오서 받은 토큰을 활용하여 우리 서비스 전용 토큰을 발행
7.백엔드는 발행한 전용토큰을 프론트로 전달하고
8.토큰 확인후 로그인 됐으면 서비스를 이용할 수 있도록 화면을 전환
위의 과정을 위해서는 우선 kakao developers에 등록을 해야 한다.
링크텍스트
1.kakao developers(위의 링크)에 들어간다
2. 오른쪽 상단의 내 애플리케이션을 누른 후 로그인을 한다.
3. 애플리케이션 추가하기를 누르고 앱 이름 사업자명을 적어준다. (나는 프로젝트명을 두 군데에 적어주었다)
4. 사용자에게 받아올 정보를 정해서 설정해 준다
5.Redirect URI를 설정해 준다. 설정한 주소로 인가 코드를 받아오기 때문에 프론트엔드에서 접근할 수 있는 localhost:3000으로 설정을 해주어야 한다. 나는 http://localhost:3000/kakaoLogin 주소로 설정했다.
1.인가 코드 받기
위의 과정을 통해 인가 코드를 받아온다.
const params = new URL(document.URL).searchParams;URL객체를 이용하여 현재 주소의 searchParams의 객체를 params변수에 넣어주고
const code = params.get('code');searchParams안에 있는 get 메서드를 이용하여 파라미터의 code키의 값을 가져온다.
카카오에 인가코드를 요청하는 링크에는 kakao developer에 등록 하면서 받았던 REST API키와, 내가 등록한 Redirect URI를 넣어준다.
이때 REST_API_KEY는 누가 API를 요청하는지에대한 정보가 담겨 있기때문에 보안에 신경써야 한다고 한다! 그래서 환경변수에 넣어서 관리를 해준다고 한다. 그래서 최상위 루트에 .env파일을 만들어서 값을 따로 관리 해준다. (사실 환경변수가 왜 key값을 암호화 하는데 쓰이는건지는 모르겠다.)
- 변수명의 시작은 꼭 REACT_APP으로 시작 해야하고 값을 따옴표 등으로 감싸지 않아야 한다. 그리고 따로 import 해주지 않아도 사용할 수 있다.
-
로그인 버튼을 눌렀을때 현재 페이지 URL을 인가코드 요청 URL로 변경되도록 하였고, 카카오의 로그인 요청 창이 뜨면서 사용자가 동의를 하면 동의한 정보가 카카오로 가고 내가 지정한 Redirect URI로 code 값이 담겨져서 온다.
-
그리고 코드 값이 있으면 코드를 담아서 백엔드에 보내면 token을 보내주고 토큰이 있고 없고에따라 화면이 전환 되도록하였다.
- 백엔드와 통신 할때 REST_API_KEY와 REDIRECT_ID를 통일해야 한다.
백엔드 멘토님은 공식문서를 보고 혼자서 코드를 짜보라고 하셨지만 절대로 할 수 없을 것 같아서 여러 블로그를 참고하였다. 코드만 보았을땐 단순한 것 같은데 스스로 다 하기는 쉽지 않은 것 같다.
