[Node.js / MongoDB] 회원인증기능 만들기

💡 실습 포인트!

💜 로그인 성공

💜 로그인 실패

• 누군가가 로그인을 하면 그 사람의 아이디와 비밀번호가 DB 에 있는 아이디와 비밀번호가 맞는지 검사하는 과정을 거친다.
• 검사 결과 일치한다면, 세션을 하나 생성하고 성공페이지로 이동한다.
• 검사 결과 해당하는 아이디가 존재하지 않거나, 비밀번호가 틀렸다면 실패페이지로 이동한다.
  (/fail 경로에 별도의 EJS 파일이나 HTML 파일을 만들어두지는 않았다.)

---

💜 로그인 페이지 만들기 & 아이디 비번 검사하기

🤍 준비하기

• 터미널에 npm install passport passport-local express-session 을 입력하여 로그인 및 세션 생성을 도와줄 라이브러리 3개(로그인, 로그인 검증, 세션 생성)를 설치한다.
• 설치가 완료되면 라이브러리 사용법에 따라 JavaScript 파일 상단에 아래와 같이 코드를 작성한다.

const passport = require('passport');
const localStrategy = require('passport-local').Strategy; // 인증하는 방법을 Strategy 라고 지칭한다.
const session = require('express-session');

app.use(session({secret : '비밀코드', resave : true, saveUninitialized : false}));
app.use(passport.initialize());
app.use(passport.session());

• app.use() 함수는 미들웨어(요청과 응답사이에 특정한 것을 실행시키는 코드)를 사용하겠다는 의미로 위의 코드 내용 중 passport.initialize() 나 passport.session() 과 같은 코드가 모든 요청과 응답 중간에 실행될 예정인 미들웨어에 해당한다.

---

🤍 로그인 페이지 만들고 라우팅하기

• 글쓰기 페이지와 유사한 레이아웃으로 로그인 페이지용 EJS 파일을 만들고, /login 경로로 들어왔을 때 로그인 페이지가 브라우저에 보일 수 있게 해주었다.
• 그 외 input 의 속성인 name 과 action 의 경로 등을 조금 수정하였다.

<h4 class="container mt-5"><strong>로그인</strong></h4>
<div class="container mt-4">
  <form action="/login" method="POST">
    <div class="form-group my-4">
      <label class="mb-2">아이디</label>
      <input type="text" class="form-control" name="id">
    </div>
    <div class="form-group my-4">
      <label class="mb-2">비밀번호</label>
      <input type="password" class="form-control" name="pw">
    </div>
    <button type="submit" class="btn btn-danger fw-bold">Submit</button>
  </form>
</div>

• 로그인 페이지를 만들었으니 이제 /login 경로로 접속했을 때 이 로그인 페이지가 보이도록 JavaScript 코드를 작성했다.

app.get('/login', function(req, res){
    res.render('login.ejs');
})

 

📌 테스트용 아이디와 비밀번호 생성하기

• 이제 로그인할 아이디와 비밀번호가 필요한데, 회원가입 페이지 및 기능 구현은 진행하지 않는다고 해서 아래와 같이 DB 에 login collection 을 생성해서 아이디와 비밀번호를 직접 만들어주었다.

---

🤍 로그인 페이지에서 로그인 시 아이디, 비밀번호 검사하기

• 누군가가 로그인 페이지에서 아이디와 비밀번호를 입력한 후 Submit 버튼을 눌러 POST 요청을 하면, 아이디와 비밀번호가 DB 의 데이터와 일치하는지 검사하는 코드를 JavaScript 파일에 작성해주었다.

app.post('/login', passport.authenticate('local', {
    failureRedirect : '/fail' // login 을 실패하면 /fail 경로로 이동한다.
}), function(req, res){
    res.redirect('/'); // login 을 성공하면 / 경로로 이동한다.
})

