---
title: 静的アクセストークンによるAPIアクセス制限の方法
category: API
weight: 1
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## KurocoのAPIセキュリティについて
KurocoのAPIセキュリティは下記４つから選択できます。
- 無し
- 静的アクセストークン
- 動的アクセストークン
- Cookie

一時的な開発用APIを作成してテストをする場合や、完全にオープンなデータを利用する場合は「無し」を設定できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/6f01c6328767339b23838b18a0940dbd.png)

しかしながら、APIのセキュリティ設定を「無し」にしてしまうと誰でもAPIが利用できるようになり、外部から無差別にAPIリクエストを受け付けることが可能になります。  

この状態が想定通りではない場合、静的アクセストークン機能を利用することである程度の制限をかけることができます。  
今回は静的アクセストークンを利用してアクセス制限をかける方法を説明します。

:::caution
静的アクセストークンの文字列は公開サイトのネットワーク通信やJSファイル内の記述を参照することで外部からも閲覧可能な情報となります。その為、セキュアな情報に対する制限をかけたい場合は静的アクセストークンではなく動的アクセストークン・Cookie制限によるログイン認証やAPIに閲覧グループによる制限をかける形で対応をしてください。
:::

## 静的アクセストークンによるAPIアクセス制限方法
静的アクセストークンによるAPIアクセス制限の方法を説明します。

### 1. KurocoのAPIのセキュリティを設定する
任意のAPI一覧ページから[セキュリティ]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d4def3cf4d3594707701c3052ef09d2b.png)

「セキュリティ」を静的アクセストークンに変更し、[保存する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2bcf006b2a9598350d7a2993419ae44d.png)

### 2.静的アクセストークンを発行する
API一覧ページから[Swagger UI]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/e5b6af39026c75af192d5a329d647591.png)

Swagger画面の上部にある 「静的アクセストークン」 の「有効期限」より有効期限を設定し、[生成する]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7115b681f876864bce2fb483e6b27046.png)

トークンが発行されます。後ほど利用するのでコピーしておいてください。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/06518b76d5caa7a90a1a2809e56ee0d2.png)

以上でKuroco管理画面での操作は完了です。  

### 3. APIアクセスの設定

一例としてNuxt3とNext.jsのコードを記載しています。  

:::info
本チュートリアルでは以下のバージョンでコードを書いています。
- Nuxt3: v3.14.0
- Next.js: v15.0.3 (Using App Router)
:::

まず、チュートリアルで必要なパッケージをインストールします：

<Tabs>
<TabItem value="Nuxt3" label="Nuxt3" default>

Nuxt 3では追加のパッケージのインストールは不要です。

</TabItem>
<TabItem value="Next.js" label="Next.js" default>

```bash title="terminal"
npm install axios
```

</TabItem>
</Tabs>

### 4. 環境変数の設定

<Tabs>
<TabItem value="Nuxt3" label="Nuxt3" default>

```plaintext title=".env"
NUXT_STATIC_TOKEN=YOUR_STATIC_TOKEN_HERE
NUXT_PUBLIC_API_BASE_URL=https://your-api-endpoint.com
```

</TabItem>
<TabItem value="Next.js" label="Next.js" default>

```plaintext title=".env"
STATIC_TOKEN=YOUR_STATIC_TOKEN_HERE
NEXT_PUBLIC_API_URL=https://your-api-endpoint.com
```

</TabItem>
</Tabs>

