How Can I Send Requests to Endpoints Requiring Authentication from the Admin Panel Plugin?

About Authentication from the Admin Panel

Props

In the admin panel plugin, the following values are automatically passed as props. You can use these to log in.
Use the Login::login_challenge endpoint with the login_method parameter set to api_key/signature.

Key	Type
api_key	String
signature	String
sid	String

API

Prepare the following endpoints in the API configured with dynamic access tokens for security:

• Login::login_challenge
  
• Login::token
  

info

While rcms_api_access_token is also created in the admin panel cookies, it is not appropriate to use cookies from the admin panel domain for API domain authentication.
Additionally, cookies have many constraints and changing specifications, such as the use of the SameSite attribute or __Host- prefix, when used across domains. Therefore, we recommend using dynamic access tokens in the admin panel plugin.

Sample Code

By updating the script portion of the code introduced in the document "Adding a Custom Page to Kuroco Management using Admin panel plugin" as shown below, you can enable requests that include dynamic access tokens in custom headers.

Also, adjust the content-fetching endpoint to be included in the same API with dynamic access tokens.

/management-vue-plugin-sample/packages/VueSample/src/pages/VueSample.vue

<script>
import Vue from 'vue';
window.rcmsJS.vue.registerVM(Vue, rcms_js_config.publicPath); // eslint-disable-line
const axios = require('axios').default;

export default {
    components: {},
    props: {
        root_api_url: {
            type: String,
            default: '',
        },
        endpoint: {
            type: String,
            default: '',
        },
        api_key: {
            type: String,
            default: ''
        },
        signature: {
            type: String,
            default: ''
        },
        sid: {
            type: String,
            default: ''
        },
    },
    created: function () { },
    mounted: async function () {
        try {
            // Step 1: Obtain the grant token
            const grantTokenResponse = await axios.post(`${this.root_api_url}/rcms-api/10/login/login_challenge`, {
                api_key: this.api_key,
                signature: this.signature,
                sid: this.sid,
            });
            const grant_token = grantTokenResponse.data.grant_token;

            // Step 2: Obtain the access token
            const accessTokenResponse = await axios.post(`${this.root_api_url}/rcms-api/10/login/token`, {
                grant_token,
            });
            const access_token = accessTokenResponse.data.access_token.value;

            // Step 3: Use the access token to fetch data from the endpoint
            const resp = await axios.get(this.root_api_url + this.endpoint, {
                headers: {
                    'X-RCMS-API-ACCESS-TOKEN': access_token,
                },
            });
            this.items = resp.data.list ? resp.data.list : [];
        } catch (error) {
            //console.error(error);
        }
    },
    data() {
        return {
            items: [],
        };
    },

    computed: {},
};
</script>

Related Documents

• Adding a Custom Page to Kuroco Management using Admin panel plugin