• 누군가가 /login 경로로 POST 요청을 하면, 중간에 아이디와 비밀번호가 DB 에 있는 데이터와 일치하는지 검사하고 이 과정에서 실패하면 /fail 경로로 이동하고 성공하면 / 경로(홈)으로 이동하도록 해주었다.
  • post() 함수의 두번째 파라미터로 passport 라이브러리가 제공하는 코드(아이디와 비밀번호가 DB 에 있는 데이터와 일치하는지 검사)를 넣어주어, 응답하기 전에 local 방식으로 인증하도록 했다.
  • failuerRedirect : '/fail' 부분은 로그인 인증 실패하는 경우 /fail 경로로 이동하도록 해주는 코드이다.

---

💜 아이디와 비밀번호 DB 의 데이터와 비교하고 세션 만들어주기

🤍 아이디 및 비밀번호가 DB 의 데이터와 일치하는지 비교하기

• 대략 수도코드를 구성하자면 다음과 같다.
  • 사용자가 입력한 아이디와 비밀번호를 inputId, inputPw 라는 파라미터로 받는다.
  • DB 에서 { id : inputId } 인 데이터를 찾는다.
  • 만약 해당하는 데이터가 있다면 inputPw 와 데이터의 pw 가 일치하는지 확인한다.
  • 일련의 과정이 성공한다면 return done(null, result) 를 실행한다.
• 수도코드를 JavaScript 파일에 코드로 담아내자면 아래와 같다.

passport.use(new localStrategy({
    usernameField : 'id', // name 이 id 인 input 이 usernameField 이다.
    passwordField : 'pw', // name 이 pw 인 input 이 passwordField 이다.
    session : true, // session 정보를 저장한다.
    passReqToCallback : false, // 아이디,비밀번호 외 다른 정보를 검증할 경우 true 로 작성, 콜백함수에 req 파라미터를 넣어준다.
}, function(inputId, inputPw, done){

    //console.log(inputId, inputPw); // 사용자가 입력한 아이디, 비밀번호 확인

    // db.collection 중 login 에서 id 가 inputId 와 일치하는 데이터를 찾으면
    db.collection('login').findOne({id : inputId}, function(err, result){
        if (err) return done(err);

        // result 에 아무런 값이 담겨있지 않다면(DB 에 아이디가 없으면)
        if (!result) return done(null, false, {message : '존재하지 않는 아이디입니다.'});

        // result 에 값이 담겨 있다면(DB 에 아이디가 있다면)
        // inputPw 와 result 에 담겨있는 pw 가 일치하는지 확인하기
        if (inputPw == result.pw) {
            return done(null, result);
        } else {
            return done(null, false, {message : '비밀번호가 다릅니다.'})
        }
    })
}));

• 다만, 위의 코드는 전반적인 이해를 위해 DB 에 저장한 비밀번호든 입력한 비밀번호든 암호화를 진행하지 않고 비교한 것이므로 보안부분을 조금 더 공부한 다음 보완이 필요하다.

---

🤍 세션을 만든 후, 세션 아이디를 발급하여 쿠키로 보내주기

• 아이디와 비밀번호가 DB 의 데이터와 일치한다면 세션 데이터를 발급한 후 쿠키로 만들어 사용자에게 보내주어야 한다.

// id 를 이용하여 세션 저장 및 쿠키 발행 (로그인 성공 시)
passport.serializeUser(function(user, done){
    done(null, user.id);
});

• serializeUser() 함수는 사용자의 id 데이터를 바탕으로 세션 데이터를 생성하고, 그 세션 데이터의 아이디를 쿠키로 만들어서 사용자의 브라우저로 보낸다.

 

📌 생성된 쿠키 확인하기

• 정상적인 아이디와 비밀번호로 로그인했을 때, 쿠키가 생성되는 과정을 GIF 로 만들어보았다.

 

