[FE] 회원가입/로그인 의 과정

Registration / Authentication

 

Registration.

CLIENT: 사용자에게 회원가입 시 필요한 데이터를 입력받고, 서버로 전달합니다
SERVER:
1. 전달받은 아이디(또는 이메일) 이 데이터베이스에 존재하는지 체크합니다
2-1. 이미 존재하는 아이디(또는 이메일)이라면, duplicate 에러 발생
2-2. 존재하지 않는다면 다음 단계로 패스
3. 비밀번호를 hash 알고리즘을 활용해 암호화 합니다
4. 암호화 된 비밀번호와 함께 데이터베이스에 새로운 사용자를 저장하고, 잘 저장되었다고 클라이언트에 알려줍니다Login,

 

 

Authentication

로그인을 하는 목적은, 사용자가 권한이 있는지 없는지를 체크하기 위한 목적이 큽니다.
따라서, 권한을 체크하기 위해 JWT이나 세션, firebase 등등 다양한 친구들을 사용하죠.
그중 JWT 활용하는 Passport 라이브러리를 활용하는 경우를 예시로 들게요

 

I. Local Strategy (이메일과 비밀번호로 로그인하기)

CLIENT: 사용자에게 아이디(또는 이메일)과 비밀번호를 입력받고, 서버로 전달합니다

SERVER:
1. 전달받은 아이디(또는 이메일)이 데이터베이스에 존재하는지 체크합니다
2-1. 존재하지 않는다면 bad request 에러 발생
2-2. 존재한다면 다음 단계로
3. 데이터베이스에 사용자가 입력한 이메일 주소에 해당하는 유저 데이터를 가져옵니다
const user = await this.repository.findOne({ email })

4. 데이터베이스에서 가져온 사용자의 (암호화가 되어있는) 비밀번호를 사용자가 입력한 비밀번호를 암호화 한 뒤에 같은지 비교합니다
console.log(user.password) // $2b$10$ImzWpU2eXN2In5DX4GNtJOahmzRIcUM52dQ7gaU7QWiTSPzpHwDnK
console.log(enteredPassword) // someRawPassword
const isPasswordMatching = await bcrypt.compare(user.password, enteredPassword) // 사용자가 입력한 비밀번호를 암호화 한 뒤, 우리가 암호화 하여 데이터베이스에 저장했던 사용자의 비밀번호와 같은지 비교5-1. 만약 같지 않다면 bad request 에러를 발생시킵니다
if (!isPasswordMatching) throw new BadRequestException()5-2. 만약 일치한다면 다음단계로 넘어가 토큰값을 전달하거나, 쿠키설정을 해줍니다

 

II. JWT Strategy (갖고있는 토큰값으로 인증하기)

CLIENT: 쿠키나 토큰값을 리퀘스트 헤더에 붙여 서버에 필요한 요청들을 보냅니다
SERVER:
1. 보안처리가 되어있는 라우트에 요청을 보내는 경우. request 헤더에서 토큰이나 쿠키값을 꺼내옵니다
2. 토큰값에 저장되어있는 사용자 아이디(또는 이메일)을 사용하여 데이터베이스에 조회를 합니다
3-1. 만약 존재하지 않는 사용자라면, not authorized 에러를 발생시킵니다
3-2. 만약 존재하는 사용자라면 다음단계로 지나가게 해줍니다