login process
로그인을 하는 과정이다.
사용자가 웹페이지에 접근해 로그인을 할 때 프론트와 백, DB안에서 이루어지는 모든 과정이다.
- 시퀀스 다이어그램
- 유저가 계정과 비밀번호로 로그인을 시도
- 패스워드 등을 통해 인증이 완료되면 클라이언트로 accessToken을 발급
- 이후 요청 시마다 해당 accessToken을 이용하여 인증 절차 생략
- 이 과정을 통해 사용자는 웹페이지에서 일단 로그인하면 서비스를 이용할 수 있다.
로그인 프로세스에 대해 알아보던 중 한국 웹사이트에서는 내가 아직 배우지 못한 카카오 연동 로그인이라던지, 보안 프로세스와 같은 글만 나왔다.
Walking Through the Login Process
그러다가 로그인 프로세스가 어떻게 이루어지는지 단계별로 안내되어있는 사이트를 발견했다. 다만 영어로 되어있어서 이것을 한글로 옮겨서 정리하고 기록하려 한다.
- 다음 사이트에서는 javacript 프론트 엔드와 Rails백엔드를 사용하는 웹사이트를 예로 들면서 설명한다.
1. 웹페이지 화면
사용자 이름, 암호 및 로그인 버튼이 있다. 이들은 일반적으로 사용자가 웹 사이트를 방문 할 때 상호 작용하는 첫 번째 것들이다.
그럼 이 페이지 뒤에는 어떤 것들이 있을까?
먼저, JavaScript Login 컴포넌트부터 시작하자.
2. 프론트엔드 HTML
사용자 이름과 비밀번호에는 2개의 텍스트 입력과 Login 버튼인 Submit Type 입력이 있다. Login 폼이 전송되면 loginUser 함수가 호출된다.
3. API
제출 작업에서 이벤트(e)를 가져오고 가장 먼저 수행하는 작업은 PreventDefault 메소드를 호출하여 새로 고침을 방지하는 것이다.
우리가 방문해야 할 URL과 fetch call을 할 때 필요한 리퀘스트 오브젝트를 준비하면서 백엔드로 넘어간다.
백엔드에 데이터(사용자 이름과 패스워드)를 공급해야 하기 때문에 Rails 백엔드에서 처리할 데이터를 게시할 때 이 Post API를 만들어야 한다.
우리가 /users를 경로로 지정했기 때문에, 우리가 백엔드에 도착했을 때 어떤 일이 일어나는지 확인해보면, Rails 백엔드를 처리할 때 경로는 기본적으로 Rails 앱의 경로이다.
앱이 무엇을해야하는지 알기 위해서는 사용자가 특정 경로를 방문 할 때 실행할 앱을 알려주는 적절한 경로를 그려야합니다. 다음은 routes.rb 파일에 있는 내용 중 일부다.
/users 경로로 post 요청을 발행했기 때문에 위의 내용은 Rails에게 "사용자" 컨트롤러로 이동하여 "작성" 메서드를 실행해야 한다고 말한다. 이제 어떻게 되는지 한번 가보자
4. 백엔드
이 방법에서는 먼저 입력한 사용자 이름을 기반으로 사용자를 찾는다.
발견된 경우 제공된 비밀번호를 기반으로 인증을 시도한다.
인증이 완료되면 사용자 브라우저용 JSON Web Token(jwt)을 생성하여 저장한다.
이것에 의해, 이후의 세션에 jwt 가 표시되어 있는 한, 유저는 로그인을 회피할 수 있다.
이후에는 jwt와 함께 프론트엔드 앱에 필요한 모든 데이터를 렌더링 실행으로 JSON 형식으로 반송한다. 이제 프런트엔드 앱의 Login 컴포넌트로 돌아가보면...
73번줄을 보면, 우리는 jwt(resp.json())와 함께 백엔드에서 사용자 데이터를 다시 받아온다.
오류가 없으면 먼저 토큰을 로컬 저장소(82번째 줄)에 저장한 다음 로그인한 사용자에게 필요한 데이터로 Redux 저장소를 업데이트한다.
두 개의 후속 함수는 백엔드에서 추가 데이터 검색일 뿐이다.
우리는 방금 새로운 토큰을 받았기 때문에 더 많은 백엔드 데이터를 가져올 때 유용하게 사용할 수 있다.
이 시점에서 우리는 로그인 프로세스를 완료했다. 이제 필요한 모든 웹 페이지에 적절한 데이터를 표시 할 준비가 된 것이다.
- 다음 글은 로그인 프로세스를 간단하게 보여준다. 로그인 프로세스는 사용자가 아이디와 패스워드로 로그인을 하면, 토큰을 발행해 이후 웹페이지를 이동해도 지속적인 로그인 상태를 유지할 수 있게 해준다.
마무리
이전에는 mongodb를 이용해서 로그인 과정을 만들어본 적이 있었다. 다만 그것은 객체로 유저정보를 묶어놓을 뿐이어서 약간 겉핥기의 느낌이 강했다.
Nest.js와 데이터베이스구조를 이용해 테이블을 사용해보며 로그인에 대해서 구체적으로 배우는 공부를 해보고 싶다.
재밌는 작업일 것 같다.
Reference
