React

[TIL/React] 2025/02/06

휴대폰 인증 전 Flow 🍀Twilio를 통한 휴대폰 인증 전까지의 흐름에 대해 정리할 예정이다. 참고로 하단의 넘버링은 위 이미지의 넘버링과 일치하지 않는다. 서술을 위한 넘버링이다.Appbar에 위치한 카카오 로그인 버튼을 클릭하면 provider 파라미터를 통해

2025년 2월 6일2min read

휴대폰 인증 전 Flow 🍀

0. 전체적인 흐름 ✍️

Twilio를 통한 휴대폰 인증 전까지의 흐름에 대해 정리할 예정이다. 참고로 하단의 넘버링은 위 이미지의 넘버링과 일치하지 않는다. 서술을 위한 넘버링이다.

Appbar에 위치한 카카오 로그인 버튼을 클릭하면 provider 파라미터를 통해 'kakao'라는 string 값이 전달된다. provider는 네이버와 구글 로그인을 포함한 분기 처리를 위해 존재한다.

전달받은 string 값을 통해 ``3000/kakao/login``이라는 서버 주소로 이동하게 된다.

컨트롤러의 ``3000/kakao/login`` 로직에서는 getKakaoUrl() 함수를 실행하고 있다. 해당 함수는 서비스 파일에 구체화되어 있다.

카카오에서 인가 코드 발급을 위해 요구하는 url 형식을 반환하는 함수다. 여기서 주목할 것은 KAKAO_CALLBACK_URL이 ``5173/redirect?provider=kakao``라는 것이다.

물론 ``5173/redirect?provider=kakao``으로 리다이렉트 되기 전에 사용자에게 동의 화면을 출력하고, 사용자로부터 동의를 받는다. 즉 리다이렉션은 사용자의 약관 동의를 전제로 한다.

해당 코드는 리다이렉트용 페이지인 RedirectPage.tsx에 작성된 useEffect 로직이다. 리다이렉트를 frontend로 시킨 이유가 있다.

결국 사용자 정보에 대한 'response'가 frontend로 떨어져야, 해당 유저 정보를 활용할 수 있기 때문이다.