Generating Tokens and Loading the Editor

Applies to: Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · Archived documentation

In addition to general configuration parameters responsible for displaying images, you must pass user-specific parameters: the user ID (representing a folder in your Amazon S3 bucket) and a token within the editor's config.

To generate tokens, the Design Editor provides the following endpoint:

This method accepts the userId=[string] parameter. Here, you must pass a folder in your Amazon S3 bucket.

If successful, the token will appear in the response as follows:

"7FCE96562C0D5CEADDF02A73B4757495"

Now, you can use this token when loading the editor. The following example illustrates how you can generate a token and pass it into the Design Editor.

const userId = "JohnWood";
let response = await fetch(`https://localhost:44500/api/users/${userId}/getToken`, {
    headers: {
        'X-GoogleDriveAPIKey': 'UniqueSecurityKey'
    }
});
            
const token = await response.json();

let product = {
    "surfaces": [{
        "printAreas": [{ "designFile": "invitation" }]
    }]
};

let config = {
    "assetSources": {
        "[source]AmazonS3": {
            "requestParams": {
                "token": token,
                "userId": userId
            }
        }
    }
};

let editor = await CustomersCanvas.IframeApi.loadEditor(
            document.getElementById("editorFrame"), product, config);