問い合わせフォーム連携

import type { APIRoute } from 'astro';
import { cms } from '../../../lib/cms';

export const prerender = false;

// GET /api/forms/:key — フォーム定義をブラウザへ中継する
export const GET: APIRoute = async ({ params }) => {
  const form = await cms.forms.get(params.key!); // キャッシュ禁止。呼ぶたびに新しいトークンが発行される

  return new Response(
    JSON.stringify({
      fields: form.fields,
      turnstileSiteKey: form.turnstile.enabled ? form.turnstile.site_key : null,
      speedCheckToken: form.speed_check_token,
    }),
    { headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' } },
  );
};

type FormField = {
  type: 'text' | 'email' | 'tel' | 'url' | 'textarea' | 'radio' | 'checkbox' | 'select' | 'file';
  name: string;
  label: string;
  required: boolean;
  options?: { label: string; value: string }[] | null;
  placeholder?: string | null;
};

function FieldControl({ field }: { field: FormField }) {
  switch (field.type) {
    case 'textarea':
      return <textarea name={field.name} required={field.required} placeholder={field.placeholder ?? undefined} />;
    case 'select':
      return (
        <select name={field.name} required={field.required}>
          <option value="">選択してください</option>
          {field.options?.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </select>
      );
    case 'radio':
    case 'checkbox':
      return (
        <>
          {field.options?.map((o) => (
            <label key={o.value}>
              <input type={field.type} name={field.name} value={o.value} />
              {o.label}
            </label>
          ))}
        </>
      );
    default:
      return <input type={field.type} name={field.name} required={field.required} placeholder={field.placeholder ?? undefined} />;
  }
}

export function ContactForm({ fields }: { fields: FormField[] }) {
  return (
    <form>
      {fields.map((f) => (
        <div key={f.name}>
          <label>
            {f.label}
            {f.required && ' *'}
          </label>
          <FieldControl field={f} />
        </div>
      ))}

      {/* ハニーポット：人間には見えない位置に置き、常に空欄のまま送信させる */}
      <input
        type="text"
        name="website"
        tabIndex={-1}
        autoComplete="off"
        aria-hidden="true"
        style={{ position: 'absolute', left: '-9999px' }}
      />
    </form>
  );
}

import { ShareDanCmsApiError } from '@sharedan/cms-sdk';

// POST /api/forms/:key — 送信をSDK経由でCMSへ中継する（同じファイルに追記する）
export const POST: APIRoute = async ({ params, request }) => {
  const body = await request.json();

  try {
    const result = await cms.forms.submit(params.key!, {
      values: body.values,
      speedCheckToken: body.speedCheckToken,
      turnstileToken: body.turnstileToken,
      honeypot: { website: body.honeypot?.website },
    });
    return new Response(JSON.stringify(result), { status: 201 });
  } catch (e) {
    if (e instanceof ShareDanCmsApiError) {
      if (e.isRateLimited) {
        return new Response(
          JSON.stringify({ message: `しばらく時間をおいて再度お試しください（${e.retryAfter}秒後）` }),
          { status: 429 },
        );
      }
      if (e.isValidationError) {
        return new Response(
          JSON.stringify({ message: '入力内容をご確認ください', details: e.details }),
          { status: 422 },
        );
      }
      if (e.isBadRequest) {
        return new Response(
          JSON.stringify({ message: '認証に失敗しました。ページを再読み込みしてください' }),
          { status: 400 },
        );
      }
    }
    return new Response(JSON.stringify({ message: '送信に失敗しました' }), { status: 500 });
  }
};

<?php
// cms-proxy.php — 公開APIをサーバー側で中継する薄いプロキシ。
// ブラウザは同一オリジンの本ファイルだけを叩き、X-API-KEY はサーバー側でのみ付与する。
// Node実行環境が無くても、PHPが動く共有ホスティング（さくらのレンタルサーバ等）に
// 静的サイトと一緒に置くだけで動く。

$API_ORIGIN = 'https://api.cms.sharedan.co.jp';   // 公開APIのオリジン
$API_KEY    = getenv('CMS_API_KEY');              // ← 秘匿。環境変数か公開範囲外の設定で渡す
$SITE_CODE  = getenv('CMS_SITE_CODE');

header('Content-Type: application/json; charset=utf-8');

// SDK は baseUrl の配下に /api/v1/... を付けて叩く（PATH_INFO で受ける）
$path   = $_SERVER['PATH_INFO'] ?? '';
$method = $_SERVER['REQUEST_METHOD'];

// 許可リスト（開放プロキシにしない）。フォーム配信・送信・メンテナンスだけ通す。
$ok = ($method === 'GET'  && preg_match('#^/api/v1/forms/[^/]+$#', $path))
   || ($method === 'POST' && preg_match('#^/api/v1/forms/[^/]+/submissions$#', $path))
   || ($method === 'GET'  && $path === '/api/v1/maintenance');
if (!$ok) { http_response_code(404); echo '{"message":"not found"}'; exit; }

$headers = ["X-API-KEY: $API_KEY", "X-SITE-CODE: $SITE_CODE", 'Accept: application/json'];
$ch = curl_init($API_ORIGIN . $path);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
if ($method === 'POST') {
  // JSON はそのまま透過（ファイル添付があるときは $_POST + $_FILES を CURLFile で再構成する）
  curl_setopt($ch, CURLOPT_POSTFIELDS, file_get_contents('php://input'));
  $headers[] = 'Content-Type: application/json';
}
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$res = curl_exec($ch);
http_response_code(curl_getinfo($ch, CURLINFO_RESPONSE_CODE) ?: 502);
echo $res === false ? '{"message":"upstream failed"}' : $res;

import { ShareDanCmsClient } from '@sharedan/cms-sdk';

// baseUrl を「自分のドメイン配下のプロキシ」に向けるだけ。APIキーはブラウザに置かない。
const cms = new ShareDanCmsClient({
  baseUrl: `${location.origin}/cms-proxy.php`,
  apiKey: 'via-proxy',    // プロキシがサーバー側で本物の鍵を付与する（ダミーで可）
  siteCode: 'via-proxy',
});

// SDK は /cms-proxy.php/api/v1/forms/contact のように叩く（= プロキシ経由でCMSへ）
const form = await cms.forms.get('contact');
await cms.forms.submit('contact', {
  values,
  speedCheckToken: form.speed_check_token,
});