백엔드 로그인 구현

따로 팀 프로젝트하고 있는 과정 중 복습 용도로 사용하기 위해 작성을 하는 글 입니다.

실제 서비스를 목표로 하고 있는 웹 페이지 구현이라서 완성을 해야되는 페이지들이 많다. 그 중에서 로그인 관련된 기능들을 소개를 하려 한다.

그림 1.api 호출 라우트 설정 1

순서대로 회원가입 , 로그인, 로그아웃, 현재 로그인한 사용자 정보 조회, 소셜 로그인 시 검증된 사용자 확인을 위한 api 구성이라고 보면 된다. 얘네들은 어디로 연결이 되어있는 걸까? 바로 위에 코드를 보면 authController하고 연결이 되어있는 거 같다. 그럼 Controller 구현되어있는 부분들을 봐보자.

그림 2. Controller 기능 1

Controller 중에서 회원가입 관련된 부분이다. 비동기 형태로 request.body 부분에 포함되어있는 아이디, 패스워드, 닉네임, 이메일을 깨내온다. 그리고 authService에 회원가입 기능이 구현되어있는데에 넣어놓으면 user 객체가 만들어지는 걸 볼 수 있다. 아무래도 Service 쪽은 실제 계정이 만들어지는 공간인듯 하다. 그렇게 user 객체 중에서 id를 세션의 아이디로 넣어 놓고 json에 유저 id와 닉네임을 반환하는 역할이 되겠다. 다음으로 Service 영역까지 보면 얼추 흐름을 알 수 있을 듯 보인다.

그림 3. Service 기능 1

회원가입의 서비스 영역이다. 비동기로 받아온 각 매개변수들은 mongodb에 일단 존재하는지 확인을 해본다. 만약에 있다면 이미 존재한다고 보고, 예외처리를 진행해버린다. 그게 아니면 bcrypt 로 평문 패스워드를 암호화 하여 User model Schema를 통해서 만든 User 객체를 생성하고 반환값으로 내보내버린다. 이런 과정을 거쳐서 결과 창에 json으로 넘겨준 id와 닉네임 값을 활용하여 회원가입이 완료되었다는 프론트 영역을 작성한 후 다시 로그인 창으로 가면 되는 것이다. 

아무래도 기능 하나만 보는건 조금 아쉬우니까 다른 기능들도 보는게 나을 거 같다.

 

그림 4. api 라우트 호출 설정 2

다음 기능은 소셜 로그인 기능 구현이다. 보통 데이터베이스에 있는 사용자들뿐만 아니라 다른 웹 사이트에 존재하는 로그인 정보를 통해서 사용자를 인증해야될 때 필요한 기능이다. 그 기능을 간단하게 사용하기 위해서는 passport.js의 기능을 활용을 해야 된다. passport authenticate를 통해서 구글 로그인 및 권한 승인 화면에 진입한 후 profile과 email을 명시하여 사용자의 프로필과 이메일 정보 접근 권한을 요청한다. 

그림 5. passport 기능

승인이 완료되면 callbackURL인 /api/auth/google/callback으로 리다이렉트 해버린다. 리다이렉트 된 곳에서는 사용자의 존재 여부 확인과 , 신규 사용자 등록이 진행된다. 그 이후 그림 4에서 다시 /google/callback을 따라서 로그인에 성공을 하면 메인페이지로 가게되고, 실패하면 다시 로그인 페이지로 가게된다.

그 이외에도 카카오, 깃허브 등이 존재하고 있고, 셋 중에 하나를 잘 사용해서 로그인을 진행하면 될 거같다.

은연 중에 지나간 isProfileComplete 가 소셜 로그인 직후 프로필을 보완해주는 장치로 동작을 한다. 

그림 6. completeProfile

계정을 처음 만드는 과정이라면, passport에서 바로 리다이렉트 되는 구간이다. 프로필을 req.body 정보를 통해 닉네임과 이메일을 받아오고, 실제로 그 닉네임과 이메일을 사용을 할 것인지 결정을 한 후 데이터베이스에 사용자 정보를 저장한다. 그리고 다음 소셜 로그인부터는 isProfileComplete가 false가 되었으므로 다시 해당과정을 거치지 않는다. 

그림 7. 그 외 기능들

그 외 기능들로 아이디나 비밀 번호를 찾는 기능, 그 찾기 위해서 사용자 검증을 할 때, 메일 검증으로 진행을 하지 등을 검사하는 과정들이 존재한다. 내가 만든 코드들을 리뷰해서 좀 더 이해하기가 도움이 되었던 날이다.