프로젝트 : 맛집후기 뉴스피드 페이지
로직
회원가입-> 로그인-> CUD기능을 수행하기 위한 사용자 인증
회원가입 부분코드
: 6가지의 정보를 받는다 => 중복되는 닉네임 검사 => 패스워드는 암호화하여 알아보기 어렵게 저장(bcrypt 라이브러리 설치필요) => 성공하면 201번포트로 회원정보 return
module.exports = {
create: async (req, res, next) => {
const { nickname, name, email, phone, imageURL, password } = req.body;
const foundData = await User.findOne({ where: { nickname } });
if (!foundData) {
const hashedPassword = bcrypt.hashSync(password, config.bcrypt.salt);
const created = await User.create({
nickname,
password: hashedPassword,
name,
email,
phone,
imageURL,
}).then((d) => {
return d;
});
return res.status(201).json(created.toJSON());
} else {
return res.status(400).json({
Success: false,
message: '이미 존재하는 닉네임 입니다.',
});
}
},
}
로그인 부분 코드
: email과 password를 받아 요청 => 받아온 email과 일치하는 회원정보를 db에서 찾음 => bcrypt로 암호화된 패스워드를 다시 바꿔서 받아온 패스워드와 일치하는지 확인 => 맞약 맞으면 토큰을 생성하여 토큰에 포함될 payload를 userId로 지정하고 설정한 secretKey로 서명해 토큰의 무결성을 검증 => 토큰의 유효기간 지정 => 쿠키를 Authorization, Beraer타입으로 토큰값과 같이 구워 보낸다. => 성공하면 로그인 되었다고 표시
login: async (req, res) => {
const { email, password } = req.body;
try {
const foundData = await User.findOne({ where: { email } });
const match = bcrypt.compareSync(password, foundData.dataValues.password);
if (match) {
const token = await jwt.sign(
{
userId: foundData.dataValues.id,
},
secretKey,
{ expiresIn: expireIn }
);
res.cookie('Authorization', 'Bearer ' + token);
res.status(200).json({
token: token,
message: '로그인 되었습니다.',
});
} else {
res.status(400).json({
message: '닉네임과 비밀번호가 일치하지 않습니다.',
});
}
} catch (e) {
console.error(e);
res.status(400).json({
message: 'Bad Request',
});
}
},
문제발생: 로그인을 해도 쿠키쪽에 아무런 정보가 들어오지 않음
문제해결: 웹브라우저의 기본 기능인 Local Storage에 저장하여 토큰값을 가져온다
=> 단점은 누구나 볼 수 있고 해킹이 간단할 수 있다는 것이다.
// 로그인
async function login() {
const obj = {};
obj.email = $('#loginEmail').val(); // Uniqe
obj.password = $('#loginPw').val();
const option = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(obj),
};
try {
const fetchedData = await fetch(
'http://localhost:3030/users/login',
option
).then((d) => {
return d.json();
});
window.localStorage.setItem('Authorization', 'Bearer ' + fetchedData.token);
window.location.reload();
} catch (e) {
console.error(e);
}
}
프론트 쪽 index.js에서 서버로부터 작성된 코드를 fetch불러와서 email과 password가 맞으면 해당 정보를 JSON화시켜 localstorage로 저장해서 인증된 값을 이걸로 계속 끌어다 쓰게 된다.