Working with user data

• 4-5 minutes to read

This topic dwells on how Design Editor handles user accounts and login sessions initiated on the host site. Technically, the Design Editor does not require deep integration with the authentication system of the host site, as it acts only as a web-to-print editor. All it needs is to receive product settings from the e-commerce module, display the product template in the editor, let the end user personalize it, and then, when the user is done with changes, return the personalized product details back to the website. The website is responsible for extracting product settings and passing them on to the editor. Also, the website handles output from the editor and stores the customized product details among the order attributes.

User Identifiers

The Design Editor only deals with login sessions once. It needs a way to differentiate uploaded files and personalized products so that a user does not have access to content belonging to someone else. To get around this, the website has to initialize the Design Editor with a unique user identifier. The web-to-print editor should associate personalized products with the same user identifier to specify that they were created by the corresponding user. If the user uploads photos to the image gallery when personalizing a print product during the first session, the photos will be available to the user when they return to the website and create another order.

E-commerce platforms always identify user accounts registered in the system by a unique identifier. When integrating the Design Editor, you will need to find the technical documentation for your platform and look up information on how to retrieve the identifier using the platform's API.

In some scenarios, it may be more beneficial to create an identifier for yourself in the code initializing the Design Editor on the website, store it in a custom user attribute in the e-commerce system, and then pass it to the editor. Next time the editor signs in, the code will check if the attribute is already filled with a value and, if so, retrieve and use it as the user's identifier in the Design Editor.

In order to initialize the editor with a user identifier, you should pass it to the loadEditor() method as a part of the editor configuration.

var configuration = {
    userId: "e02e4ced-b56e-caee-4e88-a2482976db73"
};
CustomersCanvas.IframeApi.loadEditor(iframe, product, configuration);

When a user identifier is not specified, the default value is used. To change the default user identifier, use the DefaultUserId parameter in AppSettings.config.

User Data Folders

The Design Editor creates a separate subfolder for each user whose identifier it has ever been initialized with. The path to the folder where all these subfolders are stored is set up by using the UserDataFolder parameter in AppSettings.config. The default value is "..\\userdata", which means that all user subfolders are stored in the userdata folder located one level higher than the web application root. Each user subfolder contains the following:

• ..\userdata\<someUserId>\states\ - the folder contains products created by someUserId user.
• ..\userdata\<someUserId>\images\ - the folder contains images uploaded by someUserId user.

The default user identifier and the folder path where user data is stored are set via the DefaultUserId and UserDataFolder parameters in AppSettings.config as follows:

<appSettings>
...
    <add key="DefaultUserId" value="default" />
    <add key="UserDataFolder" value="..\userdata" />
...
</appSettings>

The UserDataFolder path is relative to the web application root.

Using Design Editor on Public Websites

The Design Editor offers two modes that can be used on public websites: demonstration and anonymous. Both modes allow users to customize a product without authorization. The main difference between modes is the automatic clean-up of user files. In the demonstration mode, the Design Editor automatically cleans up user files, including saved products, while in anonymous mode no files are cleaned up automatically.

Let us discuss both modes in detail.

Anonymous Mode

The anonymous mode allows users to customize products without authorization. The editor in this mode treats each session as belonging to a unique user. So, on a public website it allows keeping user files separated, preventing a user from accessing another user's images and products.

The usual workflow using the anonymous mode is as follows:

1. An anonymous user customizes a product.
2. The user continues working with the previously customized product as many times as they want.
3. The user signs in or signs up and orders the product. Your system updates an authentication token and calls the setUserId method to set a user identifier and move user files to this user's folder.
4. The system calls the Editor.finishProductDesign method and gets the hi-res output URLs.

To activate the anonymous mode, set the AnonymousModeEnabled parameter to True in AppSettings.config.

<appSettings>
...
    <add key="AnonymousModeEnabled" value="True" />
...
</appSettings>

Demonstration Mode

The demonstration mode allows users to play with the editor. It does not require user authorization, and it prevents your system from overfilling with user files. The editor in demo mode treats each session as belonging to a unique user. So, on a public website it allows for keeping user files separated, preventing a user from accessing another user's images and products.

To activate the demonstration mode, set the DemoModeEnabled parameter to True in the AppSettings.config file.

<appSettings>
...
    <add key="DemoModeEnabled" value="True" />
...
</appSettings>

Important

Do not use the demonstration mode for real orders. In this mode user files, including hi-res output, saved products, proof images, etc. are cleaned up automatically after the session ends. So, if a user saved a customized product when the system was in demo mode and wants to order it later, it may be impossible: the customized product may be deleted already.