카카오 로그인 구현하기: OAuth

https://github.com/sophia22001/Login-test

GitHub - sophia22001/Login-test: 소셜로그인 테스트

리액트에서 카카오 소셜 로그인을 구현해보았다.

 

 

OAuth 2.0 로그인 흐름

카카오 로그인은 OAuth 2.0 인증을 기반으로 작동한다. 

 

1. 사용자가 로그인 버튼 클릭

 

2. 카카오 로그인 페이지로 이동

 

3. 로그인 제출 시 카카오 인증 서버에서 프론트에서 설정한 리다이렉트 url(로그인이 완료되었을 때 나오는 화면)로 리다이렉트 한다. 

 

4. 이때 카카오 인증 서버는 리다이렉트 url에서 authorization code 를 함께 붙여서 전달한다. 

 

5. 프론트는 이 url에서 code만을 추출하여 벡엔드에게 넘긴다.

 

6. 벡엔드는 이 code를 카카오 API 서버에게 보내서 access token을 받아온다. 

이 코드는 프론트가 아니라 백엔드가 카카오 토큰 서버에 제출해야 Access Token을 교환 받을 수 있다. 

 

7. 벡엔드는 이 access token으로 사용자 정보를 조회할 수 있게 된다. 

 

8. 이제 벡엔드는 프론트에게 자체 발급한 JWT 토큰이나 세션 쿠키를 내려주는데, 이 토큰은 카카오 access token이 아니라, 서비스 자체의 인증 토큰이다. (서비스 내부는 자페 발급 토큰을 기준으로 유저 인증/인가를 처리해야 한다.)

 

9. 프론트는 이 자체 발급 토큰을 쿠키/local storage에 저장하고 이후의 API 호출에 사용한다. 

이렇게 하면 카카오 `access token`은 절대 프론트로 노출되지 않아 보안상 안전하다. 

 

 

 

다른 방식도 있겠지만, 정석적인 방식은 access token은 벡엔드가 전용으로 사용하고, 프론트에는 우리 서비스의 자체 토큰을 전달하여 이것으로 서로 통신하게 된다. 

그렇게 해서 카카오에 직접 의존하지 않고 우리 서비스 계정 시스템을 유지할 수 있다.

 

 

카카오 로그인 구현하기 

먼저 카카오 개발자 사이트에서 앱 설정을 하고, 로그인 코드를 구현해보자. 

A. 카카오 개발자 사이트에서 앱 설정하기 

1. 먼저 카카오 개발자 계정을 만든다. (https://developers.kakao.com/)

 

2. 앱 카테고리에서 `+앱 생성`을 클릭해 나의 서비스 앱을 추가한다. 

 

 

 

3. [앱 > 제품 설정 > 카카오 로그인 > 일반] 에 들어가서 카카오 로그인 설정을 한다. 

[사용 설정]과 [OpenID Connect]를 모두 활성화시켜준다. 

 

[사용 설정]은 말그대로 카카오 로그인을 허용한다. 이 앱이 내 리소스(API)에 접근해도 된다는 의미이다. 

[OpenID Connect]는 인증된 사용자가 누구인지를 확인할 수 있고 oauth 만으로는 구현하기 어려운 인증 관련된 기능들을 더 사용할 수 있다. Access Token과 별도로 ID Token(JWT 형태)을 발급해준다. ID Token은 JWT여서 서명 검증을 통해이 토큰이 진짜 카카오가 발급한 것이 맞는지, 중간에서 위조된 건 아닌지를  벡엔드에서 검증할 수 있다. 

 

간단한 로그인 구현만 구현하려면 [사용 설정]만 활성화해도 작동은 한다. 

 

• OAuth 2.0만 쓰면 → 권한 위임 (누가 인증됐는지는 보장되지 않음).
• OIDC를 활성화하면 → 인증 + 표준화된 사용자 정보 + 보안 강화

 

 

 

 

4. 같은 페이지에서 redirect URI 를 설정한다. 

redirect URI는 로그인을 성공한 후 돌아올 화면의 URI를 말한다. 

 

나는 redirect URI로 `http://localhost:5173/oauth/kakao/callback`라고 설정했다. 

리다이렉트 될 때는 `http://localhost:5173/oauth/kakao/callback?code=어쩌구저쩌구인가코드` 로 인가 코드인 `code`를 포함하여 되돌아온다. 

 

이제 프론트에서 이 URI에서 `code`(예시: `jdsnGGfsdFFF-dsjfksd~`)만 추출하여 벡엔드로 보내주면 된다. 

 

• 인증(Authentication): “이 사용자가 누구인지 확인하는 것”
• 인가(Authorization): “이 사용자가 어떤 권한을 가졌는지 허락하는 것”

 

 

 

 

5. 나의 앱에 해당하는 플랫폼에 사이트 도메인을 설정한다. 

나는 로컬에서 테스트할 것이므로 `http://localhost:5173` 으로 설정했다. 

 

그리고 이 도메인은 `http://localhost:5173/mypage`처럼 경로를 포함할 수 없다. 

 

 

B. 로그인 코드 작성하기 

1. 로그인 버튼 만들기 

<button style={{ backgroundColor: "#FEE500" }} onClick={clickKaKao}>
    카카오 로그인하기
</button>

 

2. 로그인 버튼 클릭 시 일어날 일을 만들기 

버튼을 클릭하면 카카오 로그인 페이지인 `kakaoAuthURL`가 나와야 해서 그 페이지로 이동을 하게 한다. 

이 페이지로 이동하려면 파라미터로 `클라이언트 아이디`와 `리다이렉트 URI`가 필요하다. 

페이지 이동을 시키는 것은 그 페이지 URL로 GET 요청을 보내는 것과 같다. 

const clickKaKao = () => {
    const KAKAO_CLIENT_ID = import.meta.env.VITE_KAKAO_CLIENT_ID;

    const REDIRECT_URI = "http://localhost:5173/oauth/kakao/callback";
    const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_CLIENT_ID}&redirect_uri=${REDIRECT_URI}`;
    window.location.href = kakaoAuthURL;
};

 

 

여기서 `KAKAO_CLIENT_ID`는 [앱 > 앱 설정 > 앱 > 일반]에 있는 앱 키를 사용한다.

앱 키는 API 호출 시(여기서는 GET 요청 시이다.) 앱 인증을 위해 사용된다고 한다.

 

 

3. 로그인 성공 후 보여줄 callback 화면 만들기 (= redirect URI)

redirect URI에는 인가 코드가 뒤여 붙여져서 나온다고 했다. -> `http://localhost:5173/oauth/kakao/callback?code=56wvd....`

authorization code가 바뀔 때마다 카카오 인증 서버가 보내주는 code를 받고 code만을 추출해서 성공 메시지와 함께 팝업을 띄워준다. 

import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";

const KakaoCallback = () => {
  const [searchParams] = useSearchParams();
  const code = searchParams.get("code"); // URL에서 code 추출

  useEffect(() => {
    if (code) {
      console.log("카카오에서 받은 code:", code);
      alert(`카카오 로그인 성공! \ncode: ${code}`);
    }
  }, [code]);
  return <div>카카오 로그인 중...</div>;
};

export default KakaoCallback;

 

 

 

 

 

결과 화면

 

로그인 버튼 클릭한다. 그러면 카카오 로그인 페이지로 이동된다. 

 

 

카카오 계정을 입력하고 인증을 완료한다. 

 

 

내가 만든 앱인 Webi 에 동의사항을 체크해준다. 

 

 

 

그럼 이제 로그인 성공! 

authorization code 를 받아오는 것까지 구현했다. 

이걸 이제 나중에 벡엔드에게 보내주면 된다.