빠른 시작

정적 프론트엔드는 브라우저용 스토어프론트 키로 사이트를 식별하고, 로그인 이후에는 사용자 토큰을 추가해서 개인화 API를 호출합니다.

1. 기본 값 준비

const API_BASE = 'https://your-site.runmoa.com/api/storefront/v1';
const STOREFRONT_KEY = 'moa_pub_xxxxxxxxx';

브라우저 앱에서는 서버용 비공개 API 키를 사용하지 않습니다.

2. 사이트 정보 조회

const site = await fetch(`${API_BASE}/site`, {
  headers: {
    'X-Runmoa-Site-Key': STOREFRONT_KEY,
    Accept: 'application/json',
  },
}).then((response) => response.json());

3. 상품 또는 콘텐츠 목록 조회

const products = await fetch(`${API_BASE}/products?page=1`, {
  headers: {
    'X-Runmoa-Site-Key': STOREFRONT_KEY,
    Accept: 'application/json',
  },
}).then((response) => response.json());

4. Schoolmoa 로그인 시작

const authConfig = await fetch(`${API_BASE}/auth/schoolmoa-client`, {
  headers: {
    'X-Runmoa-Site-Key': STOREFRONT_KEY,
    Accept: 'application/json',
  },
}).then((response) => response.json());

const redirectUri = `${window.location.origin}/schoolmoa-callback`;

window.location.href =
  `https://www.runmoa.com/login/?redirect_uri=${encodeURIComponent(redirectUri)}` +
  `&client_id=${encodeURIComponent(authConfig.scid)}&lg=kr`;

5. Callback 처리 후 사용자 토큰 저장

const callback = await fetch(`${API_BASE}/auth/schoolmoa/callback`, {
  method: 'POST',
  headers: {
    'X-Runmoa-Site-Key': STOREFRONT_KEY,
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
  body: JSON.stringify({ code }),
});

const { token } = await callback.json();
localStorage.setItem('runmoa_user_token', token);

6. 사용자 API 호출

const token = localStorage.getItem('runmoa_user_token');

const me = await fetch(`${API_BASE}/me`, {
  headers: {
    'X-Runmoa-Site-Key': STOREFRONT_KEY,
    Authorization: `Bearer ${token}`,
    Accept: 'application/json',
  },
}).then((response) => response.json());

7. 결제 흐름

1. 장바구니에 상품 또는 콘텐츠를 담습니다.
2. 로그인 사용자 토큰으로 POST /orders를 호출해 주문을 생성합니다.
3. POST /payments/initialize를 호출해 결제를 시작합니다.
4. PG별 내부 경로를 직접 호출하지 않습니다. 사이트 결제 설정에 맞춰 런모아 서버가 처리합니다.

주의

• 브라우저에는 moa_pub_... 형식의 스토어프론트 키만 넣습니다.
• 상품/콘텐츠 생성, 수정, 삭제는 정적 프론트엔드에서 직접 호출하지 않습니다.
• 사용자별 장바구니, 주문, 마이페이지 API는 사용자 토큰이 필요합니다.