[NodeJS] 노드 리액트 기초 - bcrypt를 이용한 로그인 기능 만들기

// index.js

app.post('/login', (req, res) => {
  // 요청된 이메일을 데이터베이스에서 있는지 찾는다.
  User.findOne({ email: req.body.email }, (err, userInfo) => {
    if (!userInfo) {
      return res.json({
        loginSuccess: false,
        message: "해당하는 유저가 존재하지 않습니다.",
      })
    }

    // 요청된 이메일이 데이터베이스에 있다면 비밀번호가 일치하는지 확인.
    user.comparePassowrd(req.body.password, (err, isMatch) => {
      if (!isMatch) return res.json({ loginSuccess: false, message: "비밀번호가 일치하지 않습니다." });
      // 비밀번호까지 일치하다면 해당 유저 Token 생성.
      user.generateToken((err, user) => {

      })
    })
  })
})

 

우선은 index.js에서 post방식으로 엔드포인트는 login인 메서드를 만들어보겠습니다.

로그인을 하는 방식은 우선 /login으로 요청이 왔을때 이메일이 데이터베이스에 있는지 확인하고 데이터베이스에 있다면 비밀번호까지 확인하는 과정을 거칩니다.

비밀번호또한 일치하다면 해당 유저에 대한 토큰을 생성해주어야합니다.

 

// index.js

app.post('/login', (req, res) => {
  // 요청된 이메일을 데이터베이스에서 있는지 찾는다.
  User.findOne({ email: req.body.email }, (err, userInfo) => {
    if (!userInfo) {
      return res.json({
        loginSuccess: false,
        message: "해당하는 유저가 존재하지 않습니다.",
      })
    }
  })
})

post방식으로 api를 만들었고 User에서 findOne으로 데이터베이스에 이메일이 있는지 찾습니다.

이메일이 있다면 콜백함수를 통해 userInfo가 있을 것이고 만약 없다면 에러를 발생시켜야합니다.

 

// index.js

// 요청된 이메일이 데이터베이스에 있다면 비밀번호가 일치하는지 확인.
user.comparePassowrd(req.body.password, (err, isMatch) => {
  if (!isMatch) return res.json({ loginSuccess: false, message: "비밀번호가 일치하지 않습니다." });
  // 비밀번호까지 일치하다면 해당 유저 Token 생성.
  user.generateToken((err, user) => {

  })
})

비밀번호를 확인하기 위해 comparePassword를 통해 일치하는지 확인을 해야하는데 comparePassword는 모델에서 만들어줍니다.

 

// User.js

userSchema.methods.comparePassowrd = function(plainPassword, callbackfn) {
    // 입력한 비밀번호와 암호화된 비밀번호를 비교하기위해 입력된 비밀번호도 암호화하여 비교
    bcrypt.compare(plainPassword, this.password, function(err, isMatch) {
        if(err) return callbackfn(err),
        callbackfn(null, isMatch)
    })
}

comparePassword라는 이름은 제가 임의로 정해준 것이라 다른 이름을 짓고싶으시다면 다른이름으로 이름을 설정하셔도 됩니다.

위의 코드의 역할은 순수 비밀번호와 암호화된 빌밀번호를 비교해주어야 하는데요.

비교할수있는 방법은 순수 비밀번호를 암호화하여 암호화된 비밀번호와 일치하는지 확인하는 방법이 있습니다.

암호화 된것은 복호화를 할수 없기 때문에 이처럼 비교를 해주어야 합니다.

만약 같지 않다면 err를 발생시키고 일치하면다면 isMatch를 콜백함수를 통해 리턴을 합니다.

 

 

다시 앞의 코드로 돌아와서 isMatch가 존재하지 않는다면 false라면 에러를 발생을 시키고 존재한다면 토큰을 생성해야합니다.

토큰을 생성하기 위해서는 JSONWEBTOKEN이라는 라이브러리를 이용해야하기 때문에 마찬가지로 npm을 통해서 설치를 합니다.

npm install jsonwebtoken --save

https://www.npmjs.com/package/jsonwebtoken

jsonwebtoken

jsonwebtoken의 사이트입니다.

사이트에 보면 사용법이 나오는데요.

설치한 라이브러리를 가져와서 sign이라는 메서드를 이용해서 {foo: 'bar'}, privateKey, {alforith: 'RS256'} 이런식으로 합쳐주면 토큰이 생성이 되는 간단한 방법입니다.

 

// User.js

userSchema.methods.generateToken = function(callback) {
    var user = this;
    // jsonwebtoken을 이용해서 토큰을 생성
    var token = jwt.sign(user._id.toHexString(), 'secretToken')

    // user._id + 'secretToken' = token
    // ->
    // 'secretToken' -> user._id

    user.token = token;
    user.save(function(err, user) {
        if(err) return callback(err);
        callback(null, user);
    })
}

jsonwebtoken을 통해 token을 생성하였습니다.

user._id는 몽고디비로 데이터를 삽입하면 _id라는 고유값이 생겨나는데 그 고유값을 이용하여 토큰을 만들어 준것입니다.

토큰을 생성한뒤 몽구스의 save를 이용하여 user데이터를 다시 저장합니다.

 

// index.js

토큰을 저장하는 방법은 여러가지가 있을수 있는데 저는 이번에는 쿠키에 저장을 해보겠습니다.

우선 쿠키에 저장을 하려면 cookie-parser라는 라이브러리가 필요합니다.

 

npm install cookie-parser --save

쿠키 파서를 다운로드 받습니다.

 

const cookieParser = require('cookie-parser');

app.use(cookieParser());

다운받은 쿠키파서를 가지고옵니다.

 

 

// index.js

        // 토큰을 저장한다. ( 쿠키, 로컬스토리지 등에 저장할수 있는데 일단 쿠키에함..)
        res.cookie('x_auth', user.token)
        .status(200)
        .json({ loginSuccess: true, userId: user._id })

 

 

정보가 일치하지 않을때는 우리가 유도한 에러가 잘 나옵니다.

 

 

반면 로그인에 성공했을때도 에러가 잘 나오네요!