우선 서버에 get요청 처리할 수 있는 코드 작성해주고
app.get("/register", (요청, 응답) => {
응답.render("register.ejs");
});
새로 register.ejs파일을 views폴더에 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입</title>
<link rel="stylesheet" href="/main.css" />
<link rel="stylesheet" href="/list.css" />
<link rel="stylesheet" href="/write.css" />
</head>
<body class="grey-bg">
<%- include('nav.ejs') %>
<form class="form-box" action="/register" method="POST">
<h4>회원가입</h4>
<input name="username" />
<input name="password" type="password" />
<button class="sub_btn" type="submit">전송</button>
</form>
</body>
</html>
이후 해야하는 일은 전송버튼 클릭시,
DB에 ID/PW 저장해주면 되니까 코드.. 잊지않게 정리해두자..
서버 파일에 post 요청을 받을 코드도 작성해주고
app.post("/register", async (요청, 응답) => {
await db
.collection("user")
.insertOne({ username: 요청.body.username, password: 요청.body.password });
응답.redirect("/");
});회원가입을 해보면
잘 들어간다.
다만 비번은 암호화(hashing)하여 저장하는 것이 좋기 때문에
bcrypt를 사용하여 해싱을 해주는 방법을 배워보자..
✨bcrypt 사용을 위한 라이브러리 설치 및 셋팅
-
터미널에
npm install bcrypt입력하여 설치
-
서버파일 상단에 라이브러리 셋팅을 위한 코드 작성
const bcrypt = require("bcrypt");
이제 설치와 셋팅을 해줬으면 아래에서 사용해주면 되는데,
사용이 필요한 부분에 await bcrypt.hash('암호화할데이터', 10)
이런 식으로 넣어주면 된다. 뒤에 10의 숫자는 얼만큼 꼬아서 만들것인지?를 정해줄 수 있는데,
평균적으로 10정도로 꼬아주는듯함.
let 해시 = await bcrypt.hash(요청.body.password, 10);해싱이 필요한 password부분을 넣어주고 해시라는 이름의 변수에 담아 콘솔창에 출력해보았다.
해싱이 잘 된 것 같으면 코드에 쳐뒀던 주석을 풀고 다시 회원가입을 시켜본다.
app.post("/register", async (요청, 응답) => {
let 해시 = await bcrypt.hash(요청.body.password, 10);
console.log(해시);
await db.collection("user").insertOne({
username: 요청.body.username,
password: 해시,
});
응답.redirect("/");
});회원가입 오네가이~~
password에 해싱 처리가 된 패스워드가 들어가있다!
해싱 처리가 잘 되는 걸 확인했으면,
로그인 부분에서도 로그인 요청시 제출한 id/pw를 DB와 비교해주던 코드를 수정해줄 필요가 있다.
이부분을 수정해주면 되겠다.
await bcrypt.compare(입력한비번, 해싱된비번);DB에 있던 비번은 해싱 처리가 된 비밀번호일테니 result.password를 해싱된비번이 들어가야하는 부분에 넣어주면 된다.
이후 새로 하나 가입 후 테스트!
우선 하나 가입은 시켰고, pw부분에 해싱처리도 잘 되어있다.
로그인 후 만들어둔 마이페이지에 이름이 잘 뜨면 되는 것!
잘 작동한다!
✨세션을 DB에 저장하는 방법!(connect-mongo 설치 및 셋팅)
-
터미널에
npm install connect-mongo입력하여 설치
-
서버파일 상단에 셋팅을 위한 코드 작성
const MongoStore = require('connect-mongo')
- 아래에서 store옵션을 설정해줌
store: MongoStore.create({
mongoUrl: 'DB접속용 URL~~',
dbName: '세션 저장할 DB이름'
})dbName에 쓰일 DB이름은 몽고DB에서 사용중이던 forum을 사용하고,
mongoUrl에 DB접속용 URL은 이전 포스팅에도 사용했던..
여기로 들어가서
이거 누르면 나오는
이부분! 이 url 가져오면 된다. 물론 db_password부분은 앞전 포스팅 참조하여 알리라 생각하고 마저 작성..!
잘 넣어주고 저장한 뒤 다시 서버를 열어준다.
이제 로그인시 DB에 세션 document를 발행해주는지 보면 된다.
회원가입 하고..
로그인도 하고..
DB를 확인해보면,
자동으로 sessions라는 콜렉션 하나가 생성되어있다.
세션id, 유효기간 등등 자동으로 만들어져있는 모습 확인!
세션 저장 방식이나 이런 부분은 connect-mongo 라이브러리 사용법 참고
이렇게하면 동작은 하나 비효율적인 부분이 존재한다.
deserialize는 세션 정보가 적힌 쿠키를 갖고있는 유저가 요청을 날릴 때마다 실행되기 때문에 쓸데없는 db조회가 일어남
-> deserialize를 특정 API에서만 실행하게 만들어주면 됨- 요청 처리가 너무 빈번하게 많이 일어나 DB에 부담을 주는 경우
-> redis 사용해주면 부담을 덜 수 있음(connect-redis 참고)
