[NODE] 📚 구글 로그인 (passport-google-oauth20) ✈️ 구현

구글 로그인 OAuth 신청

우선 https://console.developers.google.com/apis 에 접속해서 client ID와 client secret를 발급받아야 한다. 

Google Cloud Platform

 

1. 새 프로젝트 생성

 

2. OAuth 동의 화면 구성

구글 로그인할때, 서비스 동의 화면에 어떤 정보를 띄울지 구성한다.

---

각각 정보를 기입하고, 저장후 계속 버튼을 누른다.

 

 

3. SCOPE 정보 설정

 

4. OAuth 클라이언트 ID 생성

 

5. 테스트 사용자 작성

 

6. 클라이언트 아이디/비밀번호 발급

생성된 클라이언트 ID와 보안 비밀번호를 각각 복사해둔다.

---

구글 로그인 라우터 전략 구현

 

passport-google-oauth20

passport oauth2 에 google 로그인 연동 라이브러리를 설치해준다.

$ npm install passport-google-oauth20

passport-google-oauth20

 

모듈을 설치했다면, .env 파일에 위에서 발급한 client id와 비밀번호를 환경변수 등록을 해준다.

---

routes/auth.js

• naver OAuth경로 설정

//* 구글로 로그인하기 라우터 ***********************
router.get('/google', passport.authenticate('google', { scope: ['profile', 'email'] })); // 프로파일과 이메일 정보를 받는다.

//? 위에서 구글 서버 로그인이 되면, 네이버 redirect url 설정에 따라 이쪽 라우터로 오게 된다. 인증 코드를 박게됨
router.get(
   '/google/callback',
   passport.authenticate('google', { failureRedirect: '/' }), //? 그리고 passport 로그인 전략에 의해 googleStrategy로 가서 구글계정 정보와 DB를 비교해서 회원가입시키거나 로그인 처리하게 한다.
   (req, res) => {
      res.redirect('/');
   },
);

 

 

passport/googleStrategy.js

• 구글 로그인 전략

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

const User = require('../models/user');

module.exports = () => {
   passport.use(
      new GoogleStrategy(
         {
            clientID: process.env.GOOGLE_ID, // 구글 로그인에서 발급받은 REST API 키
            clientSecret: process.env.GOOGLE_SECRET,
            callbackURL: '/auth/google/callback', // 구글 로그인 Redirect URI 경로
         },
         async (accessToken, refreshToken, profile, done) => {
            console.log('google profile : ', profile);
            try {
               const exUser = await User.findOne({
                  // 구글 플랫폼에서 로그인 했고 & snsId필드에 구글 아이디가 일치할경우
                  where: { snsId: profile.id, provider: 'google' },
               });
               // 이미 가입된 구글 프로필이면 성공
               if (exUser) {
                  done(null, exUser); // 로그인 인증 완료
               } else {
                  // 가입되지 않는 유저면 회원가입 시키고 로그인을 시킨다
                  const newUser = await User.create({
                     email: profile?.email[0].value,
                     nick: profile.displayName,
                     snsId: profile.id,
                     provider: 'google',
                  });
                  done(null, newUser); // 회원가입하고 로그인 인증 완료
               }
            } catch (error) {
               console.error(error);
               done(error);
            }
         },
      ),
   );
};

 

 

passport/index.js

• googleStrategy.js 등록

const passport = require('passport');
const local = require('./localStrategy'); // 로컬서버로 로그인할때
const google = require('./googleStrategy'); // 구글서버로 로그인할때

const User = require('../models/user');

module.exports = () => {

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

   passport.deserializeUser((id, done) => {
      User.findOne({ where: { id } })
         .then(user => done(null, user))
         .catch(err => done(err));
   }); 

   local();
   google(); // 구글 전략 등록
};

---

구글 로그인 인증 순서

1. google 로그인 클릭
2. router.get('/auth/google) 으로 requestrk 옴
3. passport.use에서 new GoogleStrategy 실행 cliendID, clientSecret 인증성공
4. 구글이동 및 사용자 정보 권한 승인
5. 구글 사용자 정보를 callback해줌
6. passport.use에서 function(accessToken, refreshToken, profile, done)에서 callback 받은 사용자 정보(profile)를 받음
7. 그 이후엔 DB 처리를 통해 유저를 로그인 로직을 실행 하고 done를 return 해주어 라우터로 돌아옴