[Node.js] OAuth2 로그인 - 2(Google Login)

 

 

구글 로그인을 구현하기 위해, OAuth 2.0 프로토콜을 사용하여 Google API와 연동합니다. 아래는 Node.js + Express 기반의 간단한 Google 로그인 구현 예제입니다.

---

사전 준비

1. Google Cloud Console에서 프로젝트 생성
   • Google Cloud Console에 접속.
   • 새 프로젝트를 생성하거나 기존 프로젝트를 선택.
   • OAuth 동의 화면 설정:
     • 사용자 유형 선택(외부/내부).
     • 필수 정보 입력(애플리케이션 이름, 이메일 등).
   • OAuth 2.0 클라이언트 ID 생성:
     • 애플리케이션 유형: 웹 애플리케이션 선택.
     • 승인된 리디렉션 URI 추가: 예) http://localhost:3000/auth/google/callback
   • 클라이언트 ID와 클라이언트 비밀 키(Client Secret)를 복사.
2. 라이브러리 설치

npm install express passport passport-google-oauth20 express-session

---

코드 작성

1. 프로젝트 구조

project/
│
├── app.js            # 애플리케이션 엔트리 파일
├── package.json      # Node.js 종속성
└── config.js         # Google OAuth 클라이언트 설정 파일

 

2. config.js

Google OAuth 클라이언트 정보를 설정합니다.

module.exports = {
  google: {
    clientID: "YOUR_CLIENT_ID", // Google Cloud Console에서 발급받은 클라이언트 ID
    clientSecret: "YOUR_CLIENT_SECRET", // Google Cloud Console에서 발급받은 클라이언트 비밀 키
    callbackURL: "http://localhost:3000/auth/google/callback" // 리디렉션 URI
  }
};

 

3. app.js

Express와 Passport.js를 사용하여 Google 로그인 처리.

const express = require("express");
const passport = require("passport");
const session = require("express-session");
const { Strategy: GoogleStrategy } = require("passport-google-oauth20");
const { google } = require("./config");

const app = express();

// Session 설정
app.use(session({ secret: "secret", resave: false, saveUninitialized: true }));

// Passport 초기화
app.use(passport.initialize());
app.use(passport.session());

// Google OAuth2 Strategy 설정
passport.use(
  new GoogleStrategy(
    {
      clientID: google.clientID,
      clientSecret: google.clientSecret,
      callbackURL: google.callbackURL
    },
    (accessToken, refreshToken, profile, done) => {
      // 로그인 성공 시 콜백
      console.log("Google profile:", profile);
      return done(null, profile); // 프로필 정보 저장
    }
  )
);

// 세션에 사용자 정보 저장
passport.serializeUser((user, done) => done(null, user));
passport.deserializeUser((user, done) => done(null, user));

// 라우팅
app.get("/", (req, res) => {
  res.send(`
    <h1>Google Login Example</h1>
    <a href="/auth/google">Login with Google</a>
  `);
});

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

// Google 로그인 콜백 처리
app.get(
  "/auth/google/callback",
  passport.authenticate("google", { failureRedirect: "/" }),
  (req, res) => {
    // 로그인 성공
    res.redirect("/profile");
  }
);

// 프로필 페이지
app.get("/profile", (req, res) => {
  if (!req.isAuthenticated()) {
    return res.redirect("/");
  }
  res.send(`
    <h1>Welcome, ${req.user.displayName}</h1>
    <p>Email: ${req.user.emails[0].value}</p>
    <a href="/logout">Logout</a>
  `);
});

// 로그아웃
app.get("/logout", (req, res) => {
  req.logout();
  res.redirect("/");
});

// 서버 실행
app.listen(3000, () => {
  console.log("Server started on http://localhost:3000");
});

---

결과

1. 브라우저에서 http://localhost:3000에 접속.
2. "Login with Google" 버튼 클릭.
3. Google 로그인 화면이 나타나며, 로그인 후 권한 허용.
4. 성공하면 프로필 페이지에 리디렉션되어 사용자 정보 표시.

---

주의 사항

• 리디렉션 URI가 Google Cloud Console에 등록된 URI와 동일해야 합니다.
• 프로덕션 환경에서는 HTTPS를 사용하고, 세션에 대한 보안을 강화해야 합니다.