7. 소셜로그인 API 연동
📌 카카오 로그인
✅ 로그인 흐름
① 사용자가 '카카오 로그인' 버튼 클릭
② 카카오 로그인 페이지로 이동 (인가 코드 받기)
③ 카카오에서 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 같은 명령이 통하지 않음.
🚀 → 파일 삭제 후, 재생성으로 해결
우리 프로젝트 소셜로그인 방식
- 프론트에서
https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=...&redirect_uri=...
를 호출해서 카카오 로그인 페이지로 이동 → 사용자가 로그인 → 카카오가 redirect_uri(예: http://localhost:5173/api/oauth2/callback/kakao) 로 code를 쿼리 파라미터로 전달 - 프론트에서 URL에서 code를 추출 (authCode 값)
- 프론트에서 이 추출한 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가 의도치 않게 두 번 실행되기 때문.
개발 모드에서 StrictMode는 일부 함수(특히 useEffect)를 의도적으로 두 번 호출해서 부작용을 찾도록 도와줌.
✔️
useRef → 중복 요청 방지
hasRequested.current → 중복 호출 방지
Chrome 개발자 도구에서 Access-Control-Allow-Origin 확인하는 방법
- 크롬에서 로컬용 웹앱 페이지 열기
- 예) http://localhost:5173에서 실행 중인 페이지
- 개발자 도구 열기
- Windows/Linux: F12 또는 Ctrl + Shift + I
- Mac: Cmd + Option + I
- 'Network' 탭 클릭
- 개발자 도구 상단에 있는 Network 탭 클릭
- 문제가 되는 API 요청 찾기
- 페이지에서 Kakao 로그인이나 API 호출이 발생하는 동작을 다시 실행
- Network 탭에 요청 목록이 쭉 뜰 거예요.
- 요청 URL 중에서 확인할 요청을 찾기
- 요청 선택 후 응답 헤더 보기
- 해당 요청을 클릭하면 우측에 상세 정보 (Headers가 기본 선택되어있음)
- Response Headers (응답 헤더) 부분 확인
- 아래로 내려가서 Response Headers 섹션을 찾기
- 거기서 Access-Control-Allow-Origin이라는 항목을 찾기
- 헤더 값 확인
- 값이 내 웹페이지 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