• localhost:8080 으로 접속 후 개발자도구(F12 혹은 마우스우클릭-검사)로 들어가서 Application 탭을 클릭하면 아래와 같은 화면이 나온다.
• 여기서 좌측 Cookies 부분의 http://localhost:8080 을 클릭하면 저장된 쿠키를 확인할 수 있는데, 위와 같이 로그인 성공시 session 이라고 적힌 쿠키가 생성된다.

---

💜 로그인한 사용자만 접속 가능한 페이지 만들기

🤍 마이페이지 만들고 라우팅하기

  <h4 class="container mt-5"><strong>마이페이지</strong></h4>
  <div class="container mt-4">
  </div>

• 로그인한 사용자만 접속 가능한 마이페이지를 EJS 파일로 만들어주었다.

app.get('/mypage', function(req, res){
    res.render('mypage.ejs');
})

• 이제 JavaScript 파일에서 /mypage 경로에 접속하는 경우 마이페이지가 브라우저에 보이도록 설정해주었다.

---

🤍 로그인한 사람만 마이페이지 보여주기

• 위의 과정까지만 진행하면 누구든지 마이페이지에 접속이 가능하므로, 로그인한 사용자만 이 페이지를 볼 수 있도록 미들웨어를 하나 추가한다.
• 미들웨어는 누군가가 /mypage 에 접속을 시도하는 경우 응답하기 전에 로그인을 했는지 확인하는 역할을 수행해야 한다.

app.get('/mypage', doLogin, function(req, res){
    // console.log(req.user)
    res.render('mypage.ejs', {user : req.user});
})

function doLogin(req, res, next){
    // 로그인을 한 상태라면
    if (req.user){
        next(); // 통과한다.
    } else {
        res.send("로그인이 필요합니다.");
    }
}

• 그래서 이전에 작성했던 코드를 미들웨어를 추가하여 조금 수정해주었다.
• doLogin 이라는 미들웨어를 만들어서, 로그인을 한 상태라면 통과하여 콜백함수를 실행하도록 하고 로그인을 하지 않은 상태라면 '로그인이 필요합니다.' 라는 문구가 뜨도록 해주었다.

---

🤍 req.user 분석하기

• req.user 는 로그인한 사용자의 DB 상 정보(아이디, 비밀번호, 사용자명 등)를 의미하는데 그냥은 출력이 되지 않는다.
• 이러한 정보를 사용하기 위해서는 세션 아이디를 바탕으로 사용자의 정보를 찾는 deserializeUser() 함수의 부분 기능 개발이 필요하다. 

// 특정 세션 데이터를 가진 사람을 DB 에서 검색 (마이페이지 접속 시)
passport.deserializeUser(function(userId, done){
    // DB 에서 user.id 로 사용자를 검색한 후 사용자 정보를 찾아서 전송한다.
    db.collection('login').findOne({id : userId}, function(err, result){
        done(null, result);
    })
});

• deserializeUser() 함수를 위와 같이 작성하게 되면 DB 에서 { id : userId } 인 게시물을 찾아서 결과를 result 로 받게 된다.
• 그러면 이 result 에 담긴 데이터들은 req.user 로 전달이 되므로 로그인한 사용자의 DB 상 정보를 사용할 수 있게 된다.

---

🤍 마이 페이지에 접속한 사용자의 이름을 브라우저에 보여주기

app.get('/mypage', doLogin, function(req, res){
    // console.log(req.user)
    res.render('mypage.ejs', {user : req.user});
})

• 이전에 로그인한 사용자의 DB 상의 정보를 req.user 에 담아두었으니, /mypage  경로로 접속하여 페이지가 렌더링될 때 해당 데이터를 user 라는 변수에 담아 전송해준다.

  <h4 class="container mt-5"><strong><%= user.id %> 님의 페이지</strong></h4>
  <div class="container mt-4">
  </div>

• 이제는 해당하는 EJS 파일에서 user 라는 변수를 EJS 문법으로 사용할 수 있게 된다.