[Question Cloud] 회원가입 만들기 (3)

드디어 회원가입의 마지막인 소셜 회원가입을 구현해보았다. 사실 소셜 회원가입은 구현해두면 로그인에도 같이 써먹을 수 있기 때문에 register 폴더 하위에 넣지 않고 따로 분리해주었다.

Redirect 화면 라우팅

로그인에도 재사용하기 위해 분리

 

1. 카카오톡 간편 가입하기 버튼 클릭 시 카카오 로그인 화면 호출하기

아래 이미지에서 카카오톡 간편 가입하기 버튼을 누르면 handleKakaoLogin() 함수를 통해 카카오 로그인 페이지를 호출할 수 있도록 해주었다.

  const handleKakaoLogin = () => {
    if (KAKAO_API_KEY && KAKAO_REDIRECT_URI) {
      const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`;
      window.location.href = kakaoAuthUrl;
    }
  };

 

2. 인가코드를 서버에 전송하고 응답받기

로그인 후 url 파라미터에 code 값을 파싱하여 accountType과 함께 서버에 넘겨줌으로 아래와 같은 Response를 받을 수 있다.

"use client";

import React, { useEffect } from "react";
import { useSearchParams } from "next/navigation";
import { useOAuthApi, SimpleAlarmDialog } from "@/shared";
import { useNavigator, useUserSession } from "@/hooks";
import { useDialogContext } from "@/providers";

const KakaoRedirect = () => {
  const searchParams = useSearchParams();
  const code = searchParams.get("code");
  const accountType = "KAKAO";

  const { userLogin } = useUserSession();
  const { handleNavigate } = useNavigator();
  const { dialogOpen, dialogClose } = useDialogContext();

  const { mutate: kakaoCallback, data: kakaoCallbackData, error: kakaoCallbackError } = useOAuthApi();

  // code 값이 있다면 서버로 API 요청하기
  useEffect(() => {
    if (code) {
      kakaoCallback({ accountType, code });
    }
  }, [code, kakaoCallback]);

  // 요청한 API에 대한 응답 기반 적절한 처리
  useEffect(() => {
    if (kakaoCallbackData) {
      // 1. 이미 가입한 사용자라면 로그인 진행
      if (kakaoCallbackData.isRegistered === true) {
        const accessToken = kakaoCallbackData.authenticationToken.accessToken;
        const refreshToken = kakaoCallbackData.authenticationToken.refreshToken;
        userLogin({ accessToken, refreshToken });
      }
      // 2. 아직 가입하지 않은 사용자라면 회원가입을 진행해달라는 Dialog와 함께 회원가입 화면으로 이동 
      else if (kakaoCallbackData.isRegistered === false) {
        dialogOpen();
      }
    }
  }, [kakaoCallbackData, dialogOpen, userLogin]);

  useEffect(() => {
    if (kakaoCallbackError) {
      dialogOpen();
    }
  }, [dialogOpen, kakaoCallbackError]);

  return (
    <>
      {kakaoCallbackError && (
        <SimpleAlarmDialog
          message={kakaoCallbackError.message}
          onClose={() => {
            dialogClose();
            handleNavigate(`/`);
          }}
        />
      )}
      {kakaoCallbackData && !kakaoCallbackData.isRegistered && (
        <SimpleAlarmDialog
          message={"회원가입을 진행해주세요"}
          onClose={() => {
            dialogClose();
            handleNavigate(`/register/kakao?registerToken=${kakaoCallbackData.registerToken}`);
          }}
        />
      )}
    </>
  );
};

export { KakaoRedirect };

 

결과 화면

 

이미 카카오쪽에 로그인을 진행한 상태라서 중간에 로그인하는 부분이 생략되었다. 원래 아래와 같이 로그인하는 화면과 동의하는 화면이 떠야한다.

 

또한, 일반 이메일 가입에는 비밀번호를 기입하는 부분이 필요하지만, 소셜 로그인 같은 경우 비밀번호를 사용하지 않기 때문에 소셜 회원가입을 진행하는 경우 닉네임, 이메일, 전화번호만 입력할 수 있도록 수정해주었다.

 

다음 게시글에서는 accessToken, refreshToken을 이용해 세션을 유지하는 방법을 고려하여 가입한 이메일로 로그인하는 기능과 카카오 계정으로 로그인하는 로그인 기능을 만들어보겠다.