@aurigma/axios-storefront-api-client

Axios API Client for Storefront API service of Customer's Canvas web-to-print system.

Usage no npm install needed!

<script type="module">
  import aurigmaAxiosStorefrontApiClient from 'https://cdn.skypack.dev/@aurigma/axios-storefront-api-client';
</script>

README

Aurigma Customer's Canvas SDK - Storefront API Client

This module is an Axios API client for Storefront API service which is a part of Customer's Canvas web-to-print system. It is supposed that you are familiar with its services and understand how to use its APIs. To learn more about Customer's Canvas and its services, refer the Getting Started section of its documentation.

The API client is automatically generated with NSwag tool. If for any reasons this API client does not work well for you, feel free to generate it yourself using Swagger document published at Customer's Canvas API Gateway.

Pre-requisites

To be able to use this package, you need to meet the following requirements:

  • You must have an account at Customer's Canvas.
  • You need to use it in Javascript\Typescript applications.

For other platforms, see the Backend services article in Customer's Canvas documentation.

Usage

Install it as a regular npm package:

npm install @aurigma/axios-storefront-api-client

NodeJs

Receive an access token through your backend as explained in the documentation and deliver it to your app.

const storefront = require("@aurigma/axios-storefront-api-client");
const axios = require("axios").default;

// You need to create external app in BackOffice with required scopes to receive clientId\clientSecret
// https://customerscanvas.com/dev/getting-started/about-backend-services.html#authorization
const clientId = "";
const clientSecret = "";
const apiUrl = "https://api.customerscanvashub.com/";

const getToken = async (clientId, clientSecret) => {
  const requestConfig = {
    method: "post",
    url: apiUrl + "connect/token",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: new URLSearchParams({
      client_id: clientId,
      client_secret: clientSecret,
      grant_type: "client_credentials",
    }),
  };

  const response = await axios(requestConfig);
  return response.data["access_token"];
};

const token = await getToken(clientId, clientSecret);

And then you can call ApiClients methods with this token:

const config = new storefront.ApiClientConfiguration();
config.apiUrl = apiUrl;
config.setAuthorizationToken(token);

const buildInfoClient = new storefront.BuildInfoApiClient(config);
const buildInfo = await buildInfoClient.getInfo();

const productSpecificationsApiClient =
  new storefront.ProductSpecificationsApiClient(config);
const productSpecifications = await productSpecificationsApiClient.getAll();

Frontend

You should retrieve access token from your backend, how it's explained above.

import {
  ApiClientConfiguration,
  BuildInfoApiClient,
  ProductSpecificationsApiClient,
} from "@aurigma/axios-storefront-api-client";

// A token should be received from your backend
const token = "";
// In general you can use "https://api.customerscanvashub.com" as a base api url.
// But this url may be different for on-premises version of Customer's Canvas
const baseApiUrl = "https://api.customerscanvashub.com";

const config = new ApiClientConfiguration();
config.apiUrl = baseApiUrl;
config.setAuthorizationToken(token);

const buildInfoClient = new BuildInfoApiClient(config);
buildInfoClient.getInfo().then((data) => console.log(data));

const productSpecificationsClient = new ProductSpecificationsApiClient(config);
productSpecificationsClient.getAll().then((data) => console.log(data));

To find out what other clients are available in this module, refer Storefront API Reference.

NOTE: The class name for each client is formed as ClientNameApiClient, e.g. BuildInfo -> BuildInfoApiClient, etc.