통합 로그인 시스템 구축기: 소셜 로그인과 이메일 로그인을 하나로

// views/SocialLoginView.vue
 
<template>
  <!-- ... (레이아웃 마크업 생략) -->
  <SocialProviderButton provider="naver" />
  <SocialProviderButton provider="google" />
  <RouterLink :to="{ path: '/login', query: { ...route.query } }">
    이메일 계정으로 시작하기
  </RouterLink>
</template>
 
<script setup>
// ... (imports 생략)
 
const route = useRoute();
const registerStore = useRegisterStore();
 
onMounted(() => {
  // 쿼리 파라미터(callbackUrl, serviceId, clientId 등)를 스토어에 저장
  registerStore.saveReturnUrl(callbackUrl || redirectUri || "");
  registerStore.saveServiceId(serviceId ?? "");
  // ...
});
</script>

// components/auth/SocialProviderButton.vue (Google 관련 로직)
 
<script setup>
const socialAuth = useSocialAuth();
 
const onAuthSuccess = async (tokenResponse) => {
  await socialAuth.authenticate(props.provider, tokenResponse.access_token);
};
 
const onClickHandler = () => {
  if (isWebView) {
    // WebView 환경: 앱 브리지를 통해 소셜 로그인 시작
    window?.AppBridge?.startSocialLogin(url);
    return;
  }
 
  // 일반 웹 환경: 구글 SDK 동적 로드 → OAuth 팝업 표시
  loadGoogleScript(() => {
    const tokenClient = SocialAuthService.Google.init(
      import.meta.env.VITE_GOOGLE_CLIENT_ID,
      onAuthSuccess,
    );
    tokenClient.requestAccessToken();
  });
};
</script>

// components/auth/SocialProviderButton.vue (Naver 관련 로직)
 
<script setup>
function handleNaverLogin() {
  // 현재 쿼리 파라미터를 콜백 URL에 포함하여 Naver OAuth 초기화
  const naverAuth = SocialAuthService.Naver.init(
    "LOGIN",
    buildQueryString(route.query),
  );
  // 전체 페이지 리다이렉트 (팝업 아닌 플랫폼 권장 방식)
  window.location.href = naverAuth.generateAuthorizeUrl();
}
</script>

// services/socialAuth.js
 
export const SocialAuthService = {};
 
SocialAuthService.Google = {};
SocialAuthService.Google.init = (clientId, callback, errorCallback) => {
  // Google OAuth 2.0 Token Client 초기화 (email, profile 스코프)
  return google.accounts.oauth2.initTokenClient({ client_id: clientId, ... });
};
 
SocialAuthService.Naver = {};
SocialAuthService.Naver.init = (mode, queryParams) => {
  // Naver LoginWithNaverId 초기화 (콜백 URL에 mode, 쿼리 파라미터 포함)
  const naverAuth = new naver.LoginWithNaverId({ clientId: ..., callbackUrl: ..., isPopup: false });
  naverAuth.init();
  return naverAuth;
};

// views/EmailLoginView.vue
 
<script setup>
const authStore = useAuthStore();
const postAuth = usePostAuth();
 
async function onSubmit() {
  // 1. 로그인 요청
  await authStore.login(email, password, rememberMe);
 
  // 2. 이메일 인증 완료 여부에 따라 분기
  if (authStore.userData.isEmailConfirmed) {
    await postAuth.handlePostAuth(); // 공통 후처리
  } else {
    await router.push({ path: "/verify-email", query: route.query });
  }
}
</script>

// views/SignupView.vue
 
<template>
  <EmailVerificationStep v-if="activeStep === 1" />
  <AgeVerificationStep v-else-if="activeStep === 2" />
  <CompletionStep v-else-if="activeStep === 3" />
</template>
 
<script setup>
const registerStore = useRegisterStore();
const { activeStep } = storeToRefs(registerStore);
 
// 본인인증 후 복귀 시 Step 2로 자동 이동
// 가입 완료(Step 3) 후 페이지 이탈 시 스토어 초기화
</script>

// views/auth/SocialCallbackView.vue (Google/Naver 공통 구조)
 
<script setup>
onMounted(async () => {
  // 1. 각 provider별 방식으로 accessToken 추출
  //    - Google: route.query.token
  //    - Naver: SocialAuthService.Naver.initCallback() → accessToken
  const accessToken = extractToken(provider);
 
  // 2. 서비스 리다이렉트 정보가 있으면 스토어에 저장
  if (callbackUrl && serviceId) {
    registerStore.saveReturnUrl(callbackUrl);
    registerStore.saveServiceId(serviceId);
  }
 
  // 3. 모드에 따라 로그인 또는 계정 연동
  if (isLoginMode) {
    await socialAuth.authenticate(provider, accessToken);
  } else {
    await socialAuth.linkAccount(provider, accessToken, false);
  }
});
</script>

