Passport.js로 구글·페이스북 OAuth 로그인 구현

개요

웹 서비스에서 소셜 로그인을 도입하면 가입 흐름이 간단해진다. Passport.js는 Node.js 환경에서 다양한 인증 전략을 제공하는 미들웨어다. 이 글은 Passport.js로 구글과 페이스북 OAuth 로그인을 구현하는 과정을 초보자도 이해하기 쉽도록 정리한다. 예제는 Express 기반이며, 핵심 설정과 주의점을 함께 다룬다.

사전 준비

필수 요소

• Node.js와 npm 또는 yarn
• Express 애플리케이션 기본 구조
• 구글 및 페이스북 개발자 콘솔에서 OAuth 클라이언트 등록

설치할 패키지

{
  "dependencies": {
    "express": "^4.x",
    "passport": "^0.6.x",
    "passport-google-oauth20": "^2.x",
    "passport-facebook": "^3.x",
    "express-session": "^1.x"
  }
}

구글·페이스북 앱 등록 요약

각 플랫폼에는 애플리케이션 등록 절차가 있다. 중요한 점은 승인된 리디렉션 URI(콜백 URL)를 정확히 입력하는 것이다. 예를 들어 개발 중에는 http://localhost:3000/auth/google/callback 같은 형식을 사용한다.

기본 Express 설정

세션과 Passport 초기화를 등록한다. 세션은 로그인 상태를 유지하는 데 필요하다.

const express = require('express');
const session = require('express-session');
const passport = require('passport');

const app = express();
app.use(session({ secret: 'your_secret', resave: false, saveUninitialized: false }));
app.use(passport.initialize());
app.use(passport.session());

app.listen(3000);

Passport 설정

사용자 직렬화와 역직렬화를 구현한다. 실제 서비스에서는 DB에 사용자 정보를 저장하고 ID로 조회한다.

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  // DB에서 사용자 조회 예시
  User.findById(id).then(user => done(null, user)).catch(err => done(err));
});

구글 OAuth 설정

Passport의 passport-google-oauth20 전략을 사용한다. 클라이언트 ID와 시크릿, 콜백 URL을 설정한다.

const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
  clientID: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  callbackURL: '/auth/google/callback'
}, (accessToken, refreshToken, profile, done) => {
  // profile 정보로 사용자 처리
  User.findOrCreate({ googleId: profile.id }, (err, user) => done(err, user));
}));

페이스북 OAuth 설정

페이스북은 이메일 등 추가 필드를 요청하도록 설정할 수 있다. 권한 범위(scope)를 적절히 설정한다.

const FacebookStrategy = require('passport-facebook').Strategy;

passport.use(new FacebookStrategy({
  clientID: process.env.FACEBOOK_APP_ID,
  clientSecret: process.env.FACEBOOK_APP_SECRET,
  callbackURL: '/auth/facebook/callback',
  profileFields: ['id', 'displayName', 'emails']
}, (accessToken, refreshToken, profile, done) => {
  User.findOrCreate({ facebookId: profile.id }, (err, user) => done(err, user));
}));

인증 라우트 구성

로그인 요청과 콜백 처리 라우트를 만든다. 성공 시 리다이렉트 위치를 지정한다.

app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }));

app.get('/auth/google/callback',
  passport.authenticate('google', { failureRedirect: '/login' }),
  (req, res) => { res.redirect('/'); }
);

app.get('/auth/facebook', passport.authenticate('facebook', { scope: ['email'] }));

app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { failureRedirect: '/login' }),
  (req, res) => { res.redirect('/'); }
);

테스트와 디버깅

• 콜백 URL이 개발자 콘솔과 일치하는지 확인
• 환경변수에 클라이언트 ID/비밀키가 설정되어 있는지 확인
• 로그인 실패 시 Passport 콜백 함수에서 오류 로그를 남김

보안 및 운영 고려사항

• HTTPS 사용 권장. 운영 환경에서는 필수
• 세션 비밀값은 안전하게 저장
• OAuth 토큰 저장 여부는 최소화. 필요한 경우 암호화 저장
• state 파라미터로 CSRF 방어 검토

요약 및 권장 흐름

핵심은 인증 전략을 올바르게 구성하고, 콜백을 통해 사용자 정보를 안정적으로 처리하는 것이다. Passport.js는 여러 전략을 통합하기 쉬워 소셜 로그인을 빠르게 도입할 수 있다. 위 예제를 바탕으로 사용자 DB 연동과 에러 처리를 보완하면 실제 서비스에 적용할 수 있다.

참고 예제

이 문서의 예제는 Express와 Passport를 기준으로 한다. 키와 시크릿은 환경변수로 관리하고, 실제 배포 시 HTTPS와 세션 보안을 강화한다.