#25 회원인증기능 1 - 로그인 페이지 만들기 & ID, PW 검사

● 개발 방향

1. 사용자가 로그인을 하면 해당 사용자가 입력한 ID와 PW가 DB에 있는 ID, PW와 일치하는지 검사
2. 일치하면 session을 하나 생성해주고 로그인 성공 페이지로 이동
3. 일치하지 않으면 실패 페이지로 이동

---

● 라이브러리 설치

1. 아래 명령어를 터미널에 입력해 로그인 & session 생성을 도와줄 라이브러리 설치

npm install passport passport-local express-session

--> 띄어쓰기로 동시에 3개 라이브러리 설치 : passport, passport-local, express-session
--> 로그인, 로그인 검증, 세션 생성을 도와주는 라이브러리들이다.
cf) 실제 서비스를 한다면 express-session 말고 MongoDB에 session data를 저장해주는 라이브러리를 이용하면 좋다.

package.json

 

2. server.js 상단에 설치한 라이브러리를 require

- require 코드를 추가해야 설치한 라이브러리들을 사용할 수 있다.

[server.js 상단]
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const session = require('express-session');

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

--> 라이브러리 사용법에 있는 코드를 그대로 가져온것이다.

- app.use() 부분은 '미들웨어'를 사용하겠다는 의미이다.
- 미들웨어는 쉽게 말해 (사용자의 요청과 서버의 응답 사이)에서 무엇인가를 실행시키는 코드들이라고 생각하면 된다.

- app.use 안에 있는 passport.initialize(), passport.session() 같은 코드들이 모든 요청과 응답 중간에 실행된다는 뜻이다.
ex) 요청이 적합한지 검사하는 기능

- app.use 안에 담는 코드들은 전부 미들웨어 역할을 할 수 있다.
- 미들웨어를 직접 만들어 app.use() 안에 집어넣어도 된다.

https://aws.amazon.com/ko/what-is/middleware/

---

● 로그인 페이지 제작 & 라우팅

- 로그인 페이지(login.ejs)를 만들고 /login 경로로 방문시 보여주도록 해보자

(views/login.ejs)
- write.ejs 내용 복붙 후 <input>의 name과 <form>의 action 속성값만 수정했다.

<div class="container mt-4"> 
    <form action="/login" method="POST"> 
        <div class="form-group"> 
            <label>아이디</label> 
            <input type="text" class="form-control" name="id"> 
        </div> 
        <div class="form-group"> 
            <label>비번</label> 
            <input type="text" class="form-control" name="pw"> 
        </div> 
        <button type="submit" class="btn btn-danger">로그인</button> 
    </form> 
</div>

- 라우팅은 어려운게 아니라 사용자가 /login 경로로 접속시 login.ejs 페이지를 보여주도록 server.js에 아래의 코드를 추가하는 것이다.

(server.js)
app.get('/login', (req, res) => {
    res.render('login.ejs');
});

- 지금 당장은 로그인에 사용할 ID와 PW가 없으니 DB에 테스트용 ID와 PW를 하나 만들자
- 아래 사진처럼 login collection을 하나 새로 만든 후 (ID = test, PW = test) 데이터를 하나 집어넣자

---

● 로그인 페이지에서 로그인 요청시 ID, PW 검사(ID, PW 검증 미들웨어 실행시키기)

- 사용자가 login.ejs의 로그인 <form>에서 POST 요청을 하면 서버에서 이를 받아 처리하는 코드를 작성해보자

app
.get('/login', (req, res) => {  // 로그인 화면을 보여주는 코드
    res.render('login.ejs');
})
.post('/login', (req, res) => { // 로그인 POST 요청을 처리하는 코드
    res.redirect('/');
});

