해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다.
이전 글에서 Session으로 로그인하는 방식을 보면 아래와 같다.
1. 유저가 아이디를 로그인하면 서버에서 DB에 해당 id, pw가 있는지 확인한다.
2. 해당 id, pw가 있으면 DB에 세션데이터를 저장한다.
3. 유저 브라우저로 쿠키에 세션 아이디를 담아서 전달한다.
4. 마이페이지 같은 페이지로 이동 요청을 하면 쿠키로 세션 아이디를 DB로 담아서 보낸다.
5. DB에서는 해당 세션 아이디가 세션 데이터에 있는지 확인 후 마이페이지를 띄울지 말지를 응답한다.
이번에는 1번 기능과 로그인 페이지를 만들어보려고 한다.
우선 진행하기 전에 로그인 & 세션 생성을 서포트해줄 라이브러리를 설치해야한다.
0. passport 설치하기
- npm install passport passport-local express-session 터미널에 입력
- server.js에 설치한 라이브러리 require 하기
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());
1. 로그인 페이지 만들기
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="main.css"> -->
<script src="https://kit.fontawesome.com/f8ad50bee4.js" crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<!--nav 부분 조립식으로 include하기 -->
<%- include('nav.html') %>
<h4 class="container mt-4"><strong>로그인 페이지</strong></h4>
<div class="container mt-2">
<form action="/login" method="POST">
<!-- method : 전송 버튼을 누르면 어떻게(post/get) 할건지 / action : 어떤 경로로 post/get할 건지 -->
<div class="form-group mt-2">
<label>아이디</label>
<input type="text" class="form-control" name="id">
</div>
<div class="form-group mt-2">
<label>비밀번호</label>
<input type="text" class="form-control" name="pw">
</div>
<button type="submit" class="btn btn-outline-secondary mt-2">Login</button>
</form>
</div>
<!-- jQeury install -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- JavaScript -->
<!-- <script src="main.js"></script> -->
<!-- <!— bootstrap install —> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
2. /login으로 들어가면 로그인 페이지로 들어가도록 서버에 입력하기
app.get('/login', function(request, response) {
response.render('login.ejs');
})
3. DB에 로그인 관련 새로운 콜렉션 생성하고 데이터 미리 넣어놓기
4. 로그인 페이지에서 form을 통해서 로그인을 하면 아이디, 비번 검사하기 (기초)
app.post('/login', passport.authenticate('local', {failureRedirect : '/fail'}), function(request, response){
response.redirect('/'); // home으로 이동
});
//로그인 실패
app.get('/fail', function(request, response) {
response.send('로그인에 실패하였습니다.');
})
기존의 코드대로면 passport.authenticate('local', {failureRedirect : '/fail'}) 해당 코드는 없었다.
해당 코드가 생긴 이유는 기존의 방식대로 post를 하면 아무런 검증없이 로그인 버튼만 누르면 자동으로 홈 화면으로 가기 때문이다. 즉 post 요청을 하면 바로 응답을 한다.
따라서 해당 코드는 passport라는 라이브러리가 제공하는 코드이다. post 요청 후 아이디와 비밀번호 인증을 하고 응답을 하도록 만들어주는 기능을 한다. 즉, 응답해주기 전에 Local 방식으로 아이디, 비밀번호를 인증 후 인증 결과에 따라 이동 시켜줄 페이지를 응답해주도록 만드는 것이다.
참고로 failureRedirect : '/fail' 해당 코드는 로그인 인증에 실패하면 /fail이라는 경로로 보내라는 의미이다.
그렇다면 어떻게 인증할건지는 어떻게 작성해야하나?
아래와 같이 작성하면 된다.
passport.use(new LocalStrategy({
usernameField: 'id',
passwordField: 'pw',
session: true,
passReqToCallback: false,
}, function() {
}));
나머지 부분은 읽으면 대충 이해가 되는데 첫줄에 LocalStrategy({...}) 부분은 뭘까?
해당 부분은 우리가 Local 방식으로 아이디 비밀번호를 검사하는데 어떻게 검사를 할지 설정하는 부분이다.
usernameField
- 유저가 제출한 아이디가 어디에 적혀있는지 작성하는 부분 (form의 name 부분)
passwordField
- 유저가 제출한 비밀번호가 어디에 적혀있는지 작성하는 부분 (form의 name 부분)
session
- 세션 생성여부
passReqToCallback
- 아아디, 비밀번호 외의 다른 정보검사 필요여부
'Server > Node.js' 카테고리의 다른 글
| 로그인 기능 만들기 Session (3) - 마이페이지 기능 만들어보기 (0) | 2023.09.06 |
|---|---|
| 로그인 기능 만들기 Session (2) - 아이디 비밀번호 DB와 비교하고 세션 만들어주기 (0) | 2023.09.06 |
| Open Authentication(OAuth) (0) | 2023.09.05 |
| JSON Web Token(JWT) (0) | 2023.09.05 |
| Session-based Authentication (0) | 2023.09.05 |
