AgentSkillsCN

kuroco-api-integration

Kuroco API 设计与实现的最佳实践。使用关键词:“Kuroco API”、“端点配置”、“API 设计”、“认证”、“CORS”、“API 安全”、“登录 API”、“令牌认证”、“Cookie 认证”、“JWT”、“StaticToken”、“X-RCMS-API-ACCESS-TOKEN”、“rcms-api”、“g.kuroco.app”、“流量限制”、“速率限制”、“缓存”、“credentials include”、“fetch”、“axios”、“HTTP 请求”、“401 错误”、“403 错误”、“429 错误”、“认证错误”、“权限错误”、“API 响应”、“pageInfo”、“分页”、“访问令牌”、“刷新令牌”、“grant_token”。适用于有关 API 设计、调用、认证、错误处理等问题时使用。

SKILL.md
--- frontmatter
name: kuroco-api-integration
description: Kuroco API設計・実装のベストプラクティス。使用キーワード:「Kuroco API」「エンドポイント設定」「API設計」「認証」「CORS」「APIセキュリティ」「ログインAPI」「トークン認証」「Cookie認証」「JWT」「StaticToken」「X-RCMS-API-ACCESS-TOKEN」「rcms-api」「g.kuroco.app」「流量制限」「レート制限」「キャッシュ」「credentials include」「fetch」「axios」「HTTPリクエスト」「401エラー」「403エラー」「429エラー」「認証エラー」「権限エラー」「APIレスポンス」「pageInfo」「ページネーション」「アクセストークン」「リフレッシュトークン」「grant_token」。APIの設計、呼び出し、認証、エラー処理に関する質問で使用。

Kuroco API連携パターン

Kuroco HeadlessCMSのAPI設計・実装に関するベストプラクティスを提供します。

ドキュメント参照: /kuroco-docs スキルを使用してKuroco公式ドキュメントを検索・参照できます。

エンドポイント設計

基本構造

KurocoのAPIパスは以下の形式:

code
https://{サイトキー}.g.kuroco.app/rcms-api/{api_id}/{endpoint_path}

例:

code
https://example.g.kuroco.app/rcms-api/1/news
https://example.g.kuroco.app/rcms-api/1/member/login

エンドポイント設定の主要項目

項目説明
パスエンドポイントのURLnews, member/list
モデル操作対象Topics, Member, InquiryForm
オペレーション操作種別list, details, insert, update, delete
キャッシュレスポンスキャッシュ期間86400(1日)
流量制限リクエスト数制限100回/分
認証必須ログイン必須かどうかtrue/false

主要カテゴリとモデル

認証(Authentication)

オペレーション説明メソッド
login_challengeログインPOST
tokenアクセストークン取得POST
logoutログアウトPOST
profileログインユーザー情報取得GET
reminderパスワードリマインダーPOST

コンテンツ(Topics)

オペレーション説明メソッド
list一覧取得GET
details詳細取得GET
insert新規追加POST
update更新POST
delete削除POST
bulk_upsert一括更新POST

メンバー(Member)

オペレーション説明メソッド
listメンバー一覧GET
detailsメンバー詳細GET
insertメンバー登録POST
updateメンバー更新POST

フォーム(InquiryMessage/InquiryForm)

オペレーション説明メソッド
sendフォーム送信POST
list回答一覧GET
details回答詳細GET

セキュリティ設定

認証方式

1. Cookie認証(Webアプリ推奨)

セッションベースの認証。credentials: 'include' が必須。

javascript
// ログイン
const response = await fetch('https://example.g.kuroco.app/rcms-api/1/login', {
  method: 'POST',
  credentials: 'include',  // 必須
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'user@example.com',
    password: 'password123'
  })
})

// レスポンス例
// {
//   "grant_token": "xxxxx",
//   "status": 0,
//   "member_id": 123
// }

注意点:

  • サードパーティCookie問題(Safari等でブロックされる)
  • APIドメインとフロントエンドを**同一ドメイン(サブドメイン違い)**に設定が必要
    • 例: api.example.comwww.example.com

2. トークン認証(モバイルアプリ推奨)

JWTベースの認証。ヘッダーにトークンを付与。

javascript
// トークン取得
const tokenResponse = await fetch('https://example.g.kuroco.app/rcms-api/1/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'user@example.com',
    password: 'password123'
  })
})

const { access_token, refresh_token } = await tokenResponse.json()

// レスポンス例
// {
//   "access_token": {
//     "value": "eyJhbGciOiJS...",
//     "expiresAt": "2024-01-01T12:00:00+09:00"
//   },
//   "refresh_token": {
//     "value": "xxxxxx",
//     "expiresAt": "2024-01-08T12:00:00+09:00"
//   }
// }

// API呼び出し時
const response = await fetch('https://example.g.kuroco.app/rcms-api/1/news', {
  headers: {
    'X-RCMS-API-ACCESS-TOKEN': access_token.value
  }
})

3. StaticToken認証(サーバー間通信)

固定トークンによるAPIアクセス制限。

javascript
const response = await fetch('https://example.g.kuroco.app/rcms-api/1/internal-api', {
  headers: {
    'X-RCMS-API-ACCESS-TOKEN': 'your-static-token-here'
  }
})

