Passport.js 를 이용한 구글 소셜 로그인 구현

rkdghwnd·2023년 6월 3일

구글 소셜 로그인 구현전 환경 설정

passport, cookie-parser, express-session 등의 설정은 로컬 로그인 참고

passport.js 이용한 구글 소셜 로그인 구현하기

구글 로그인 전략에 대한 공식문서

npm install passport-google-oauth20

구글 로그인 API 작성하기

routes/user.js

...
// 구글 로그인
router.get(
  "/google/auth",
  isNotLoggedIn,
  passport.authenticate("google", {
    scope: ["email"],
  })
);

router.get(
  "/google/callback",
  passport.authenticate("google", {
    failureRedirect: "/",
  }),
  function (req, res) {
    res.redirect(process.env.FRONT_END_DOMAIN);
  }
);
...

passport 구글 소셜 로그인은 두개의 API가 필요하다

구글 서버로 인증요청을 보내는 API
구글 서버로부터 인증정보를 받아 googleStrategy를 실행하는 API

googleStrategy 작성하기

passport/googleStrategy.js

const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const { User } = require("../models");
const dotenv = require("dotenv");
dotenv.config();

module.exports = () => {
  passport.use(
    new GoogleStrategy(
      {
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: `${process.env.BACK_END_DOMAIN}/user/google/callback`,
        scope: ["profile", "email"],
        state: true,
      },
      async (accessToken, refreshToken, profile, done) => {
        console.log("google profile", profile);
        try {
          const exUser = await User.findOne({
            where: { snsId: profile.id, provider: "google" },
          });
          if (exUser) {
            done(null, exUser);
          } else {
            const newUser = await User.create({
              email: profile._json && profile._json.email,
              password: "",
              nickname: profile.emails[0].value,
              introduce: "",
              provider: "google",
              snsId: profile.id,
            });
            done(null, newUser);
          }
        } catch (error) {
          console.error(error);
          done(error);
        }
      }
    )
  );
};

공식문서 가이드를 바탕으로 googleStrategy를 작성한다

clientID : google developer console로 부터 발급받은 client ID
clientSecret : facebook developers로 부터 발급받은 google 보안 비밀번호
callbackURL: 구글 서버에서 인증정보를 보낼 Redirect URI
scope: 구글에서 받아올 계정정보
state: true로 설정하면 nonce를 생성하고 세션에 유지한다.
Redirect URI 라우터에서 세번째 콜백함수 안에 req.authInfo.state의 형태로 사용가능
세션값과 nonce의 값을 비교해서 일치하지 않을때 요청을 거부시킬수 있습니다.
CSRF 공격을 방지하므로 사용하는것이 좋다. 참고

app.get('/auth/google/callback', 
  passport.authenticate('google', { failureRedirect: '/login' }), 
  function(req, res) { 
    var state = req.authInfo.state; 
    // 재개 상태... 
  });

구글 로그인 버튼 만들기

구글 로그인 버튼은 href 를 이용해 만들어야 정상적으로 작동한다.

	 <a href={`${process.env.NEXT_PUBLIC_BACK_END_DOMAIN}/user/google/auth`}>
        <img
          src={`${process.env.NEXT_PUBLIC_FRONT_END_DOMAIN}/images/google-auth-image.png`}
        ></img>
      </a>