:::caution 注意
`NUXT_PUBLIC_`/`NEXT_PUBLIC_`プレフィックスがつく環境変数は、クライアントサイドで参照可能になります。詳細は下記のリンクをご確認ください。
- [Nuxt 3 Documents - runtime-config](https://nuxt.com/docs/guide/going-further/runtime-config)
- [Next.js Documents - environment-variables](https://nextjs.org/docs/app/building-your-application/configuring/environment-variables)
:::


### 5. 設定ファイルの更新

<Tabs>
<TabItem value="Nuxt3" label="Nuxt3" default>

```ts title="nuxt.config.ts"
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      staticToken: process.env.NUXT_STATIC_TOKEN,
      publicApiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL
    }
  }
})
```

</TabItem>
<TabItem value="Next.js" label="Next.js" default>

```ts title="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    STATIC_TOKEN: process.env.STATIC_TOKEN
  }
}

module.exports = nextConfig
```

</TabItem>
</Tabs>

### 6. APIのリクエストヘッダーに静的アクセストークンを設定する

<Tabs> 
<TabItem value="Nuxt3" label="Nuxt3" default>

```ts title="/plugins/fetch.ts"
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()

  return {
    provide: {
      customFetch: (url: string, options = {}) => {
        return useFetch(url, {
          baseURL: config.public.apiBase as string,
          headers: {
            'x-rcms-api-access-token': config.public.staticToken as string
          },
          ...options
        })
      }
    }
  }
})
```

:::info
Kurocoビギナーズガイドでは `plugins` の利用方法はカバーしていませんが、この機会に公式ドキュメントでぜひ触れてみてください。
- [Nuxt 3 Documents - plugins](https://nuxt.com/docs/guide/directory-structure/plugins)
:::

</TabItem>
<TabItem value="Next.js" label="Next.js" default>

```ts title="/lib/axios.ts"
import axios from 'axios'

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  headers: {
    'x-rcms-api-access-token': process.env.STATIC_TOKEN
  }
})
```

</TabItem>
</Tabs>

### 7. APIの使用例

<Tabs>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup title="/pages/example.vue"
<script setup>
// 基本的な使用例
const { $customFetch } = useNuxtApp()
const { data: response } = await $customFetch('/api/endpoint');

// 個別にヘッダーを上書きする例
const { $customFetch } = useNuxtApp()
const { data: customData } = await $customFetch('/api/endpoint', {
  headers: {
    'x-rcms-api-access-token': 'different-token'
  }
}
</script>
<template>
  <div>
    <div v-if="pending">Loading...</div>
    <div v-else>
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>
```

</TabItem>
<TabItem value="Next.js" label="Next.js" default>

```tsx title="/app/example.tsx"
// APIクライアントを使用する場合
import { api } from '@/lib/axios'

export default function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const response = await api.get('/api/endpoint')
      setData(response.data)
    }
    fetchData()
  }, [])

  return <div>{/* データの表示 */}</div>
}

// または組み込みfetchを使用する場合
async function getData() {
  const res = await fetch('https://api-endpoint.com/api/endpoint', {
    headers: {
      'x-rcms-api-access-token': process.env.STATIC_TOKEN
    }
  })
  return res.json()
}

// App RouterのServer Componentで使用する場合
export default async function Page() {
  const data = await getData()
  return <div>{/* データの表示 */}</div>
}
```
</TabItem>
</Tabs>

:::info
- Nuxt 3: `useFetch`/`$fetch`を使用し、自動的にヘッダーに静的トークンが付与される例を紹介しました。
- Next.js: `fetch`または`axios`を使用し、リクエストヘッダーに静的トークンを設定する例を紹介しました。
:::

:::tip
- リクエストヘッダーに、`X-RCMS-API-ACCESS-TOKEN` をキーとして静的アクセストークンを設定し、リクエストを送信することでデータ取得が可能です。
:::

:::caution
・プロジェクトにあわせて、実際には `.env` や `.env.local` など別ファイルに記述することをお勧めします。  環境変数のファイルは必ず`.gitignore`に追加し、機密情報をリポジトリにコミットしないようにしてください。
:::

以上で静的アクセストークンによるAPIアクセス制限の設定が完了です。

## 参考
- [API Security](/ja/docs/management/api-security/)
- [Swagger UIを利用して、APIのセキュリティを確認する](/ja/docs/tutorials/how-to-use-swagger-ui/)