// composables/useSocialAuth.js
 
export function useSocialAuth() {
  // ... (setup 생략)
 
  async function authenticate(provider, token) {
    try {
      // 1. 소셜 로그인 시도
      await authStore.loginWithSocial(provider, token);
      // 2. 성공 시 공통 후처리
      await postAuth.handlePostAuth();
    } catch (err) {
      // 3. 실패(미가입) 시 회원가입 플로우 진입
      await handleAuthFailure(provider, token);
    }
  }
 
  async function handleAuthFailure(provider, token) {
    // 소셜 계정 정보(이메일, 닉네임 등) 미리 조회
    const { data } = await authApi.fetchSocialAccountInfo(provider, token);
 
    // ... (중복 가입 등 예외 처리 로직 생략)
 
    // 스토어에 정보 프리필(Prefill) 후 회원가입 페이지 이동
    registerStore.saveProvider(provider);
    registerStore.saveToken(token);
    registerStore.saveEmail(data.email);
 
    router.push("/signup");
  }
 
  return { authenticate /* ... */ };
}

// composables/usePostAuth.js
 
export function usePostAuth() {
  // ... (쿼리 파라미터 추출 로직 생략)
 
  // 메인 실행 함수: 상황에 따라 목적지 결정
  async function handlePostAuth() {
    if (isOAuthRequest()) {
      return await handleOAuthCallback();
    } else if (isServiceRedirect()) {
      return await redirectToService();
    } else {
      return router.replace("/dashboard");
    }
  }
 
  // OAuth 인증 요청 처리
  async function handleOAuthCallback() {
    // 이미 동의한 클라이언트라면 즉시 승인 및 리다이렉트
    if (authStore.hasOAuthConsent(clientId)) {
      return approveOAuthRequest();
    }
    // 동의 이력이 없다면 동의 페이지로 이동
    return await router.push({ path: "/consent", query: route.query });
  }
 
  // ... (approveOAuthRequest, redirectToService 등 세부 구현 생략)
 
  return { handlePostAuth, approveOAuthRequest };
}

// 이메일 로그인
const postAuth = usePostAuth();
await authStore.login(email, password, rememberMe);
await postAuth.handlePostAuth();
 
// 소셜 로그인 (useSocialAuth 내부)
async function authenticate(provider, token) {
  await authStore.loginWithSocial(provider, token);
  await postAuth.handlePostAuth();
}
 
// 회원가입 완료
registerStore.navigateToDestination();
// 내부적으로 postAuth.handlePostAuth()와 동일한 로직

// stores/auth.js
 
export const useAuthStore = defineStore("auth", () => {
  const isAuthenticated = ref(false);
  const userData = ref({
    email: "", nickname: "", linkedProviders: [],
    allowedServices: [], oauthConsents: [], isEmailConfirmed: false,
  });
 
  // 이메일 / 소셜 로그인 모두 동일한 setUserData()로 상태 저장
  async function login(email, password, rememberMe) { ... }
  async function loginWithSocial(provider, token) { ... }
 
  function setUserData(data) {
    isAuthenticated.value = true;
    userData.value = data;
    // sessionStorage에도 동기화
  }
 
  function hasOAuthConsent(clientId) {
    return userData.value.oauthConsents?.includes(clientId);
  }
 
  return { isAuthenticated, userData, login, loginWithSocial, setUserData, hasOAuthConsent };
});

// stores/register.js
 
export const useRegisterStore = defineStore("register", () => {
  // 회원가입 입력 정보 + OAuth/서비스 리다이렉트 파라미터
  const email = ref("");
  const providerToken = ref("");
  const callbackUrl = ref("");
  // ... (기타 상태)
 
  async function submitSignup() { ... }
 
  // 가입 완료 후 저장된 파라미터를 복원하여 원래 목적지로 이동
  function navigateToDestination() {
    // callbackUrl + serviceId → 서비스 리다이렉트
    // clientId → OAuth 파라미터 복원
    // 없으면 → /dashboard
    router.push({ path: "/dashboard", query });
  }
 
  return { ... };
}, {
  // sessionStorage에 저장하여 새로고침 시에도 회원가입 단계 유지
  persist: { storage: sessionStorage, paths: ["email", "activeStep", ...] },
});