[TIL] 소셜 로그인 한페이지에서 함께 처리하기

로그인 페이지에서 3개의 sns 로그인을 처리할 필요가 있다

뭐가 문제일까?

sns 인증 과정이후에 페이지 내에서 callback으로 토큰 값을 받아서 토큰 값을 서버로 보내주는 식으로 인증과정을 거쳐가고 있었다. 다만 이 설계가 한가지의 sns 로그인이었다면 문제가 없겠지만, 세가지의 sns 로그인을 처리하려면 각각의 sns로그인이 어떤 sns인지 식별할 수 있어야한다.

 

1. sns 인증 과정 이후 callback

2. url parameter에 code가 존재하면 token으로 로그인 api 요청

https://trys-ketch.com/login?code={token}

3. 서버의 로그인 절차 이후 response를 받아서 토큰값 쿠키에 저장

 

어떻게 처리하면 될까?

이전에는 이렇게 callback되고 있었는데,

https://trys-ketch.com/login?code={token}

여러개의 sns를 식별하기 위해서 각각의 callback url에 계층을 한가지를 더해주는 방법을 사용했다.

 

https://trys-ketch.com/login/google?code={token}
https://trys-ketch.com/login/naver?code={token}
https://trys-ketch.com/login/kakao?code={token}

sns 로그인 api 서비스에 접속해서 callback url 설정을 변경해주어야 문제없이 작동할 수 있다.

 

이렇게 하면 sns를 각각 인식할 수 있다.

이제 저 방법대로 설계하러 가보자!

 

라우터 처리

1. 라우터에서 url parameter로 sns부분으로 접근할 수 있게 처리한다.

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/login/:sns" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

 

2. 로그인 페이지 내에서 sns 값을 받아서 처리하기

function Login() {
  const { sns } = useParams();

  const code = searchParams.get('code');
  const state = searchParams.get('state');

  const handleLogin = useCallback(
    (res) => {
      if (res.data.statusCode === 200) {
      	...
        setCookie(res.headers.authorization);
        navigate('/');
      }
    },
    [dispatch, navigate, openModal, sns],
  );

  const kakaoLogin = useCallback(() => {
    authAPI.kakaoLogin(code)
      .then((res) => handleLogin(res))
      .catch((err) => {...});
  }, [code, handleLogin]);

  const googleLogin = useCallback(() => {
    authAPI.googleLogin(code)
      .then((res) => handleLogin(res))
      .catch((err) => {...});
  }, [code, handleLogin]);

  const naverLogin = useCallback(() => {
    authAPI.naverLogin(code, state)
      .then((res) => handleLogin(res))
      .catch((err) => {...});
  }, [code, handleLogin, state]);

  useEffect(() => {
    if (code) {
      switch (sns) {
        case 'kakao':
          kakaoLogin();
          break;
        case 'google':
          googleLogin();
          break;
        case 'naver':
          naverLogin();
          break;
        default:
          break;
      }
    }
  }, [googleLogin, kakaoLogin, naverLogin, sns, code]);

  return (
    ...
  );
}

useEffect에서 sns 값에 대한 분기처리를 해준 뒤 각각 로그인 api에 맞게 호출해주면 된다.

 

+쿠키 처리

여기서 쿠키 처리가 문제가 될 수 있는데, 그 이유는 url 계층을 하나더 늘렸기 때문이다.

만약에 쿠키 path설정을 default로 했다면, 해당 계층에서만 접근가능하기 때문이다.

 

로그인 정보를 다른 모든 페이지에서 접근할 수 없다면 상당히 곤란하다.

모든 페이지에서 접근할 수 있도록 path를 지정해주자.

path를 root로 설정해주면 모든 url계층에서 접근가능하다.

export const setCookie = (value, name = TOKEN_KEY) => {
  return cookies.set(name, value, { path: '/' });
};