設定場所: 管理画面 → API → セキュリティ → StaticToken

CORS設定

管理画面: [API] → [セキュリティ] → [CORS設定]

code
CORS_ALLOW_ORIGINS:
  - http://localhost:3000      # 開発環境
  - https://your-frontend.com   # 本番環境

CORS_ALLOW_METHODS:
  - GET
  - POST
  - PUT
  - DELETE

APIリクエスト制限

制限タイプ説明
None制限なし
GroupAuthグループ権限による制限
MemberCustomSearchAuthカスタム検索条件による制限

キャッシュ戦略

推奨設定

ユースケースキャッシュ期間設定値
静的コンテンツ(ニュース等)1日86400
更新頻度低いコンテンツ1週間604800
リアルタイム性が必要キャッシュなし0
認証が必要なAPIキャッシュなし0

重要: コンテンツ・メンバー等のデータ更新時、キャッシュは自動クリアされます。

キャッシュヘッダー

レスポンスヘッダーで確認可能:

code
Cache-Control: max-age=86400

流量制限

レスポンスヘッダー

code
x-rcms-ratelimit-limit: 100      # 制限数
x-rcms-ratelimit-remaining: 95   # 残りリクエスト数
x-rcms-ratelimit-reset: 60       # リセットまでの秒数

429エラー時の対応

javascript
const response = await fetch(url)

if (response.status === 429) {
  const resetTime = response.headers.get('x-rcms-ratelimit-reset')
  console.log(`流量制限超過。${resetTime}秒後に再試行してください`)
}

API呼び出しパターン

一覧取得(ページネーション付き)

javascript
async function fetchNewsList(page = 1, perPage = 10) {
  const params = new URLSearchParams({
    pageID: page,
    cnt: perPage
  })

  const response = await fetch(
    `https://example.g.kuroco.app/rcms-api/1/news?${params}`,
    { credentials: 'include' }
  )

  const data = await response.json()

  // レスポンス構造
  // {
  //   "list": [...],
  //   "pageInfo": {
  //     "totalCnt": 100,
  //     "perPage": 10,
  //     "totalPageCnt": 10,
  //     "pageNo": 1
  //   }
  // }

  return data
}

フィルター検索

javascript
// filter パラメータで検索
const params = new URLSearchParams({
  filter: 'subject contains "重要"',
  order_by: 'ymd desc'
})

const response = await fetch(
  `https://example.g.kuroco.app/rcms-api/1/news?${params}`,
  { credentials: 'include' }
)

詳細取得

javascript
async function fetchNewsDetail(topicsId) {
  const response = await fetch(
    `https://example.g.kuroco.app/rcms-api/1/newsdetail/${topicsId}`,
    { credentials: 'include' }
  )

  const data = await response.json()

  // レスポンス構造
  // {
  //   "details": {
  //     "topics_id": 1,
  //     "subject": "タイトル",
  //     "contents": "<p>本文</p>",
  //     ...
  //   }
  // }

  return data.details
}

コンテンツ作成

javascript
async function createNews(newsData) {
  const response = await fetch(
    'https://example.g.kuroco.app/rcms-api/1/news/insert',
    {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        subject: newsData.title,
        contents: newsData.body,
        ymd: newsData.date,
        topics_flg: 1  // 1: 公開, 0: 非公開
      })
    }
  )

  return response.json()
}

エラーハンドリング

主要エラーコード

コード説明対応
400リクエストエラーリクエストパラメータを確認
401認証エラーログイン状態・トークンを確認
403権限エラーAPIの権限設定を確認
404リソース未存在パス・IDを確認
429流量制限超過リトライまで待機
500サーバーエラーKurocoサポートに連絡

エラーレスポンス例

json
{
  "errors": [
    {
      "code": "authentication_error",
      "message": "ログインが必要です"
    }
  ]
}

エラーハンドリング実装

javascript
async function apiRequest(url, options = {}) {
  try {
    const response = await fetch(url, {
      credentials: 'include',
      ...options
    })

    if (!response.ok) {
      const errorData = await response.json()

      switch (response.status) {
        case 401:
          // ログイン画面へリダイレクト
          throw new Error('認証が必要です')
        case 403:
          throw new Error('アクセス権限がありません')
        case 429:
          throw new Error('リクエスト制限を超えました')
        default:
          throw new Error(errorData.errors?.[0]?.message || 'APIエラー')
      }
    }

    return response.json()
  } catch (error) {
    console.error('API Error:', error)
    throw error
  }
}

関連ドキュメント

詳細は以下のファイルを参照:

  • docs/tutorials/configure-endpoint.md - エンドポイント設定方法
  • docs/tutorials/login.md - ログイン実装
  • docs/tutorials/restricting-api-access-with-statictoken.md - StaticToken認証
  • docs/reference/endpoint-settings.md - エンドポイント設定項目一覧
  • docs/reference/api-cache.md - APIキャッシュ
  • docs/reference/filter-query.md - フィルタークエリ
  • docs/management/api-security.md - APIセキュリティ設定