Using the Google Drive Web Service

Configuring the Web Service

Open the Web.config file and find the AppSettings section:

<configuration>
    <appSettings>
        <add key="ApiSecurityKey" value="UniqueSecurityKey" />
        <add key="CorsAllowOriginDomains" value="*" />
        ...
        <!-- Amazon S3 Configuration -->
        <add key="S3.BucketName" value="YourS3bucket"/>
        <add key="S3.Region" value="us-east-2"/>
        <add key="S3.PreviewBucketName" value="YourS3bucketForPreviews"/>
        <add key="S3.PreviewRegion" value="us-east-2"/>
        <add key="S3.Secret" value="UniqueUserSecret"/>
        <add key="S3.AccessKey" value="UserAccessKey"/>
        <add key="PreviewGeneratorServiceEndpoint" value="https://{YourDesignEditorInstance}/api/RemoteSource/GetPreview"/>
    </appSettings>
    ...
</configuration>

Here, you can specify the following parameters:

• ApiSecurityKey - a secret key, which you send as X-GoogleDriveAPIKey in request headers to retrieve images.
• CorsAllowOriginDomains - restricts the use of your Amazon S3 images to pages hosted only on listed domains. The "*" default value allows access from any domain.
• S3.BucketName and S3.PreviewBucketName - the names of your S3 buckets - for assets and their previews.
• S3.Region and S3.PreviewRegion - AWS Regions for your buckets.
• S3.Secret - the user's Secret access key.
• S3.AccessKey - the user's Access key ID.
• PreviewGeneratorServiceEndpoint - an endpoint that GDWS calls to generate image previews. If you defined S3.PreviewBucketName and S3.PreviewRegion in this configuration, GDWS saves the preview images to this S3 bucket as soon as they are generated. In this case, the next time the Asset Manager requests them to display, they will be fetched from this bucket.

Running the Google Drive web service

To run this service, create a pool with the NetworkService identity and add a website to the Sites list in IIS Manager.

Defining the Asset Source

Now that you have set up and run GDWS, you can define the Amazon S3 source for the Asset Manager as follows:

{
    "assetSources": {
        "[source]AmazonS3": {
            "type": "RemoteSource",
            "url": "https://gdws.example.com/"
        }
    },
    "widgets": {
        "AssetManager": {
            "tabs": [{
                "name": "Amazon",
                "assetSourceInstance": "[source]AmazonS3"
            }]
        }
    }
}

In this example of clientConfig.json, we only specified the URL to the deployed instance of GDWS. To learn how to fine-tune this asset source, you can refer to The Asset Manager topic.

In addition to the parameters responsible for displaying images, you must pass the user ID (representing a folder in your bucket) and a token in the editor's config. The following section describes how you can generate and pass tokens.

Generating a Token

GET /api/users/{userId}/getToken

URL param: userId=[string] - a user ID that represents a folder in your S3 bucket.

Success response:

"7FCE96562C0D5CEADDF02A73B4757495"

Example of usage:

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);

See Also

Manual

• Amazon S3 Assets
• The Asset Manager