공부/소프캡디

7. 소셜로그인 API 연동

수win 2025. 5. 18. 05:05

📌 카카오 로그인 

✅ 로그인 흐름

① 사용자가 '카카오 로그인' 버튼 클릭
② 카카오 로그인 페이지로 이동 (인가 코드 받기)
③ 카카오에서 redirect URI로 code 전달
④ 프론트가 code를 받아서 → 백엔드로 전달 (API 호출)
⑤ 백엔드가 토큰 요청 → 사용자 정보 받아서 회원가입 처리

 

 

📍 page > KakaoCallback.jsx 생성 

KakaoCallback 함수 작성 {
- 백엔드에 코드 전달
- 토큰 저장
- 로그인 성공 시, 메인페이지로 이동
}

 

 

📍 App.jsx 라우터 수정

<Route path="/api/oauth2/callback/kakao" element={<KakaoCallback />} />

 

 

[Login 페이지]
  ↓  (handleKakaoLogin 실행)
[Kakao 로그인 페이지로 이동]
  ↓  (로그인 후 Redirect)
[http://localhost:5173/oauth/kakao?code=xxx]
  ↓
[KakaoCallback.jsx]
→ 백엔드에 code 전달
→ accessToken/refreshToken 저장
→ /mainpage로 이동

 


 

💥 Git - OS 대소문자 구분 오류

- 파일 이름을 KaKaoCallback.jsx로 오타를 내서  KakaoCallback.jsx로 수정하니까   app.jsx에 import 과정에서 오류가 뜸

File name 'c:/CapstonePJ/capstonepj/src/pages/KakaoCallback.jsx' differs from already included file name 'c:/CapstonePJ/capstonepj/src/pages/KaKaoCallback.jsx' only in casing. The file is in the program because: Root file specified for compilation Imported via "./pages/KakaoCallback" from file 'c:/CapstonePJ/capstonepj/src/App.jsx' 

 

  • Windows나 macOS는 보통 대소문자 구분 X
    그래서 KaKaoCallback.jsx와 KakaoCallback.jsx를 같은 파일로 인식
  • 그런데 Git이나 TypeScript는 엄격히 대소문자를 구분하려고 하기에, 충돌이 발생

 

강제 삭제 후 다시 추가하기

git rm --cached src/pages/KaKaoCallback.jsx
git add src/pages/KakaoCallback.jsx

➡️ git bash에서 안 먹힘.

현재 git이 해당 jsx 파일을 추적하고 있지 않기 때문에 git mv나 git rm --cached 같은 명령이 통하지 않음.

 

 

🚀 → 파일 삭제 후, 재생성으로 해결

 

 


 

우리 프로젝트 소셜로그인 방식

 

  1. 프론트에서
    https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=...&redirect_uri=...
    를 호출해서 카카오 로그인 페이지로 이동 → 사용자가 로그인 → 카카오가 redirect_uri(예: http://localhost:5173/api/oauth2/callback/kakao) 로 code를 쿼리 파라미터로 전달
  2. 프론트에서 URL에서 code를 추출 (authCode 값)
  3. 프론트에서 이 추출한 authCode를 request body에 넣어서
    GET https://mixmix2.store/api/kakao/token
    에 { "accessToken": "string", "refreshToken": "string" } 형태로 요청 보내서 회원가입 및 토큰 발급

 

response_type=code
인가 코드만 받음 (OAuth 2.0 표준 흐름)
→ 백엔드에서 이 코드로 토큰 발급 요청함 (access_token, refresh_token 등)

response_type=id_token 또는 response_type=code id_token
id_token 포함해서 받음 (OpenID Connect 인증 흐름)
→ id_token은 JWT 형식으로 사용자 인증 정보를 담고 있음

 

 

💥 그럼에도 로그인이 안 되는 이유?

axios.get 또는 axios.post로 서버에 보낼 때, 해당 값이 URL 경로나 쿼리 파라미터로 쓰인다면 인코딩되지 않으면 서버에서 인식 못하거나 에러 발생.

카카오 인가 코드는 ?code=xxx 형태로 오는데, 이 값에 특수문자가 포함될 수 있음.
➡️ encodeURIComponent(code) 형태로 처리해줘야 함.

 

로그인 성공

 

 


 

💥 alert 안내창이 로컬에서 2번 뜨는 이유 

→ 개발 모드에서 StrictMode가 켜져 있어서 useEffect가 의도치 않게 두 번 실행되기 때문.

main.jsx

개발 모드에서 StrictMode는 일부 함수(특히 useEffect)를 의도적으로 두 번 호출해서 부작용을 찾도록 도와줌.

 

✔️
useRef → 중복 요청 방지 
hasRequested.current → 중복 호출 방지

 


Chrome 개발자 도구에서 Access-Control-Allow-Origin 확인하는 방법

  1. 크롬에서 로컬용 웹앱 페이지 열기
    • 예) http://localhost:5173에서 실행 중인 페이지
  2. 개발자 도구 열기
    • Windows/Linux: F12 또는 Ctrl + Shift + I
    • Mac: Cmd + Option + I
  3. 'Network' 탭 클릭
    • 개발자 도구 상단에 있는 Network 탭 클릭
  4. 문제가 되는 API 요청 찾기
    • 페이지에서 Kakao 로그인이나 API 호출이 발생하는 동작을 다시 실행
    • Network 탭에 요청 목록이 쭉 뜰 거예요.
    • 요청 URL 중에서 확인할 요청을 찾기
  5. 요청 선택 후 응답 헤더 보기
    • 해당 요청을 클릭하면 우측에 상세 정보 (Headers가 기본 선택되어있음)
  6. Response Headers (응답 헤더) 부분 확인
    • 아래로 내려가서 Response Headers 섹션을 찾기
    • 거기서 Access-Control-Allow-Origin이라는 항목을 찾기
  7. 헤더 값 확인
    • 값이 내 웹페이지 url로 등록되어 있으면 올바르게 허용된 거고 아니면 허용 요청

 


 

◾ 브랜드 로고 사용 가이드 라인

 

https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide

https://developers.google.com/identity/branding-guidelines#matching

 

◾ 카카오 로그인 REST API

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api