oAuth 로그인 구현(1)

coolchaem·2022년 6월 3일

toyproject

목록 보기

17/21

목표

kakao 소셜 로그인 구현

구현 범위

step1의 인가 코드 받기 구현

구현

1. 클라이언트 앱 카카오에 등록

앱 정보 설정
- 먼저 카카오디벨로퍼에 로그인하고 내 애플리케이션에 들어간다.
- 애플리케이션 추가를 누르고 정보를 입력하고 확인을 누르면 전체 애플리케이션 목록에 나온다.
- 눌러보면 아래 목록이 나옴
  - 앱 키: 클라이언트 아이디로 코드 요청에 사용할 수 있는데 카카오 디벨로퍼 설명서에 네이티브, rest api, javascript 방식이 나뉨
    - admin 키는 절대 노출 금지
- 플랫폼 설정이 필요하다
  - 서비스 url 정보랑 코드 받을 redirect url 필요
  - 공식 문서 참조
    
    https://developers.kakao.com/docs/latest/ko/getting-started/app#platform

필수권한 설정
- 블로그에서 보여줄 닉넴과 사진이 일단 필요하여 프로필 권한을 필수로 설정
리다이렉트 url 등록

아래는 잘못 구현된 코드이다. 다른 포스트 `oAuth 로그인 구현(2): (1) 오류 수정`에서 수정되었다.

2. 소셜 로그인 구현 (구현 오류!)

로그인 버튼 임의 추가
- a tag 를 사용해서 이미지를 누르면 카카오 로그인 서비스로 연결되게 url 링크
- Rest API 키를 이용해 클라이언트 아이디 사용 중

<a href={`${kakaoAuthUrl}?response_type=code&client_id=${kakoClientId}&redirect_uri=${kakaoRedirectUrl}`}>
  <img src={kakaoLogin} alt="login_kakao" />
</a>

~~디자인은 코드 고친 후 모달형태로 바꿀 예정~~

react route 추가
- 다른 route 처럼 추가했는데 url노출과 url임의 접근 문제가 있어 추후 보완해야한다.

  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<HomePage />}>
            <Route index element={<HomePage />} />
            <Route path="trending" element={<TrendingPostsPage />} />
            <Route path="recent" element={<RecentPostsPage />} />
          </Route>
          <Route path="@:userId/*" element={<VelogPage />} />
          <Route path="write" element={<WritePage />} />
          <Route path="saves" element={<SavesPage />} />
          <Route path="lists" element={<ReadingListPage />} />
          <Route path="setting" element={<SettingPage />} />
          <Route path="login" element={<LoginPage />} />
          <Route path="oauth/redirect" element={<LoginRedirectPage />} /> // 추가
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </BrowserRouter>
      <ToastContainer />
      <Global styles={globalStyles} />
    </>
  );

const LoginRedirectPage = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  useEffect(() => {
    try {
      console.log(searchParams.get('code'));
      navigate('/recent', { replace: true });
    } catch (error) {
      console.error(error);
    }
  }, [searchParams, navigate]);

  return <div>redirect...</div>;
};

결과

로그인 버튼 누르면!

로그인 하면!

여기서 동의 계속 누르면 리다이렉트때문에 깜박하고 홈으로 가는걸 체감할 수 있음

문제점

url로 page를 로딩하면 서버에 code를 전송하려고 할 것임
- 지금은 구현 안 되었으나 서버에서 토큰 받기 위해 code 전송
- 대안: private route
url 혹은 암호화되지 않은 패킷을 보고 code를 가로채서 토큰 요청하는 공격 가능
- 암호화 수단 필요
- 대안: https, 보안문자열, 인가코드 요청 쿼리옵션 추가