React

[TIL/React] 2025/01/11

소셜 로그인 - 휴대폰 인증 흐름 정리 📱회원 페이지에서 카카오 아이콘(네이버, 구글도 마찬가지)을 클릭하는 순간 실행되는 함수다. 해당 함수는 사용자를 http://localhost:3000/auth/${provider}/login 경로로 이동시킨다. 카카

2025년 1월 11일2min read

소셜 로그인 - 휴대폰 인증 흐름 정리 📱

회원 페이지에서 카카오 아이콘(네이버, 구글도 마찬가지)을 클릭하는 순간 실행되는 함수다.

해당 함수는 사용자를 ``http://localhost:3000/auth/${provider}/login`` 경로로 이동시킨다.

카카오를 클릭했을 때에는 'kakao' string을 parameter로 받는다. 즉, 프로바이더 별로 로그인 요청에 대한 분기 처리를 진행한 것이다.

이어서 getKakaoAuthUrl() 함수가 실행된다.

해당 함수는 사전에 지정해놓은 kakaoCallbackUrl로 이동함과 동시에, 인가 코드를 받도록 설정해놓은 코드다.

여기서 kakaoCallbackUrl은 ``http://localhost:5173/redirect``을 의미한다.

RedirectPage에서는 useEffect에 의해 ``http://localhost:3000/auth/kakao/user`` 경로로 post 요청이 수행된다. 이전 작업을 통해 받아온 인가 코드를 서버로 보내, 토큰을 받기 위함이다.

RedirectPage에서 전송한 인가 코드를 통해, 가장 먼저 getToken() 함수가 실행된다.

카카오에서 지정한 url로 그들이 요구하는 params를 형식에 맞게 지정한 후 post 요청을 보내고, 해당 data의 응답값을 반환하는 함수다.

그렇다면 controller에 있는 tokens 변수에는 response.data가 담기는데, 그 내부의 access_token 값을 getUserInfo() 함수로 전달한다.

액세스 토큰으로 kakao api에 get 요청을 보낸다. 액세스 토큰은 사용자 정보를 요청하기 위한 전제 조건이다. "액세스 토큰을 줬으니 사용자 정보를 내놓아라!"라는 의미의 코드다.

최종적으로, 기존 회원인지 신규 회원인지를 구분하려는 목적의 registerOrFindUser() 함수가 실행된다.

여기까지가 RedirectPage에서 useEffect로 실행된 내용이다.

서버 로직이 정상적으로 수행된 이후, /phone으로 사용자를 이동시킨다.

이제 PhoneVerificationPage에서 사용자로부터 휴대폰 번호를 입력받는다.

사용자가 카카오로 로그인할 수 있지만, 네이버나 구글로도 로그인할 가능성이 있다. 그럴 경우 동일한 유저임에도 불구하고 계정이 세 개 이상 생길 수 있다.

따라서 휴대폰 인증 절차를 통해 타 provider로 가입한 동일한 인물인지를 판별하는 과정이 필요하다.

위 함수는 사용자가 휴대폰 번호를 입력한 뒤 send 버튼을 클릭하는 시점에 동작한다. 우리 서버의 api/send-code로 phoneNumber를 post 하는 과정을 수행한다.

twilio로부터 verification code를 받기 위한 절차가 서버에서 실행된다. 해당 함수가 정상적으로 동작한다면, 휴대폰으로 국외 발신 문자를 받게 된다. 현재 verification code는 123456이다.

휴대폰 번호를 받았으니, 이제는 사용자로부터 verification code를 입력받는다. verify code를 send 하는 버튼을 클릭하면 다음 함수를 실행한다.

이번에는 우리 서버의 api/verify-code 경로로 post 요청을 보낸다. 사용자의 휴대전화 번호와 사용자가 받은 verification code를 서버로 전송한다.

서버에서는 최종적으로 verification code가 유효한지 확인하게 된다.

동일한 구조로 네이버와 구글을 구현하면 되겠다. 추가적으로, 현재 유저 정보를 로컬에서 관리하고 있으니, DB와 연결하는 절차를 진행하면 authentication에 관한 구현이 마무리될 것 같다. 굿!