Node.js에서 OAuth 2.0으로 소셜 로그인 구현하기

OAuth 2.0이란?

OAuth 2.0은 사용자 인증을 위한 개방형 표준 프로토콜로, 사용자가 다른 웹사이트에 자신의 정보를 제공할 때 비밀번호와 같은 민감한 정보를 직접 전달하지 않고도 안전하게 인증할 수 있는 방법이다.

 

예를 들어,
1. 당신이 새로운 서비스에 가입하려고 할 때
2. "Google로 계속하기" 버튼을 클릭하면
3. Google 로그인 창이 뜨고
4. 승인하면 새로운 서비스는 당신의 Google 계정 정보 중 필요한 부분만 안전하게 전달받아 사용

 

이러한 과정이 바로 OAuth 2.0 프로토콜을 통해 이루어진다.

 

왜 소셜 로그인인가?

• 사용자 측면
  • 새로운 계정 생성 불필요
  • 비밀번호 기억/관리 부담 감소
  • 신뢰할 수 있는 플랫폼을 통한 안전한 인증
• 개발자 측면
  • 보안 인증 로직 구현 부담 감소
  • 신뢰할 수 있는 사용자 정보 획득
  • 사용자 DB 관리 부담 감소

Google과 Kakao OAuth를 선택한 이유

1. Google OAuth
   • 전 세계적으로 가장 널리 사용되는 소셜 로그인 서비스
   • OAuth 2.0의 표준적인 구현을 제공
   • 상세한 개발 문서와 안정적인 서비스 제공
   • 무료로 시작할 수 있는 충분한 API 쿼터
2. Kakao OAuth
   • 국내 사용자들에게 친숙한 플랫폼
   • 간편한 개발자 센터와 문서 제공
   • 한글 문서와 기술 지원
   • 무료 API 제공과 높은 쿼터 제한

이러한 두 플랫폼의 구현을 통해 국내외 사용자들을 모두 고려한 소셜 로그인 시스템을 구축할 수 있다.

 

의존성 설치

# 주요 의존성 설치
npm install express dotenv passport passport-google-oauth20 passport-kakao express-session
# 개발 의존성 설치
npm install --save-dev nodemon

각 패키지의 역할

• express: 웹 서버 프레임워크
• dotenv: 환경 변수 관리
• passport: 인증 미들웨어
• passport-google-oauth20: Google OAuth 2.0 인증 전략
• passport-kakao: Kakao OAuth 인증 전략
• express-session: 세션 관리
• nodemon: 개발 시 자동 서버 재시작 도구

OAuth 인증 정보 설정

Google OAuth 설정

1. [Google Cloud Console](https://console.cloud.google.com/) 접속
2. 새 프로젝트 생성
3. "API 및 서비스" → "사용자 인증 정보" 메뉴로 이동
4. "OAuth 동의 화면" 구성
   • 애플리케이션 이름 설정
   • 사용자 지원 이메일 입력
   • 개발자 연락처 정보 입력
5. "사용자 인증 정보" → "사용자 인증 정보 만들기" → "OAuth 클라이언트 ID" 선택
      - 애플리케이션 유형: "웹 애플리케이션" 선택
      - 승인된 리디렉션 URI 추가: `엔드포인트 입력`

Kakao OAuth 설정

1. [Kakao Developers](https://developers.kakao.com/) 접속
2. 애플리케이션 추가
3. "플랫폼" 설정에서 Web 플랫폼 등록
      - 사이트 도메인: `도메인 서버 입력`
4. "카카오 로그인" 설정
   • 활성화 설정: ON
   • Redirect URI 등록: `엔드포인트 입력`
5. REST API 키(클라이언트 ID) 확인

OAuth 인증 로직 구현

Passport 전략 설정

// Google 전략
passport.use(
	new GoogleStrategy({
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: "http://localhost:3000/auth/google/callback"
    },
    async (accessToken, refreshToken, profile, done) => {
        // profile에서 필요한 정보 추출 후 사용자 객체 생성
        return done(null, user);
    })
);

// Kakao 전략
passport.use(
    new KakaoStrategy({
        clientID: process.env.KAKAO_CLIENT_ID,
        callbackURL: "http://localhost:3000/auth/kakao/callback"
    },
    async (accessToken, refreshToken, profile, done) => {
        // profile에서 필요한 정보 추출 후 사용자 객체 생성
        return done(null, user);
    })
);

 

인증 라우트

// 로그인 시작
router.get("/google", 
    passport.authenticate("google", { scope: ["profile", "email"] })
);
router.get("/kakao", 
    passport.authenticate("kakao")
);

// 인증 콜백
router.get("/google/callback",
    passport.authenticate("google", {
        successRedirect: "/",
        failureRedirect: "/"
    })
);
router.get("/kakao/callback",
    passport.authenticate("kakao", {
        successRedirect: "/",
        failureRedirect: "/"
    })
);

// 프로필 조회 (보호된 라우트)
router.get("/profile", isAuthenticated, (req, res) => {
    // 사용자 정보 표시
});

 

인증 흐름

1. 사용자가 로그인 버튼 클릭
2. OAuth 제공자 로그인 페이지로 이동
3. 로그인 성공 시 콜백 URL로 리다이렉트
4. 사용자 정보를 세션에 저장
5. 메인 페이지('/')로 리다이렉트

프로젝트 회고

이번 토이 프로젝트를 통해 OAuth 2.0 기반의 소셜 로그인 구현 과정을 살펴보았다.

 

기술적 성과

• Passport.js를 활용한 인증 시스템 구현
• Google과 Kakao OAuth 전략의 성공적인 통합
• 세션 기반 사용자 인증 관리 구현

학습 포인트

• OAuth 2.0 프로토콜의 동작 방식 이해
• 소셜 로그인의 보안적 이점 파악
• 미들웨어를 활용한 모듈화된 코드 구조 설계

현재 OAuth를 활용한 소셜 로그인 구현은 현대 웹 서비스에서 필수적인 기능이 되었다. 이 프로젝트를 통해 구현한 기본적인 소셜 로그인 시스템은 향후 다양한 프로젝트에서 활용할 수 있는 좋은 시작점이 될 것이라 생각한다.

 

 

 

[Git 주소] https://github.com/HolySSA/oauth-login-toy

GitHub - HolySSA/oauth-login-toy

[Passport.js 공식 문서] http://www.passportjs.org/

Passport.js

[Google OAuth 2.0 가이드] https://developers.google.com/identity/protocols/oauth2

OAuth 2.0을 사용하여 Google API에 액세스하기  |  Authorization  |  Google for Developers

[Kakao 로그인 가이드] https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers