카카오 간편 로그인 구현하기

카카오 간편 로그인 구현하기

✅카카오 로그인 절차

1. 인가 코드 발급: 사용자가 카카오 로그인 버튼 클릭 → 카카오 서버로 인가 코드 요청 → 사용자 인증 및 동의 후, 카카오가 인가 코드를 서비스에 리다이렉트.
2. 토큰 발급: 서비스가 인가 코드로 카카오에 토큰 발급 요청 → 카카오는 서비스에 사용자 토큰 발급.
3. 회원 확인 및 등록: 서비스가 사용자 토큰으로 사용자 정보 요청 → 회원 여부 확인 후, 필요시 회원 등록 → 서비스 로그인 처리.
4. 서비스 로그인: 서비스가 세션 발급 → 사용자 클라이언트에서 로그인 완료 및 서비스 화면으로 이동.

위를 바탕으로 카카오 소셜 로그인을 구현해보자.

1. 앱 등록하기

아래 링크로 들어가 애플리케이션을 추가한다.

https://developers.kakao.com/console/app

2. REST API 키 저장하기

난 백엔드가 아닌 제공된 API로 데이터를 저장하기 문에 제공된 API를 통해 앱 등록을 해주었음.

3. redirectUri 설정하기

🤔redirectUri 설정해야 하는 이유

1. 클라이언트 애플리케이션의 URL 인증 후 사용자를 리디렉션할 URL 예) http://localhost:3000/oauth/callback과 같이 설정할 수 있다. <<애플리케이션의 인증 결과를 처리할 엔드포인트
2. OAuth 제공자 설정
   • Kakao: Kakao Developers Console에서 OAuth 설정 시 redirectUri를 등록할 수 있다.

🥰코드에서 redirectUri 사용하기

인증 요청을 보낼 때 redirectUri를 설정해야 한다.
일반적으로 인증 요청을 시작할 때 클라이언트 애플리케이션에서 redirectUri를 설정하고, 인증 제공자가 이 URI로 리디렉션한다.

4. env 설정

NEXT_PUBLIC_KAKAO_REST_API_KEY=위에서 설정했던 REST API KEY
NEXT_PUBLIC_KAKAO_SIGNUP_REDIRECT_URI=http://localhost:3000/signup/oauth/kakao
NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI=http://localhost:3000/login/oauth/kakao

5. URL 생성하기

위에서 설정했던 env를 통해 아래의 URL 을 설정해준다.
로그인 URL 맨 뒤에 &prompt=login을 붙이면 로그인할 때마다 카카오톡 로그인 창이 뜸!!

export const KAKAO_SIGNUP_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_SIGNUP_REDIRECT_URI}&scope=profile_nickname,account_email`;
export const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI}&scope=profile_nickname,account_email&prompt=login`;

6. 간편 회원가입 구현

const KAKAO_SIGNUP_REDIRECT_URI =
  process.env.NEXT_PUBLIC_KAKAO_SIGNUP_REDIRECT_URI;

export default function Kakao() {
  const router = useRouter();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const handleOAuthCallback = async () => {
      const { code } = router.query;

      if (code) {
        try {
          const signUpData: SignUpRequest = {
            nickname: randomNickname(),
            redirectUri: KAKAO_SIGNUP_REDIRECT_URI,
            token: code as string,
          };

          const signInResponse: SignInResponse = await SignUpUser(
            'kakao',
            signUpData,
          );

          console.log('회원가입 성공:', signInResponse);
          notify('success', '회원가입 성공!');

          router.push('/activities');
        } catch (error) {
          console.error('회원가입 오류:', error);
          if (axios.isAxiosError(error) && error.response) {
            notify('error', error.response.data.message);
            if (error.response.data.message === '이미 등록된 사용자입니다.')
              router.push('/login');
          } else {
            notify('error', '회원가입 중 알 수 없는 오류가 발생했습니다.');
          }
        } finally {
          setLoading(false);
        }
      }
    };

    handleOAuthCallback();
  }, [router.query]);

  return <div>{loading && <Loading />}</div>;
}

닉네임을 받아오려 했는데 API로 그 값을 보내면 자꾸 잘못된 인가 코드라는 오류가 발생해 회원가입 시 랜덤으로 닉네임을 부여하였다. ㅠㅠ!

7. 간편 로그인 구현

const KAKAO_LOGIN_REDIRECT_URI =
  process.env.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI || '';

export default function Kakao() {
  const router = useRouter();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const handleOAuthCallback = async () => {
      const { code } = router.query;

      if (code) {
        try {
          const signInData: SignInRequest = {
            redirectUri: KAKAO_LOGIN_REDIRECT_URI,
            token: code as string,
          };

          const signInResponse: SignInResponse = await signInUser(
            'kakao',
            signInData,
          );
          console.log('로그인 성공:', signInResponse);
          notify('success', '로그인 성공!');

          setCookie('accessToken', signInResponse.accessToken, {
            path: '/',
            secure: true,
            sameSite: 'strict',
          });
          setCookie('refreshToken', signInResponse.refreshToken, {
            path: '/',
            secure: true,
            sameSite: 'strict',
          });
          setCookie('isSocialUser', true, {
            path: '/',
            secure: true,
            sameSite: 'strict',
          });

          router.push('/activities');
        } catch (error) {
          if (
            axios.isAxiosError(error) &&
            error.response &&
            error.response.status === 401
          ) {
            notify('warning', '계정이 없는 경우 회원가입을 진행해 주세요.');
            router.push('/signup');
          }
          console.error('로그인 오류:', error);
          notify('error', '로그인 중 알 수 없는 오류가 발생했습니다.');
        } finally {
          setLoading(false);
        }
      }
    };

    handleOAuthCallback();
  }, [router.query]);

  return <div>{loading && <Loading />}</div>;
}

구현 완.

참고: 개인 개발자 비즈 앱 전환 방법

https://developers.kakao.com/docs/latest/ko/getting-started/app#biz-app-for-individual

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-token

https://developers.kakao.com/docs/latest/ko/kakaologin/common