Nodejs에서 간편한 Google OAuth2 인증

이 프로젝트에서는 단순히 패스포트 구글 전략을 사용합니다.
Passport는 Node.js용 인증 미들웨어입니다. 매우 유연하고 모듈식인 Passport는 모든 Express 기반 웹 응용 프로그램에 눈에 띄지 않게 드롭될 수 있습니다. 포괄적인 전략 세트는 사용자 이름과 암호, Facebook, Twitter 등을 사용한 인증을 지원합니다. reference
시작하기 전에 JavaScript와 Nodejs에 대해 잘 알고 있다고 가정합니다.
더 이상 지체하지 않고 시작합시다 👍

Google 자격 증명

먼저 Google의 자격 증명을 가져와야 합니다.
'아직 자격 증명이 없는 경우' 자격 증명을 얻으려면 Google developer Console로 이동하십시오.

1)create a new project
2)Select the project and click credentials and then select OAuth client ID
3)Now Select Web Application in application type.
4)Input your app name or whatever else you like, in Authorized JavaScript origins add this linehttp://localhost:3000 and in Authorized redirect URIs field add this line http://localhost:5000/auth/google/callback and click to create.
5)Now copy your Google client ID and Google client secret
Help

새 프로젝트를 초기화하자

To initialize the new project you just need to create a new folder "App name" and open a folder in visual studio (or any other IDE ) code or any other IDE and run the below code in the command line

 npm init  

프로젝트 이름과 기타 세부 정보를 입력하거나 건너뜁니다. package.json 파일이 생성된 후.

프로젝트의 구조

위 이미지의 참조와 같이 폴더를 만들고 파일은 자동으로 생성되므로 node_modules package-lock 및 package-json을 그대로 둡니다.

종속성 설치

프로젝트에 설치해야 하는 의존성입니다.

express
ejs
connect-mongo
dotenv
express-session
mongoose
passport
passport-google-oauth20

터미널에 아래 코드를 작성하여 종속성을 설치하십시오.

npm i ejs connect-mongo dotenv express-session mongoose passport passport-google-oauth20

실행을 위한 설정 앱

서버를 자동으로 시작하려면 변경 사항이 감지되면 자동으로 서버를 다시 시작하는 Nodemon을 설치하기만 하면 됩니다.

npm i -D nodemon

개발자 실행 및 일반 실행을 위한 설정 응용 프로그램입니다. package.json에서 아래 코드로 Script 섹션을 변경하기만 하면 됩니다.

"scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
  },

로컬 서버 시작

테스트/개발을 위해 앱을 시작하려면 명령줄에 다음 명령을 입력하기만 하면 됩니다.

npm run dev

본업은 거기서부터 시작

