휴대폰 인증 전 Flow 🍀
0. 전체적인 흐름 ✍️
Twilio를 통한 휴대폰 인증 전까지의 흐름에 대해 정리할 예정이다. 참고로 하단의 넘버링은 위 이미지의 넘버링과 일치하지 않는다. 서술을 위한 넘버링이다.
1. 소셜 로그인 요청(Kakao를 중심으로) ✍️
Appbar에 위치한 카카오 로그인 버튼을 클릭하면 provider 파라미터를 통해 'kakao'라는 string 값이 전달된다. provider는 네이버와 구글 로그인을 포함한 분기 처리를 위해 존재한다.
전달받은 string 값을 통해 3000/kakao/login이라는 서버 주소로 이동하게 된다.
2. 인가 코드 발급 요청 ✍️
컨트롤러의 3000/kakao/login 로직에서는 getKakaoUrl() 함수를 실행하고 있다. 해당 함수는 서비스 파일에 구체화되어 있다.
카카오에서 인가 코드 발급을 위해 요구하는 url 형식을 반환하는 함수다. 여기서 주목할 것은 KAKAO_CALLBACK_URL이 5173/redirect?provider=kakao라는 것이다.
물론 5173/redirect?provider=kakao으로 리다이렉트 되기 전에 사용자에게 동의 화면을 출력하고, 사용자로부터 동의를 받는다. 즉 리다이렉션은 사용자의 약관 동의를 전제로 한다.
3. 토큰 발급 요청 ✍️
해당 코드는 리다이렉트용 페이지인 RedirectPage.tsx에 작성된 useEffect 로직이다. 리다이렉트를 frontend로 시킨 이유가 있다.
결국 사용자 정보에 대한 'response'가 frontend로 떨어져야, 해당 유저 정보를 활용할 수 있기 때문이다.
3000/auth/kakao/user 서버로 이동하여, 이후 로직을 수행하게 된다.
4. 토큰 발급 ✍️
서비스 로직의 getToken(code) 함수가 가장 먼저 실행된다. 카카오 서버로 인가 코드를 통해 '토큰'을 요청하게 된다. 카카오 프로바이더가 요구하는 형식을 맞춰주면 되고, 해당 내용은 카카오 디벨로퍼 공식문서에 명시되어 있다.
5. 사용자 정보 가져오기 요청 ✍️
다음으로 getUserInfo(tokens.access_token) 함수를 실행한다. 액세스 토큰은 사용자 정보를 가져오기 위한 토큰이다.
카카오 서버에, 헤더에 access token을 담았으니 사용자 정보를 달라는 요청을 수행한다. 지금까지의 과정을 잘 수행했다면, 사용자 정보를 받을 수 있다.
6. 처리 정보 저장 ✍️
마지막으로 registerOrFindUser(user) 함수가 실행된다. 카카오로부터 받은 사용자 정보에서 우선적으로 필요한 데이터를 추출한다.
이후 findOrCreateUser() 함수에 추출한 데이터를 객체 형태로 전달한다.
7. Database에 유저 정보 저장 ✍️
우선 findOneBy() 메서드를 통해 기존 사용자 여부를 id로 체크한다.
!existingUser라면, 즉 기존 사용자가 아니라면 create 메서드를 통해 새로운 유저 정보를 Database에 저장한다.
else라면, 즉 기존 사용자라면 업데이트에 관한 처리를 진행한다. 개별 유저 정보가 기존 유저 정보와 일치하지 않는 상황이라면, 변경된 정보로 유저 정보를 update 한다. 그리고 각 과정에서 updated 변수를 true로 변환해 준다.
updated가 true인 경우 변경 사항이 반영된 유저 정보를 다시 DB에 저장한다.
최종적으로는 existingUser를 반환하게 된다. 해당 값은 5173/redirect?provider=kakao의 response 값이 된다. 즉 frontend에서 사용자 정보를 활용할 수 있는 상태가 되었다.
8. 프론트엔드 후속 처리 ✍️
response 값으로 setData를 통해 data를 업데이트한다.
추가적으로 모든 요청이 성공적으로 완료된 후에는 Phone Verification을 위해 사용자를 /phone 경로로 이동시킨다.
만약 카카오로 이미 가입한 유저가 네이버로 가입하려고 하면, 동일 인물에 대해 계정이 두 개가 생긴다. 휴대전화 번호로 SMS 문자 인증을 보내, 기존 가입자인지를 판단하고, 다른 Provider로 계정을 추가 생성하는 것을 막기 위해 twilio 서비스를 이용할 예정이다.
사실 이미 구현은 했는데, DB 저장 로직과 플로우 정리가 미진해서 차후에 정리할 예정이다.
회고 🍀
지금은 돌아가신 사카모토 류이치 형님께서 어떤 인터뷰에서, "무언가를 만드는 데 나이는 무관하다"라며, "그때그때 원하는 걸 만들 수 있는 삶이야말로 행복한 삶"이라고 강조한 적이 있다. 꼭 모두가 뭔가를 만들어야 한다는 피상적인 충고라기보다는, 삶의 주도성에 관한 고견이었겠지. 행복하려면 조수석보다는 운전석이 맞는 것 같기도 하다.