- app.post 부분이 사용자가 /login 경로로 POST 요청을 하면(= <form> 전송을 하면) 특정 코드를 실행시켜주는 코드이다.
- res.redirect('/')를 이용해 로그인 요청 처리 후 홈 페이지로 이동시켜준다.
- 단, 로그인 요청 시 아무 과정없이 바로 홈으로 이동시키는게 아니라 중간에 검사를 해야한다. by 미들웨어
- 검사 : 사용자가 입력한 ID, PW가 DB에 저장된 값과 일치하는지 여부

app.post('/login', passport.authenticate('local', {failureRedirect : '/fail'}), (req, res) => {
  res.redirect('/');
});

- post function 두 번째 parameter에 위처럼 추가해주면 요청과 응답 사이에 특정 기능을 수행할 수 있다.
- passport.authenticate는 passport 라이브러리가 제공하는 'ID와 PW 인증을 도와주는 코드'이다.
- 해석 : response(응답)하기 전에 local 방식으로 ID와 PW을 인증해라
- {failureRedirect : '/fail'} 부분은 로그인 인증 실패 시 이동 시켜줄 경로를 적으면 된다.
- 위의 코드는 실패 시 /fail 경로로 사용자를 이동시켜준다.

---

● ID, PW 검증 세부 코드

- 그러면 ID, PW를 어떻게 인증할 것인지에 대한 세부 코드를 작성해보자

- 참고로 바로 위의 코드만 있다고 해서 자동으로 인증해주지는 않는다.

오히려 error가 발생한다.

- 어떻게 인증할 것인지에 대한 세부 사항을 정의해주어야한다.
- passport 라이브러리의 예제 코드를 복붙했다.

(server.js 하단에 복붙)

passport.use(new LocalStrategy({
    usernameField: 'id',
    passwordField: 'pw',
    session: true,
    passReqToCallback: false,
}, function (inputId, inputPw, done) {
    console.log(`inputId ; ${inputId}`);
    console.log(`inputPw ; ${inputPw}`);
    
    db.collection('login').findOne({ id: inputId }, function (error, result) {
    
    if (error) return done(error);

    if (!result) return done(null, false, { message: '아이디가 존재하지 않습니다.' });

    if (inputPw == result.pw) {
        return done(null, result);
    } else {
        return done(null, false, { message: '비밀번호가 틀렸습니다.' });
    }
    })
}));

- 이것이 사용자가 입력한 ID와 PW를 검사해주는 코드이다.
- LocalStrategy() 부분이 local 방식으로 ID와 PW 검사를 어떻게 할지 도와주는 부분이다.
- LocalStrategy() 안에 세부설정을 해주면 된다.

LocalStrategy({설정}, function() {ID와 PW 검사하는 코드});

- 이번 글에서는 {설정} 부분을 자세히 알아보자
- {설정}은 여러가지가 가능한데 그중 필수로 해야하는 것들은 아래와 같다.

passport.use(new LocalStrategy({ 
    usernameField: 'id', (사용자가 제출한 ID가 어디 적혔는지 설정)
    passwordField: 'pw', (사용자가 제출한 PW가 어디 적혔는지 설정) 
    session: true, (session 생성 여부) 
    passReqToCallback: false, (ID/PW 외 다른 정보 검사가 필요한지 설정) 
});

- usernameField, passwordField : 사용자가 제출한 ID와 PW가 어떤 <input>인지 <input>의 name 속성값을 적어주면 된다.
- (session : true) : session을 하나 만들지 여부, 만들어줘야 나중에 다시 로그인 안해도 된다.
- passReqToCallback : ID와 PW 외에 다른 정보를 검사해야할 경우 true 설정
ㄴtrue 설정 시 passport.use의 두 번째 parameter 자리에 있는 callback function의 첫 번째 parameter로 기타 정보들이 들어간다.
ㄴparameter.body로 출력해보면 어떤 정보들이 들어오는지 알 수 있다.

 

cf)

https://aws.amazon.com/ko/what-is/middleware/

미들웨어란 무엇인가요? - 미들웨어 소프트웨어 설명 - AWS