Django와 React를 이용해서 카카오(kakao) 로그인을 해봅시다 !(OAuth) 1편

안녕하세요 !! 

저번에는 github를 이용해서 로그인을 구현했는데요 !! 

이번에는 사실상 모두가 이용하는 카카오를 이용해서 로그인 기능을 구현해보겠습니다 !!! 

깃 허브 로그인이 궁금하시면 https://heokknkn.tistory.com/54 여기를 참고해주세요 !! 

 

자 ! 먼저 저런식으로 버튼을 만들어주시면 편합니다 ~~ 

자 ! 그러면 저 버튼을 눌렀을 때부터 시작됩니다 !!! 코드를 봐봅시다 ! 

https://developers.kakao.com/console/app

우선 위에 URL로 들어가서 어플리케이션을 만듭시다 ! 

로그인 하시구요 ! 

 

저는 만들어 놓은게 있어서요 ^^ 

「+」눌러주시구 ! 앱이름이랑 사업자명은 원하는데로 적어주세요 !! 그리고 당연히 「V」표 체크해주시구 저장 ! 

 

자 ! 다 만들고 나서 자신이 만들것을 클릭해주세요 !! 

그리고 왼쪽메뉴에서 「카카오 로그인」을 클릭해줍니다 ! 

 

자 ! 활설화 설정을 「ON」으로 !  

 

그리고 「Redirect URI」등록을 눌러주시면 입력 모달이 나옵니다 !!! 

redirect 할 URI를 적어주세요 !!! 

저는 참고로 로컬에서 일단 테스트를 할 것이기 때문에 「http://127.0.0.1:3000/social/kakao」으로 해줬답니당 ! 

또한 이 값은 코드상에서도 쓰일거니까 복사해주세요 ! 

 

그 다음에는 왼쪽 메뉴에서 「동의항목」으로 가줍니다 ! 

그래서 자신의 사이트에 맞게 꼭 필요로 하는 정보를 체크해줍니다 !!! 저는 「닉네임」「프로필사진」「카카오계정(이메일)」을 해줬습니다 ! 

 

자 ! 그 다음에는 「요약정보」로 가셔서 REST API키를 복사해줍시다 ! 

 

자 그러면 코드로 돌아갑시다 !! 

 

자 ! 실수를 줄이기 위해서 아래처럼 해줍시다 !! 

const kakaoParams = {
  client_id: "815e7ed5f95d86a621fd9d130cccec31",
  redirect_uri: "https://127.0.0.1/social/kakao",
  response_type: "code",
};
const kParams = new URLSearchParams(kakaoParams).toString();
// URLSearchParams를 해줘서 손쉽게 URL형식으로 맞춰줍시다 !!! 
// 직접 href에 집어 넣어도 괜찮지만 코드가 길어지며 유지보수도 힘들고 그러니
// 따로 관리해줍시다 !

그 다음에는 아래처럼 설정을 했습니다 !!! 위에서의 정보를 가지고 카카오로 oauth를 요청을 해야하니까요 !!! 

https://github.com/login/oauth/authorize?<param> 을 해줍시다

 

 

제 코드는 아래처럼 됩니다 사실상 ! 

https://kauth.kakao.com/oauth/authorize?client_id=815e7ed5f95d86a621fd9d130cccec31&redirect_uri=https%3A%2F%2F127.0.0.1%2Fsocial%2Fkakao&response_type=code 

 

자 ! 다 하셨으면 한번 버튼을 클릭 해볼까요????

전 아래처럼 나옵니다 ! 그러면 성공입니다 !!! 

자 전부 동의 해주시구요 ! 

 

자 ! 그러면 카카오에서의 설정과 프론트쪽은 거의 다 진행했습니다 !! 

자 ! 이렇게 해주시고 이 페이지에서는 백엔드로 코드를 다시 보내야하는데요 ! 

깃허브 로그인을 구현했을 때와 마찬가지로 카카오쪽에서 code를 보내줍니다 ! 그 코드를 백엔드로 보내서 이 정보들을 가지고 로그인을 시켜야하기 때문이죠 ! 

 

나머지 백엔드 부분과 조금 부족한 부분은 2편에서 찾아뵙겠습니다 !