로그인 기능 완성하기
이전 user saga의 코드들을 보면 'http://localhost:3065'가 중복되는것을 볼 수 있는데, 이것을 axios를 이용하여 sagas/index.js에 한꺼번에 묶어서 중복된 코드들을 줄일 수 있습니다. passport라는 라이브러리를 통해 로그인기능을 완성시킵니다.
passport와 passport-local을 설치합니다.
- passport: 카카오, 네이버 로그인 등 여러 로그인 전략들을 한꺼번에 관리할 수 있음.
- passport-local: email 또는 id로 로그인할 수 있게 도와줌.
back/passport/index.js
back/passport/local.js
local.js에서 usernameField, passwordField에서 각각 email, password 값을 전달받는데, 이 데이터들은 프론트에서 넘어온 req.body.email, req.body.password를 의미합니다. 로그인 할 때, passport로 아이디와 비밀번호가 존재하는 데이터인지 확인해주기 위해서 코드를 작성해주는데, passport에서는 res.status(201).send를 이용하지 않고, done을 이용합니다. bcrypt를 통해서 비밀번호를 암호화 해줬기때문에 비밀번호 일치여부도 비교(compare)하여 전송해주도록 합니다.
- done에는 3개의 인자들이 들어가는데, (서버에러, 성공, 클라이언트에러) 순으로 들어가게 됩니다.
- bcrypt.compare 메소드를 통해 현재 비밀번호, DB에 담겨있는 비밀번호가 일치하는지 확인해볼 수 있습니다.
back/routes/user.js
로그인 시 passport.authenticate를 통해 로그인을 할 수 있게끔 코드를 작성해주도록 합니다.
- authenticate함수의 인자(서버에러, 성공, 클라이언트에러)순
쿠키와 세션 이해하기
const session = require('express-session');
const cookieParser = require('cookie-Parser');
app.use(
session({
saveUninitialized: false,
resave: false,
secret: process.env.COOKIE_SECRET,
})
); // 로그인할 때 브라우저랑 서버랑 같은 정보를 가져야하는데 보안을 위해 쿠키,세션으로 암호화
app.use(cookieParser(process.env.COOKIE_SECRET));cookie-parser와 express-session을 설치
로그인 시에 브라우저와 서버는 같은 정보를 가지고 있어야 한다.
- 로그인할 때 브라우저와 서버는 같은 정보를 가지고 있어야 함.
- 지금까지는 데이터들을 그냥 보내줬었음
- 백엔드서버가 가지고 있는 데이터들을 브라우저에 그대로 보내주면 해킹에 취약한 점이 있음
- 그래서 데이터들을 보내주는 대신에 Cxhly라는 임의의 문자를 보내주는데 이것이 쿠키
- 백엔드에서 데이터들을 Cxhly라는 정보로 저장을 하고, Cxhly와 백엔드 정보가 연결되어 있다라는게 세션
하지만, 서비스의 사용자가 많아질수록 백엔드서버에 이런 정보들을 다 가지고 있기에는 용량이 너무 크다는 단점이 있습니다. 그래서, Cxhly라는 문자에 id만 매칭해놓고, 브라우저에서 요청이 오면 Cxhly와 id로 데이터를 불러올 수 있습니다.
