728x90
오늘은 bcryptjs를 활용해 비밀번호 해시 처리가 된 간단한 회원가입 및 로그인 예시를 만들어보겠습니다.
1.프로젝트 생성 및 초기화
mkdir 생성할 폴더명
cd 방금 생성한 폴더명
npm init -y
=> 원하는 경로에 폴더를 생성하고 해당 폴더로 이동 후 프로젝트 생성 및 초기화 시켜줍니다.
2.express , bcryptjs 설치
npm install express bcryptjs
=> 해당 경로에서 express 와 bcryptjs를 설치합니다.
3.회원가입, 로그인 html 파일들이 위치할 폴더, 서버용 js 파일, 회원가입 로그인 파일 생성
mkdir 로그인, 회원가입 파일들을 모아둘 폴더명
touch express 서버용으로 쓸 js 파일명
touch 사용할 로그인 html 파일명
touch 사용할 회원가입 html 파일명
=> 프로젝트 내 로그인, 회원가입 파일들 및 해당 파일들을 모아둘 폴더, express 서버용 파일을 생성합니다.
저는 위 이미지와 같이 생성하였습니다.
4.로그인 html 파일 코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
</head>
<body>
<h2>로그인</h2>
<form action="/login" method="post">
<label for="id">아이디:</label>
<input type="text" id="id" name="id" required><br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required><br>
<button type="submit">Login</button>
</form>
<a href="/join.html">회원가입</a>
</body>
</html>5.회원가입 html 파일 코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
</head>
<body>
<h2>회원가입</h2>
<form action="/register" method="post">
<label for="id">아이디:</label>
<input type="text" id="id" name="id" required><br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required><br>
<button type="submit">가입하기</button>
</form>
</body>
</html>6.서버용 js 파일 코드 작성
//express, bcrypt, path import 및 객체 생성
const express = require('express');
const app = express();
const path = require('path');
const bcrypt = require('bcryptjs');
//회원들의 정보를 저장할 객체, 키값이 id이고 해시된 비밀번호를 값으로 저장
let users = {};
//정적 파일 및 요청 관련 미들웨어 설정
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
// 루트 URL 접속 시 로그인 페이지로 리디렉션
app.get('/', (req, res) => {
res.redirect('/login.html'); // login.html로 리다이렉트
});
//회원가입 post 요청이 온 경우의 처리
app.post('/register', async (req, res) => {
//요청에서 id와 비밀번호 추출
const { id, password } = req.body;
//이미 가입된 동일한 id가 있는지 체크
if (users[id]) {// 동일한 id가 있는 경우에 대한 처리
res.setHeader('Content-Type', 'text/html');
res.send('<script>alert("이미 존재하는 아이디입니다"); window.history.back();</script>');
return;
}
const hashedPassword = await bcrypt.hash(password, 10); // 비밀번호 해시
users[id] = { password: hashedPassword }; // 해시된 비밀번호 저장
console.log('회원가입 처리 시점');
console.log(`회원가입한 ${id} 아이디의 해시된 비밀번호: ${hashedPassword}`); // 해시된 비밀번호 로그
//회원가입 성공 알림과 함께 로그인 페이지로 리디렉션
res.setHeader('Content-Type', 'text/html');
res.send(`<script>alert("회원가입이 완료되었습니다."); window.location.replace("/login.html");</script>`);
});
//로그인 post 요청이 온 경우의 처리
app.post('/login', async (req, res) => {
//요청에서 id와 비밀번호 추출
const { id, password } = req.body;
// 회원 정보 조회
const user = users[id];
// 회원정보가 존재하는 경우에만 비밀번호 로그 출력
if (user) {
console.log('로그인 처리 시점');
console.log(`${id} 아이디의 로그인시 입력한 비밀번호: ${password}`); // 입력된 비밀번호 로그
console.log(`서버에 저장된 ${id} 아이디의 해시된 비밀번호: ${user.password}`); // 해시된 비밀번호 로그
}
//회원정보 체크
if (!user || !(await bcrypt.compare(password, user.password))) {//가입한 회원 인지 체크, 해시된 비밀번호와 요청에서 받은 비밀번호 비교
res.setHeader('Content-Type', 'text/html');
res.send('<script>alert("아이디 또는 비밀번호를 잘못 입력했습니다. 입력하신 내용을 다시 확인해주세요."); window.history.back();</script>');
return;
}
console.log('회원 인증 성공! 가입한 회원이며 저장해둔 해시된 비밀번호와 요청에서 받은 비밀번호 비교결과 일치함');
//로그인 성공 메세지 전송
res.send('로그인 성공!');
});
// 서버 3000번 포트로 실행
app.listen(3000, () => {
console.log('서버 3000번 포트로 실행');
});
실행 결과
bcryptjs에 의해 비밀번호 해시 처리가 되는 것을 확인 할 수있습니다.
'Nodejs' 카테고리의 다른 글
| [Nodejs]babel 활용하기 (0) | 2024.08.20 |
|---|---|
| [Nodejs]mysql2 활용하기 (0) | 2024.08.14 |
| [Nodejs]pug 활용하기 (0) | 2024.08.02 |
| [Nodejs] IPFS 이미지 업로드 (0) | 2024.01.24 |
| [Nodejs] Nodemon으로 오류 기록하고 자동 재시작하기 (0) | 2024.01.18 |
