This topic describes how you can configure the Google Drive web service (GDWS) to communicate between the Design Editor and Amazon S3.
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:
To run this service, create a pool with the NetworkService identity and add a website to the Sites list in IIS Manager.
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.
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);