이 파일에 Google 클라이언트 ID와 비밀번호를 입력하기만 하면 됩니다. 시스템에서 MongoDB를 호스팅하는 경우 (mongodb://localhost:27017/)와 같은 MongoDB URI도 있습니다. Mongodb Atlas을 사용하는 경우(mongodb+srv://XXXX:[email protected]/{DBNAME}?retryWrites=true&w=majority)
파일: config/config.env

PORT = 3000
MONGO_URI=mongodb+srv://XXXX:[email protected]/{DBNAME}?retryWrites=true&w=majority
GOOGLE_CLIENT_ID = XXXXXXXXXX
GOOGLE_CLIENT_SECRET = XXXXXXXXXXXXXXXX

제 경우에는 Mongodb Atlas를 사용합니다. mongodb atlas URI를 가져오려면 this을 참조할 수 있습니다. 문제가 발생하면 Google 클라이언트 ID 및 암호에 대해 this을 참조하십시오.

신청

그것의 시간 코드 우리 app.js 파일 이것은 메인 파일이고 그것은 우리 웹사이트의 루트에 위치할 것입니다.
이 파일에서 서버를 설정해야 합니다.

파일: app.js

Import all the necessary modules.

const express = require('express');
const mongoose=require('mongoose');
const dotenv = require('dotenv')
const passport = require('passport')
const session = require('express-session')
const MongoStore = require('connect-mongo')(session)
require('./config/passport')(passport)

mongodb에 연결하고 익스프레스 템플릿을 설정합니다.

var app=express();
const PORT = process.env.PORT||3000;
dotenv.config({ path: './config/config.env' })

mongoose.connect(process.env.MONGO_URI,{
    useNewUrlParser:true,
    useUnifiedTopology: true
})
app.use(express.static('public'))
app.set('view engine','ejs');

미들웨어를 초기화하고 세션을 저장하기 위한 데이터베이스를 설정합니다.

app.use(express.urlencoded({extended:true}))
app.use(
    session({
      secret: 'keyboard cat',
      resave: false,
      saveUninitialized: false,
      store: new MongoStore({ mongooseConnection: mongoose.connection }),
    })
  )
  // Passport middleware
app.use(passport.initialize())
app.use(passport.session())

마지막 부분 가져오기 경로

app.use(require("./routes/index"))
app.use('/auth', require('./routes/auth'))

app.listen(PORT,console.log(`listening at ${PORT}`))

이제 app.js 파일이 준비되었습니다 🎉🎉

노선

이제 경로를 코딩할 시간입니다.
우리는 인증을 위한 2개의 경로 파일 하나auth.js와 페이지 간 리디렉션을 위한 다른 하나index.js를 코딩해야 합니다.auth.js 파일을 코딩해 보겠습니다.
파일: auth.js

//Importing required modules 
const express = require('express')
const passport = require('passport')
const router = express.Router()

Google에 보내 인증을 수행합니다.
범위에서 프로필은 이름을 포함한 기본 정보를 가져오고 이메일은 이메일을 가져옵니다.

router.get('/google', passport.authenticate('google', { scope: ['profile','email'] }))

Google이 사용자를 인증한 후 콜백합니다.

router.get(
  '/google/callback',
  passport.authenticate('google', { failureRedirect: '/' }),
  (req, res) => {
    res.redirect('/log')
  }
)

로그아웃의 경우

router.get('/logout', (req, res) => {
  req.logout()
  res.redirect('/')
})

module.exports = router

이제 auth.js 파일이 준비되었습니다 🎉🎉


index.js 파일을 생성하기 전에 사용자가 인증되었는지 여부를 확인하기 위해 미들웨어를 생성해야 합니다.

파일: middleware/auth.js

module.exports = {
  // if user is authenticated the redirected to next page else redirect to login page
  ensureAuth: function (req, res, next) {
    if (req.isAuthenticated()) {
      return next()
    } else {
      res.redirect('/')
    }
  },
  // if user is authenticated and going to login page then redirected to home page if not authenticated redirected to login page  .
  ensureGuest: function (req, res, next) {
    if (!req.isAuthenticated()) {
      return next();
    } else {
      res.redirect('/log');
    }
  },
}

이제 미들웨어가 준비되었습니다. 다음 라우터index.js를 코딩해 보겠습니다.
파일: routes/index.js

const router = require('express').Router()
//importing middleware
const { ensureAuth, ensureGuest } = require('../middleware/auth')

router.get('/', ensureGuest ,(req, res) => {
    res.render('login')
  })

router.get("/log",ensureAuth, async(req,res)=>{
    res.render('index',{userinfo:req.user})
})
module.exports=router;

Passport Google 전략 구성

파일: config/passport.js

// import all the things we need  
const GoogleStrategy = require('passport-google-oauth20').Strategy
const mongoose = require('mongoose')
const User = require('../models/User')

module.exports = function (passport) {
  passport.use(
    new GoogleStrategy(
      {
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: '/auth/google/callback',
      },
      async (accessToken, refreshToken, profile, done) => {
        //get the user data from google 
        const newUser = {
          googleId: profile.id,
          displayName: profile.displayName,
          firstName: profile.name.givenName,
          lastName: profile.name.familyName,
          image: profile.photos[0].value,
          email: profile.emails[0].value
        }

        try {
          //find the user in our database 
          let user = await User.findOne({ googleId: profile.id })

          if (user) {
            //If user present in our database.
            done(null, user)
          } else {
            // if user is not preset in our database save user data to database.
            user = await User.create(newUser)
            done(null, user)
          }
        } catch (err) {
          console.error(err)
        }
      }
    )
  )

  // used to serialize the user for the session
  passport.serializeUser((user, done) => {
    done(null, user.id)
  })

  // used to deserialize the user
  passport.deserializeUser((id, done) => {
    User.findById(id, (err, user) => done(err, user))
  })
} 

사용자 모델

이제 데이터베이스의 사용자 데이터에 대한 데이터베이스 모델을 만들 차례입니다.
파일: models/User.js

const mongoose = require('mongoose')

const UserSchema = new mongoose.Schema({
  googleId: {
    type: String,
    required: true,
  },
  displayName: {
    type: String,
    required: true,
  },
  firstName: {
    type: String,
    required: true,
  },
  lastName: {
    type: String,
    required: true,
  },
  image: {
    type: String,
  },
  email:{
type:String,
required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
})

module.exports = mongoose.model('User', UserSchema)

그 당시 좋은 소식은 모든 경로, 모델 및 미들웨어가 준비되었으며 HTML(EJS) 페이지만 준비되었다는 것입니다.

로그인 및 메인 페이지

이제 부트스트랩을 사용하여 로그인 페이지를 만들 차례입니다.
파일: views/login.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
        integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
    <link rel="stylesheet" href="/css/style.css">
    <title>Login</title>
</head>

<body>
    <div class="container login-container">
        <div class="card" style="margin-top:100px;">
            <div class="card-content">
                <div class="section" style="text-align: center;">
                    <a href="/auth/google" class="btn red darken-1">
                        <i class="fab fa-google left"></i> Log In With Google
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>

</html>

사용자 로그인 후 나타나는 메인 페이지를 생성합니다.
파일: views/index.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Done</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body>

    <!-- As a link -->
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="/"><img class="logo" src=<%=userinfo.image %> alt=""> &nbsp; <%=
                    userinfo.firstName %></a>
            <a class="navbar-brand btn btn-danger btn-small" style="color: white;" href="/auth/logout">Logout</a>
        </div>
    </nav>




    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
    <script src="ejs.min.js"></script>
</body>

</html>

시사

🎉🎉

Google 인증 앱이 준비되었습니다.

이제 놀라운 미들웨어passport.js를 사용할 시간입니다. 행운을 빕니다 😎🎶

실시간 미리보기

여기 데모가 있습니다. 내 프로젝트 Todo 앱에서 위의 코드를 사용합니다.
Live Preview .
할 일 앱을 만들고 싶으신가요? 내 기사를 참조하십시오.

GitHub 저장소.

atultyagi612 / Google-인증-nodejs