OAuth 로그인 구현 (Google)

이번엔 로그인 보안의 핵심, OAuth 2.0을 활용해 구글 소셜 로그인을 구현했다.

1. Google API Console 설정 (환경 설정)

먼저 구글로부터 앱 사용 허가를 받아야 합니다. Google Cloud Console에서 다음 작업을 수행해야 한다.

1. OAuth 동의 화면 구성: 앱 이름과 이메일 등 필수 정보를 입력
2. OAuth 클라이언트 ID 발급: '웹 애플리케이션' 유형으로 생성.
3. 리디렉션 URI 설정: 백엔드 서버 주소인 http://localhost:8000/v1/auth/google/callback을 정확히 등록. 이 주소가 틀리면 인증 후 데이터를 돌려받을 수 없음

2. 백엔드 서버 환경변수 연동

발급받은 Client ID와 Client Secret을 서버 코드에 심어줍니다.

• 위치: 서버의 .env 파일
• 주의사항: 기존에 정의된 Key 이름(예: GOOGLE_CLIENT_ID)을 유지한 채 Value만 발급받은 값으로 교체해야 한다. 

---

3. 프론트엔드 구현: 로그인 시작

1) 구글 로그인 버튼 추가

• LoginPage.tsx에 구글 로그인 버튼을 추가했다.
• 클릭 시 백엔드의 로그인 엔드포인트로 페이지를 이동시키는 역할

const handleGoogleLogin = () => {
  // 백엔드의 구글 로그인 시작 엔드포인트로 이동
  window.location.href = 'http://localhost:8000/v1/auth/google/login';
};

2) 콜백(Callback) 페이지 구현

• 구글 인증이 끝나면 서버는 토큰을 URL에 담아 유저를 다시 보내야 하므로 이를 처리할 전용 컴포넌트 GoogleCallback.tsx를 만들었다.

// URL 파라미터에서 accessToken과 refreshToken을 추출하여 
// localStorage에 저장하고 메인 페이지로 리다이렉트
const params = new URLSearchParams(window.location.search);
const accessToken = params.get('accessToken');
// ... 토큰 저장 로직

3) 라우터 등록

• main.tsx의 createBrowserRouter 설정에 콜백 경로를 추가
• 백엔드가 돌아올 주소인 /v1/auth/google/callback을 프론트엔드 포트 5173에서도 열어줘야 한다. 

 

4. 트러블 슈팅 

1. 리디렉션 URI 불일치 문제
   • 가장 많이 겪는 에러인 redirect_uri_mismatch를 방지하기 위해 구글 콘솔, 백엔드 .env, 그리고 프론트엔드 라우터 경로를 모두 일치시켰다. 관리자 가이드대로 포트 번호(8000, 5173)를 엄격히 지키는 것이 핵심
2. 데이터 필드명 매칭
   • 일반 로그인과 달리 소셜 로그인은 서버가 URL 쿼리 파라미터로 데이터를 넘겨줍니다. 이때 token인지 accessToken인지 Swagger 문서를 정확히 확인하고 코드를 짜야 데이터를 잃어버리지 않는다