静的アクセストークンによるAPIアクセス制限の方法

KurocoのAPIセキュリティについて

KurocoのAPIセキュリティは下記４つから選択できます。

• 無し
• 静的アクセストークン
• 動的アクセストークン
• Cookie

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

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

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

注意

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

静的アクセストークンによるAPIアクセス制限方法

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

1. KurocoのAPIのセキュリティを設定する

任意のAPI一覧ページから[セキュリティ]をクリックします。

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

2.静的アクセストークンを発行する

API一覧ページから[Swagger UI]をクリックします。

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

トークンが発行されます。後ほど利用するのでコピーしておいてください。

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

3. axios-middlewareをインストール

次にターミナルで操作を行なっていきます。
ターミナルを開き、下記のコマンドでaxios-middlewareを対象サイトにインストールします。

npm install --save axios-middleware

4. nuxt.config.jsにプラグインを追記

nuxt.config.jsに以下のコードを追記します。

nuxt.config.js

plugins: ['@/plugins/axios']

5. pluginsディレクトリに「axios.js」ファイルを作成

pluginsのディレクトリに「axios.js」というファイルを作成し、下記を記載します。

/plugins/axios.js

import axios from 'axios'

export default function({ $axios }) {
  $axios.onRequest((config) => {
    config.headers['x-rcms-api-access-token'] = '先ほどコピーしたトークン'
    return config
  })
}

備考

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

注意

今回はファイル内にトークン情報を記述していますが、実際には.envファイルなど別ファイルに記述することをお勧めします。

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

参考

• API Security
• Swagger UIを利用して、APIのセキュリティを確認する