How to restrict API access with Static Access Token

Kuroco's API security

You have following 4 options for Kuroco's API security:

• None
• Static Access Token
• Dynamic Access Token
• Cookie

You can set "None" if you want to create and test a temporary development API, or if you want to use completely open data.

However, if you set the API security setting to "None", anyone can use the API, and it will be possible to accept API requests indiscriminately from the outside.

If this situation is not as expected, you can use the Static Access Token function to impose some restrictions. This tutorial explains how to apply access restrictions using Static Access Token.

Note:
The character string of StaticToken becomes information that can be viewed from the outside by referring to the network communication of the public site and the description in the JS file. Therefore, if you want to restrict secure information, please do so by restricting login authentication by Dynamic Token / Cookie restriction instead of Static Access Token or by restricting API by browsing group.

How to restrict API access by Static Access Token

This section explains how to restrict API access by Static Access Token.

1. Configure the security of Kuroco API
On any API list page, click [Security].

Change the "Security" to Static Access Token and click [Save]

2.Issue Static Access Token
Click [Swagger UI] on the API list page.

Enter "Valid Until" of "Generate Static Access Token" at the top of Swagger UI page and click [Generate].

Token will be issued. You will need it later so save it.

The configuration on the Kuroco management page is now complete.

3. Install axios-middleware
Next, we will configure on the terminal.
Open the terminal(command prompt) and install axios-middlewareon the site using below command:

npm install --save axios-middleware

4. Add plugin on nuxt.config.js
Add below code in nuxt.config.js.

nuxt.config.js

plugins: ['@/plugins/axios']

5. Create "axios.js" file inplugins directory
Create "axios.js" file in plugins directory and add below code:

/plugins/axios.js

import axios from 'axios'

export default function({ $axios }) {
  $axios.onRequest((config) => {
    config.headers['x-rcms-api-access-token'] = 'TOKEN YOU HAVE SAVED'
    return config
  })
}

info

You can retrieve data by setting a static access token as the value for the key X-RCMS-API-ACCESS-TOKEN in the request header and sending the request.

caution

We are including the Token information in the file, but in actual projects, it is recommended to write it in other files such as .env file.

The configuration of API access restriction by Static Access Token is now complete.

Reference

• API Security
• How to check the API security using Swagger UI