Node.js 랜덤채팅 프로젝트(3) - 로그인 구현

2un_seong·2021년 10월 15일
4
post-thumbnail

Step0

지난 포스팅에선 회원가입을 구현해 보았다.
이번 포스팅에선 JWT를 이용해 로그인을 구현해 보자.

로그인에 필요한 데이터를 받으면 email과 password를 확인하고 필요한 정보를 토큰에 담아 발행한 뒤 쿠키에 넣어 넘겨주겠다.



Step1 - 모듈 다운로드

우선 로그인에 필요한 모듈을 다운로드 하자.

npm i jsonwebtoken cookie-parser --save
  • jsonwebtoken : JWT
  • cookie-parser : JWT 발급 후 쿠키로 보내주기 위해



Step2 - 라우터 설정

app.js 수정

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

// Middlewares
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cookieParser());

∙∙∙

routes/auth.js 수정

const jwt = require("jsonwebtoken");

∙∙∙

router.post("/login", async (req, res) => {
    try {
        // email로 유저 검색
        const User = await pool.query("SELECT * FROM Users WHERE email = ?", [ req.body.email ]);
        if (!User[0][0]) { // 유저가 존재하지 않을 경우
            res.status(400).json({result: false, msg: "User does not exist!" })
        } else {
            // hash로 암호화된 password를 req로 들어온 password와 비교
            bcrypt.compare(req.body.password, User[0][0].password, (err, result) => {
                if (!result){
                    res.status(400).json({result: false, msg: "Password is incorrect!"});
                } else {
                    jwt.sign({ // 토큰에 담는 정보
                    	email: User[0][0].email,
                        nick: User[0][0].nickname,
                    },
                        process.env.JWT_SECRET,
                        { expiresIn: 60 * 60 * 24 * 15 }, // 토큰 만료 기간 15일
                        (err, token) => {
                            if (err) {throw err;}
                            res.status(200)
			    .cookie('user', token, { maxAge: 24 * 60 * 60 * 15}) // 'user' 명을 가진 쿠키
			    .json({result: true, msg: 'Login Successful!'});
                        }
		    );
                }
            });
        }
    } catch (e) {
        throw e;
    }
});

코드를 설명하자면

  1. /api/auth/login [post]로 request가 들어오면 Users 테이블에 req로 들어온 email과 동일 email이 있는지 확인 ( 존재하지 않을경우 실패 메세지 리턴)
  2. bcrypt.compare 함수를 통해 req로 들어온 password와 찾아낸 Uses의 password를 비교 (비밀번호가 다른 경우 실패 메세지 리턴)
  3. jwt의 sign함수를 통해 user의 email,nickname을 담고 만료기간이 15일인 토큰 발행
  4. res.cookie로 이름이 'user'인 쿠키에 token을 담고 만료기간이 15일인 쿠키를 리턴


테스트

node app.js

서버를 실행시키고 postman으로 테스트를 해보자.

로그인에 성공한 것을 볼 수 있다.
오른쪽에 화살표가 가리키는 Cookie를 클릭해보면

이렇게 localhost에서 'user'라는 cookie가 발급된 것을 확인할 수 있다.
이렇게 발급된 쿠키는 'req.cookies.user(쿠키명)'을 통해 사용할 수 있다.

예외처리도 잘되었는지 확인해보자.

  • signup 하지 않은 email을 보낸 경우
  • 틀린 password를 보낸 경우

예외처리도 잘 된것을 볼 수 있다.

이로써 랜덤채팅 프로젝트의 로그인 기능을 구현하였다.
다음에는 User 정보를 수정할 수 있는 mypage를 만들어보겠다.

본 포스팅에서 잘못된 정보가 있을 경우 댓글로 알려주시면 감사하겠습니다.

profile
목적을 위해 세운 목표를 향해

1개의 댓글

comment-user-thumbnail
2021년 10월 15일

멋있어요!!!!!!

답글 달기