유튜브 클로닝 #7-4 로그인 기능(1)

이현정·2022년 4월 22일

🔖 강의 범위: #7.5~7.6

Preview

저번 시간에는 회원가입 기능에 대해서 알아보았다.
회원가입 페이지와 주소를 만들고, 클라측에서 온 정보를 바탕으로 새로운 데이터를 만들고 데이터베이스에 저장하는 기능을 만들어주었다. 에러가 날 때를 대비해서 에러메세지와 status code 를 브라우저에게 알려주는 것도 했다.

이번 시간에는 그렇게 만들어진 계정으로 로그인을 하는 방법에 대해 배울 것이다.
기본적으로 클라측의 정보와 데베측의 정보가 일치하는지 확인하는 작업이 될 것이다.
확인할 사항은 크게 2가지이다:
1. 입력한 아이디의 계정이 데베에 존재하는지
2. 입력한 비번이 데베의 비번이 일치하는지

❗️복습: 패스워드 해쉬(Password Hash)
클라측에서 정보를 받아올 때 데베에 저장 전 비밀번호는 bcrypt.hash() 를 이용해여 해쉬 작업을 거친다고 했다. 해쉬는 같은 입력값이라면 언제나 같은 값을 내뱉는 함수라고 했다. 따라서 두 비밀번호(클라측과 데베측)을 비교할 때도 해쉬된 상태로 비교하기 때문에 bcrypt 를 이용하게 될 것이다: bcrypt.compare(기존 비번, 데베의 비번)

핵심 개념

bcrypt를 이용해서 비밀번호 비교

password: 유저가 입력한 비밀번호
user.passwordHash: DB에 해시화되서 저장된 비밀번호

const match = await bcrypt.compare(password, user.passwordHash);

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

강의 내용

step 0. 로그인 홈페이지와 주소를 만든다.

// views/login.pug 추가
// views/join.pug 에서 login.pug 로 이동 추가

// routers/RootRouter 
rootRouter.route("/login").get(getLogin).post(postLogin);

// controllers/userControllers 에서
export const getLogin = (req,res) => res.render("login", { pageTitle: "Login"});
export const postLogin = (req,res) => res.end(); // <- 일단은.

step 1. 로그인 기능을 추가한다.

확인할 사항은 언급한대로 크게 2가지이다:
1. 입력한 아이디의 계정이 데베에 존재하는지
2. 입력한 비번이 데베의 비번이 일치하는지

export const getLogin = (req,res) => res.render("login", { pageTitle: "Login"});
export const postLogin = async (req,res) => {
    const { username, password } = req.body;
    const user = await User.findOne({ username });
     
     // check if account exits
    if (!user) {
        return res.render("login", {
            pageTitle: "Log In",
            errorMessage: "An account with this username does not exist.",
        });
    }
    
    // check if the pw correct
    const correct = await bcrypt.compare(password, user.password);
    if (!correct) {
        return res.status(400).render("login", {
            pageTitle: "Log In",
            errorMessage: "Check Your Password",
        });
    };    
    console.log("LOG USER IN!")
    res.redirect("/");
};

끝.

다음 시간에는 로그인이 된 상태로 유지하기 위해 쿠키와 세션에 대한 개념을 배워볼 것이다.