[express.js] Google OAuth 소셜 로그인

Google OAuth 흐름

Google OAuth login 로직 구현

• npm i passport-google-oauth20

1. app.js에 passport google을 설정해줘야 한다.

app.get("/auth/google", passport.authenticate("google"));

• auth/google 경로로 이동할 시 passport google이 실행된다.
  즉, 밑에 작성한 passport.js 파일에서 google 함수가 실행되는 것

2. passport.js 또는 google.js 파일에 passport.use를 이용해서 google 소셜 로그인을 이용할 수 있게 한다.

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

const googleClientID = 메모장에 적어둔 clientId
const googleClientSecret = 메모장에 적어둔 client비밀번호

const googleStrategyConfig = new GoogleStrategy(
  {
    clientID: googleCliendID,
    clientSecret: googleCliendSecret,
    callbackURL: "/auth/google/callback",
    scope: ["email", "profile"],
  },
  (accessToken, refreshToken, profile, done) => {
  // 리디렉션 된 callbackURL 코드가 실행되는 곳
  // 3번
    console.log(profile); 
  }
);

// passport.use 무슨 전략을 사용할지(google
passport.use("google", googleStrategyConfig);

• 여기까지가 유저의 googleId 권한을 요청하고, 권한 부여 후 액세스 코드와 함께 콜백 주소로 리디렉션된다.
  이렇게 되면 사용자는 웹을 사용하게 되는 권한을 부여받는다.

3. 리디렉션 된 callbackURL 코드를 만들어줘야한다.

// app.js
app.get(
  "/auth/google/callback",
  passport.authenticate("google", {
    successReturnToOrRedirect: "/",
    failureRedirect: "/login",
  })
);

• 성공을 하면 / 경로로 이동하고, 실패를 하면 /login 경로로 이동한다.

4. 2번에서 작성한 내용에 덧붙여서 코드가 완성된다.

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

const googleStrategyConfig = new GoogleStrategy(
  {
    clientID: googleCliendID,
    clientSecret: googleCliendSecret,
    callbackURL: "/auth/google/callback",
    scope: ["email", "profile"],
  },
  async (accessToken, refreshToken, profile, done) => {
    // 리디렉션 된 callbackURL 코드가 실행되는 곳
  // 3번
    console.log(profile);

    try {
      const user = await User.findOne({ googleId: profile.id });

      if (user) {
        // done(null은 에러는 없고) user정보를 전달해준다.
        return done(null, user);
      } else {
        const newUser = new User({
          email: profile.emails[0].value,
          googleId: profile.id,
        });

        await newUser.save();
        return done(null, user);
      }
    } catch (err) {
      console.log(err);
    }
  }
);

passport.use("google", googleStrategyConfig);

• 리디렉션이 되면 profile 정보는 console.log에 찍힌다.
• db에서 googleId와 같은 게 있으면 그대로 유저 정보를 전달해주며 로그인이 성공하고,
• db에 googleId와 같은 게 없으면 db에 저장을 하고 로그인이 실행된다.

깃허브 소스 코드