리액트에서 소셜 로그인(카카오) REST API 사용하여 구현하기

소셜 로그인 첫 구현기 - 카카오

먼저 카카오 디벨로퍼에 접속 후 로그인을 해주었어요.

그리고 내 애플리케이션에 접속 후 애플리케이션을 추가해줍니다.

저는 이미 만들었기 때문에 해당 과정은 생략했어요.

 

앱 키, 플랫폼, 기본정보 등을 확인할 수 있어요.

key는 외부에 노출되지 않도록 주의해야 해요.

 

 

이제 플랫폼을 클릭해서 들어가줍니다.

저는 웹에서 사용할 것이기 때문에 Web 플랫폼을 등록할 거예요.

그리고 로컬에서 작업하면서 테스트 해볼 거라서 우선은 localhost를 등록해주었습니당.

 

등록을 완료하면 카카오 로그인을 사용하려면 리다이렉트 URI를 등록해야한다고 하네요.

등록하러 가기 버튼을 눌러서 등록하러 가볼게요.

 

처음에는 활성화 설정이 OFF로 되어있기 때문에 ON으로 바꿔주려고 하면 해당 모달이 뜨는데,

활성화 설정을 해주었어요. 동의 화면 미리보기도 할 수 있더라구요.

이제 활성화를 했으니 동의 항목 설정을 체크해볼 거예요.

 

이제 카카오로 로그인할 때 어떤 정보를 받아올지 선택할 수 있어요.

설정 버튼을 누르면 필수, 선택, 이용 중 동의, 사용 안함 중에서 또 체크할 수 있었어요.

 

만약 동의 설정을 하려면 동의 목적을 반드시 입력해야 합니다!

우선 저는 닉네임 필수, 이메일 선택으로 체크해보았어요. 

 

REST API로 개발할 경우에는 리다이렉트 URI도 설정해주어야 해요.

저는 REST API를 사용할 것이므로 우선 로그인 페이지로 리다이렉트되도록 해보았어요.

 

이제 이 인가 코드를 사용할 건데,

GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1
Host: kauth.kakao.com

REST_API_KEY 라고 쓰여있는 곳에는 아까 발급받은 API KEY를 입력해주면 되고,

REDIRECT_URI 에도 마찬가지로 리다이렉트 URI로 설정했던 값을 입력해주면 돼요.

 

리액트에서 이렇게 작성해주었어요.

그리고 카카오 소셜 로그인 버튼에 해당 URI를 연결해주었습니다.

 

오아..댕신기..

 

인가 코드 받기

이제 카카오로부터 토큰을 받아와야 하므로 문서를 확인해봤어요.

Required로 설정되어있는 grant_type, client_id, redirect_uri, code를 body에 실어 보내야해요.

client_secret은 보안 설정이 on으로 되어있을 경우 required에요.

 

axios를 사용해서 카카오로부터 액세스 토큰을 획득하였습니다.

콘솔에 출력해봤는데 잘 받아와졌어요. (하지만 이 코드는 필요가 없어질 수도 있겠네요.)

 

이제 서버로 보내는 일만 남았는데.......

생각해보니 액세스 토큰을 프론트가 받아서 서버로 보내면 보안상 이슈가 있을 것 같아서

인가 코드만 프론트에서 백엔드로 전달 하고, 액세스 토큰을 획득하는 것은 백엔드에서 하는 것이 안전할 것 같아요.

 

따라서 이후 과정은 잠시 보류해두었습니다..ㅋㅋ

인가 코드를 보내는 API가 현재 없으므로 어차피 더이상 진행할 수가 없음 ㅠㅠ

 

백엔드 개발자분도 소셜 로그인 구현이 처음이셔서 같이 논의 후 진행할 예정..

해결 후 이 글에 추가해 놓을게요..!

 

▼ 이후 과정을 기록했어요 🤗

https://reasonz.tistory.com/78