DH Developement

• 사이드 프로젝트를 하나 더 만들며, 이번 기회에 보안 뿐만 아니라 편리성 측면에서 SSO 의 혜택을 누리고자 구글 OAuth 를 사용해 보았다.

로직 개요

• 프론트에서 Google OAuth 를 이용해 서비스 가입 및 유저 정보 획득
• 획득된 유저 정보를 백엔드로 전달
• 백엔드는 전달된 유저 정보를 DB에 입력
• 생성된 데이터들을 기반으로 JWT 생성 및 세션 생성
• 생성된 JWT 를 프론트엔드에 전달
• 프론트는 전달된 JWT를 매 요청의 헤더에 넣어서 사용

구글 OAuth 설정

• Google Cloud 에서 콘솔 클릭
  • https://console.cloud.google.com/apis/credentials
• 콘솔에서 프로젝트 생성
  • 생성된 프로젝트의 API 및 서비스 메뉴로 이동
  • OAuth 동의 화면 설정 진행
    • 서비스 정보 입력
  • 사용할 정보 추가
    • 이메일 및 개인정보 확인만 체크했음
  • 테스트 사용자 추가
    • 테스트 모드인 동안은 테스트 계정만 사용 가능
• 사용자 인증 정보 만들기
  • OAuth 클라이언트 ID 선택
  • 웹 어플리케이션 선택
  • 승인된 리디렉션 URI 추가
    • google 에서 인증받은 후 리디렉션 되는 경로
    • 프론트에서 사용할 값이므로 프론트의 주소를 사용하도록 등록함
      • 이 때 next-auth를 사용했으므로, next-auth 공식문서에서 제시한 Url Path로 설정
      • /api/auth/callback/google

Oauth 값들 기록

• clientId: 발급받은 클라이언트 ID
• clientSecret: 발급 받은 클라이언트 비밀번호
• redirectUri: 리디렉션 URI