Static TokenによるAPIアクセス制限の方法

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

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

  • 無し
  • Static Token
  • Dynamic Token
  • Cookie

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

Image (fetched from Gyazo)

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

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

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

Static TokenによるAPIアクセス制限方法

Static TokenによるAPIアクセス制限の方法を説明します。

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

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

Image (fetched from Gyazo)

「セキュリティ」をStaticTokenに変更し、[Save]をクリックします。

Image (fetched from Gyazo)

2.StaticTokenを発行する

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

Image (fetched from Gyazo)

Swagger画面の上部にある 「Generate Static Access Token」 の「Valid Until」より有効期限を設定し、[Generate]をクリックします。

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

以上で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'] = '先ほどコピーしたToken'
    return config
  })
}

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

以上でStatic TokenによるAPIアクセス制限の設定が完了です。

API呼び出しが成功することを確認する

現在Static Tokenによる制限がかかっているので、API利用すると下記のレスポンスが返ってきます。(StatusCode: 401)

{
    "errors": [
        "[GW] Access Token is required"
    ]
}

参考

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。