🟡 카카오 소셜 로그인

• REST API 방식으로 진행할 예정

• 로그인 진행되는 과정

  • 프론트단에서 유저가 카카오 창에서 로그인을 하면 인가코드를 받고
  • 그 인가코드를 백으로 보내기 그러면
  • accessToken 이랑 refreshToken 이 응답 옴

1. 세팅

• env 파일 생성

# kakao login
VITE_KAKAO_REST_API_KEY={REST API 앱키 발급받은거 등록}  
VITE_KAKAO_REDIRECT_URI={Redirect uri 입력}

• .gitignore에 등록

.env

• config.ts 에 환경변수들 넣기

//config.ts
export const KAKAO_CLIENT_ID = import.meta.env.VITE_KAKAO_REST_API_KEY
export const KAKAO_REDIRECT_URI = import.meta.env.VITE_KAKAO_REDIRECT_URI 

export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_REDIRECT_URI}`

• src/vite-env.d.ts 에 타입 지정 필요함 (TypeScript 이기 때문…)

//vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_KAKAO_REST_API_KEY: string
  readonly VITE_KAKAO_REDIRECT_URI: string
  // 추가적인 환경 변수가 있다면 여기에 더 선언
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

• 만약 유저가 동의하고 계속하기 하고 로그인 진행하면 redirect url로 코드 확인 가능

HTTP/1.1 302
Content-Length: 0
Location: ${REDIRECT_URI}?code=${AUTHORIZE_CODE}

• url 에서 인가코드(AUTHORIZE_CODE) 가져오기