[실전 프로젝트] 카카오 소셜 로그인 구현

사용자의 접근성을 위해서 (둘러 보기만 하고 싶은 사용자나 굳이 회원가입, 로그인을 번거롭게 하고 싶지 않을 수 있는 사용자들을 고려해 쉽고 간편하게 로그인 할 수 있는 소셜 로그인을 사용했다.)

 

구글에 react socialLogin react or 리액트 카카오 소셜 로그인 등등의 검색어로 검색을 하였다.

 

[사전 준비]

- Kakao Developers(카카오 개발자 도구)에 접속한다. 

https://developers.kakao.com/

Kakao Developers

 

- 내 애플리케이션 → 애플리케이션 추가하기 → JavaScript 키를 사용했다. (찾아보니 JavaScript를 사용하기 때문에 JavaScript 키를 발급 받는다고 함)

- 플랫폼(Web)을 등록 해준다. 사이트 도메인은 리액트에서는 http://localhost:3000 또는 배포한 사이트의 주소를 등록했다. (사이트 도메인 등록 안하면 API 요청 시 어디로 응답을 줘야 하는 지 모른다.)

+ 추가로 카카오 로그인을 사용 해야 하기 때문에 Redirect URI를 등록 해줬다.

Redirect URI를 등록 할 때는 사이트 도메인 뒤에 oauth를 작성 해줘야 실제 사이트에서 작동한다.

(Redirect URI는 Oauth를 기반으로 동작하는 소셜 로그인의 중요한 개념이고, 카카오 서버는 등록된 Redirect URI로 로그인에 필요한 인증 코드를 보내 준다고 한다.)

 

[중간 작업]

- 카카오 소셜 로그인 기능을 처음 만들기 시작 했을 때, index.html 파일에 아래의 script를 추가 해줘야 한다.

카카오 sdk를 설치하는 대신에 적어주는 것이다. (index.html body 태그 안에 script 작성했다.)

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>Kakao.init("Javascript키");</script>

https://velog.io/@luna238/react-kakao-social-login

[react] 카카오 소셜 로그인

아래의 내용은 위에서 등록한 JavaScript 키를 카카오 서버에 보내주는 것이다.

전체적인 흐름

 

[사용하기]

- 패키지 설치

$ npm install react-kakao-login --save --legacy-peer-deps

https://gaemi606.tistory.com/entry/React-npm-react-kakao-login

React | npm react-kakao-login

 

- 카카오 소셜 로그인 이미지 보여주고, 이벤트 설정

: jsKey onSuccess, onFailure 항목은 필수이다

• jsKey: 발급받은 JavaScript Key입력.
  만약 백엔드 서버에서 다른 처리를 한다면 백엔드 서버에서는 REST API Key를 사용해야 함.
• onSuccess: 카카오 로그인 성공시 핸들러
  - response를 인자값으로 받음. access_token과 refresh_token을 얻을 수 있음.
• onFailure: 카카오 로그인 실패시 핸들러
• className: 클래스 명

import KakaoLogin from "react-kakao-login";

...생략

// 소셜 로그인 성공
const socialLoginSuccess = (res) => {
  console.log("소셜 로그인 성공");
  console.log(res)
};

// 소셜 로그인 실패
const socialLoginFail = (res) => {
  console.log("소셜 로그인 실패");
  console.log(res);
};

<KakaoLogin
  // rest api 키가 아닌 js 키를 사용해야 합니다.
  jsKey={KAKAO_JS_KEY}
  onSuccess={(res) => socialLoginSuccess(res)}
  onFailure={(res) => socialLoginFail(res)}
  // getPofile 속성을 주지 않으면 유저 정보를 받을 수 없습니다.
  getProfile={true}
>
</KakaoLogin>

https://darrengwon.tistory.com/642

React + express에서 토큰 기반 소셜 로그인 사용하기

 

[실행]

: 개인 정보가 나올 수 있기 때문에 사진으로 대체