CP 호스팅 로그인 페이지

자기 로그인 UI를 직접 만들고 싶지 않을 때, 사용자를 auth.cp-platform.com 의 로그인 페이지로 redirect 하는 패턴입니다. 통합 코드가 가장 적습니다.

흐름

[User] → click "CP로 로그인"
       ↓
[App] window.location = "https://auth.cp-platform.com/oauth/login?client_id=...&redirect_uri=..."
       ↓
[CP-Auth] 로그인 페이지 (Google/Kakao/Email 버튼)
       ↓
[User] 인증 완료
       ↓
[CP-Auth] redirect → your-app.com/auth/callback?code=...&state=...
       ↓
[App BE] POST /oauth/token → 토큰 받음

코드 (SDK 기반)

npm i git+https://github.com/Copark-Dev/cp-auth-sdk.git#v0.5.2

Step 1 — 로그인 버튼

import { CpAuthClient } from "@cp-platform/auth-sdk";
 
const cp = new CpAuthClient({
  authUrl: "https://auth.cp-platform.com",
  productOrigin: "https://your-app.com",
  clientId: "cp_xxxxx",
  redirectUri: "https://your-app.com/auth/callback",
});
 
<button onClick={() => cp.startOAuth("google")}>CP로 로그인</button>

startOAuth 가 PKCE code-verifier 를 생성·저장하고 auth.cp-platform.com 으로 redirect.

Step 2 — Callback 페이지

import { CpAuthClient } from "@cp-platform/auth-sdk";
 
const cp = new CpAuthClient({ /* 동일 config */ });
 
// /auth/callback?code=...&state=... 에서
const { code, codeVerifier } = cp.consumeCallback(window.location.search);
 
await fetch("/api/auth/token", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ code, codeVerifier }),
});
window.location.href = "/dashboard";

Step 3 — 백엔드 토큰 교환

@cp-platform/auth-sdk/server 의 CpServerClient 사용. 자기 도메인 로그인 Step 2 코드와 동일.

Popup 변형

리다이렉트 대신 팝업을 띄우고 싶다면 redirectUri 를 popup callback URL 로:

const cp = new CpAuthClient({
  // ...
  redirectUri: "https://cp-platform.com/oauth/popup-callback",
});
const { code, codeVerifier } = await cp.startOAuthPopup("google");

백엔드 교환 시 같은 redirectUri 사용. 자세한 시그니처는 SDK Reference.

트러블슈팅

`invalid_request: redirect_uri not registered`

→ redirect_uri 가 콘솔의 allowlist에 없습니다. 콘솔에서 추가하세요.

Callback 페이지가 빈 화면

→ cp.consumeCallback(window.location.search) 호출 위치를 확인하세요. URL이 ?code=...&state=... 형태여야 동작합니다.