20230705 [카카오 로그인 구현(react-프론트엔드)]

Daisy🌷·2023년 7월 5일

0. 준비

1) 카카오 개발자 센터 > 내 애플리케이션 > 애플리케이션 추가하기 > 앱 아이콘(선택), 앱 이름, 사업자명 작성 후 저장 버튼

2) 앱 키 확인하기
내 애플리케이션 > 생성한 애플리케이션 클릭 > 앱 키 메뉴 > 앱 키 확인

3) 플랫폼 등록
내 애플리케이션 > 생성한 애플리케이션 클릭 > 플랫폼 메뉴 > 플랫폼 설정하기 클릭 > Web 플랫폼 등록 버튼 클릭 > 사이트 도메인 작성(프론트 URL을 입력할 것! 나의 경우 로컬에서 진행 중이므로 http://localhost:8080 입력하였음) 후 저장 버튼 클릭

4) Redirect URI 등록
내 애플리케이션 > 생성한 애플리케이션 클릭 > 플랫폼 메뉴 > 등록하러 가기 클릭 > Redirect URI 등록 버튼 클릭 > Redirect URI 작성(나의 경우 http://localhost:8080/redirect
입력하였음) 후 저장 버튼 클릭

이때, 카카오 로그인 활성화 상태 OFF 되어 있다면 ON으로 켜주기!

1. 카카오 로그인 구현

REST API 방식과 JavaScript SDK 방식이 있는데 나는 REST API 방식을 사용하여 구현하였다.

1) 환경 변수 설정
리액트 프로젝트의 루트에 .env파일을 만든다. (+ .gitignore파일에 .env를 추가하여서 값들이 노출되지 않도록 처리해주자.)

REACT_APP_REST_API_KEY=아까 확인한 REST API 키 써주면 된다.
REACT_APP_REDIRECT_URI=아까 등록한 Redirect URI
주소 써주면 된다.
** 등호 사이에 띄어쓰기 없음 **

2) KakaoLogin 컴포넌트 만들어준다.
[해당 컴포넌트 전체 코드]

import { Link } from 'react-router-dom';
import KakaoLogo from '../../img/kakao_login_button.png';

export default function KakaoLogin() {
  const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
  const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI;

  const KAKAO_AUTH_URI = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
  // [카카오 개발자 센터 > 카카오 로그인 > 문서보기 > 메뉴 > REST API > 요청] 부분에 있는 내용

  return (
    <>
      <p>SNS 계정으로 로그인</p>
      <Link to={KAKAO_AUTH_URI}>
        <img src={KakaoLogo} alt="카카오로고" />
      </Link>
    </>
  );
}

[카카오 개발자 센터에 있는 요청 예제 코드]

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

3) 신규 사용자가 카카오로 로그인하기 버튼을 누르면 아래 사진과 같은 화면이 보인다.

사용자가 카카오 계정으로 로그인을 끝내면 이처럼 동의 화면이 뜬다.

4) 주소창을 확인해보면 아까 RedirectURL로 설정해둔 http://localhost:8080/redirect?code=인가코드 로 인가 코드가 들어오는 것을 확인할 수 있다.
나는 <Route path="/redirect" element={<RedirectPage />} /> 이렇게 만들어두고 RedirectPage에서 인가 코드를 확인해주었다.

export default function RedirectPage() {
  const code = new URL(window.location.href).searchParams.get('code');

  console.log(code);

  return (
    <div>RedirectPage</div>
  );
}

일단 여기까지가 프론트에서 처리할 과정이고 이제 인가 코드를 백엔드로 전달하면 된다.
백엔드에서 처리해야 할 과정
1. 프론트에서 넘겨 받은 인가 코드로 accessToken을 발급받는다.
2. accessToken으로 유저 정보를 조회해서 DB로 저장한다.
3. jwt 토큰을 발급하고 그것을 프론트로 전달한다.

<참고 자료>

Daisy🌷

티스토리로 블로그를 이전했습니다. 😂 구경 오세요! 👉🏻 https://u-ryu-logs.tistory.com

20230705 [카카오 로그인 구현(react-프론트엔드)]

0. 준비

1. 카카오 로그인 구현

20230704 [OAuth 2.0] OAuth에 대해서 알아보자!

20230706 [Spring] RestTemplate이란?

0개의 댓글