[Youtube 클론코딩] 회원가입 기능 구현하기

이제 그동안은 Video 페이지 관련으로 기능을 구현했다면 이제는 사용자 인증 관련 기능을 구현해볼 시간이다.

 

페이지 만들기

보통의 다른 사이트들을 살펴보면 회원가입을 하려면 회원가입 페이지로 이동해서 정보를 입력한 뒤,

회원가입을 완료하면 로그인 페이지로 이동한다.

 

먼저 유저 정보로 활용할 스키마를 구성하자.

/src/models/User.js

여기서 unique는 해당 key가 user db 내부에 단 한개만 존재함을 의미한다. (Unique Key)

/src/init.js

model을 만들었으면 init.js에 불러온다.

/src/routers/rootRouter.js

이후 로그인 할 페이지를 라우트에 추가해준다.

일단 회원가입을 하려면 회원가입 페이지에 get방식으로 접근한 뒤, post방식으로 처리해야 하므로 route()를 사용한다.

/src/views/join.pug

로그인 페이지는 위처럼 구성해준다.

/src/controllers/userController.js

회원가입 페이지에서 post 방식으로 정보를 입력하면, 받은 정보를 토대로 db에 유저 객체를 생성해야한다.

따라서 User.create()로 객체를 입력해준 뒤, 저장되면 login 페이지로 리다이렉트 한다.

시험삼아 유저를 입력해 제대로 동작하는지 확인한다.

유저가 제대로 입력됐다.

 

비밀번호 보안 설정

DB를 확인해보면 아주 치명적인 취약점이 하나 보인다.

바로 비밀번호가 암호화되지 않은 것이다.

이렇게 될 경우 DB가 해킹당하면 아주 손쉽게 유저ID와 비밀번호가 탈취된다.

 

이를 암호화하기 위해서는 '해시 함수'를 사용한다.

해시 함수

해시 함수는 일방향 함수의 대표적인 예시로,

입력값을 넣으면 그 입력값을 '해시 키'와 조합하여 새로운 문자열로 출력하며 그 역은 불가능하다.(일방향 함수)

이 출력값을 다시 입력값에 넣으면 또 다른 문자열이 출력된다.

그러나 같은 문자열을 다시 입력값에 넣으면 처음에 넣었던 문자열이 그대로 출력된다. (결정적 함수)

 

이런 해시 함수를 제공해주는 api가 존재하는데 바로 bcypt 이다.

bcrypt - npm (npmjs.com)

bcrypt

bcypt는 1999년부터 만들어져 여러 언어에서 사용되며 대다수의 사이트에서 채용하고 있는 해시 함수이다.

사용 방법은 위와 같다.

여기서 saltRounds 는 해시 함수를 중첩해서 사용할 횟수이다. (Number)

즉, 해시 함수를 여러번 사용해서 보안을 더 높이는 것.

 

bcypt는 promise를 지원한다. 따라서 then을 이용하거나 async await을 이용할 수 있다.

우리는 데이터가 저장되기 전에 비밀번호를 해싱하여 저장해야 하므로 Schema.pre('save', callback() {}) 을 이용한다.

Schema에서 this는 현재 다뤄지는 객체를 의미하므로 this는 저장되려는 유저 객체를 의미한다.

 

결과를 살펴보면 다음과 같이 정상적으로 해시가 적용된다.