ABOUT ME

chanho Yoon
chyoon0512@gmail.com


깃허브


블로그 이사!

이 블로그로 이사했어요!!


Today
-
Yesterday
-
Total
-
  • Passport 구글 로그인 인증 (oauth20) - nodeJS
    Programming/NodeJS 2020. 2. 26. 19:04
    반응형

    Passport 란?

    • passport는 인증 절차 로직을 편하게 작업할 수 있게 도와주는 Node.js 미들웨어 입니다.

    Strategy ?

    • passport에서 사용하는 인증 방식으로, passport-local, passport-google 등이 있다

    oauth ?

    • oauth는 사용자의 비밀번호를 묻지 않고 인증하려는 웹의 계정 정보를 받아 접근권한을 얻는 인증 방식
    • google, naver, github, facebook 등으로 인증하는 경우

    Install

    npm install passport-google-oauth20

     

     

    Google Developers Console 에 접속하여 Application 생성

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

    발급을 받았다면 클라이언트 ID클라이언트 보안 비밀 부분에 발급된 키가 보인다.

     

    Strategy 구성

    공식문서

    var GoogleStrategy = require('passport-google-oauth20').Strategy;
    
    passport.use(new GoogleStrategy({
        clientID: GOOGLE_CLIENT_ID,
        clientSecret: GOOGLE_CLIENT_SECRET,
        callbackURL: "http://www.example.com/auth/google/callback"
      },
      function(accessToken, refreshToken, profile, cb) {
        User.findOrCreate({ googleId: profile.id }, function (err, user) {
          return cb(err, user);
        });
      }
    ));

     

    Authenticate Requests

    공식문서 

    app.get('/auth/google',
      passport.authenticate('google', { scope: ['profile'] }));
    
    app.get('/auth/google/callback', 
      passport.authenticate('google', { failureRedirect: '/login' }),
      function(req, res) {
        // Successful authentication, redirect home.
        res.redirect('/');
      });

    순서
    web에서 google 로그인 클릭  =>  app.get('/auth/google) 실행  =>  passport.use에서 new GoogleStrategy 실행 cliendID,clientSecret 인증성공 =>  구글이동 및 사용자 정보 권한 승인  =>   구글 사용자 정보를 callback해줌 =>  passport.use에서 function(accessToken, refreshToken, profile, cb)에서 callback 받은 사용자 정보(profile)를 받음 -> 그 이후엔 유저를 로그인 시킨다던지 새로운 유저를 생성한다던지 하고 cb를 return 해줘야함

     

    실제 사용 코드

    개인 프로젝트 코드 일부분이므로 환경이 틀려서 복붙 하시면 안됩니다.
    // app.js
    
    app.get('/auth/google',
      passport.authenticate('google', { scope: ['profile','email'] }));
    
    
    app.get('/auth/google/callback', 
      passport.authenticate('google', { failureRedirect: '/login' }),
      function(req, res) {
        // Successful authentication, redirect home.
        res.redirect('routes.home');
      });

     

    // passport.js
    
    import GoogleStrategy from 'passport-google-oauth20'
    import passport from 'passport'
    import User from './models/User'
    
    
    passport.use(
      new GoogleStrategy(
        {
          clientID: GOOGLE_ID,
          clientSecret: GOOGLE_SECRET,
          callbackURL: `http://localhost:4000/auth/google/callback`
        },
        function (accessToken, refreshToken, profile, cb) {
          const {
            _json: { id, avatar_url, login: name, email }
          } = profile
          try {
            const user = await User.findOne({ email: email })
            //동일한 이메일을 가졌을 때는 이미 가입중인 사용자라면 바로 로그인하도록 아니라면 신규 사용자 생성
            if (user) {
              user.githubId = id
              user.save()
              return cb(null, user)
            } else {
              const newUser = await User.create({
                email,
                name,
                githubId: id,
                avatarUrl: avatar_url
              })
              return cb(null, newUser)
            }
          } catch (error) {
            return cb(error)
          }
        }
      )
    )
    

     

    passport-local 자세히 설명된 블로그 :
    https://m.blog.naver.com/PostView.nhn?blogId=pjok1122&logNo=221565691611&proxyReferer=https%3A%2F%2Fwww.google.com%2F

    댓글

Designed by Tistory.