How to: Add a Proxy Module to a Remote Execute

Overview

A Proxy module adds a layer of security to a remote execute. A remote execute in Unqork executes a module behind-the-scenes or at the server-side. While a remote execute increases security, it can still leave your data open to manipulation in the underlying code. A Proxy module ensures your remote execute is fully secure.

What Is a Proxy Module?

A Proxy module sits between your Front-End module and your Remote Execute, or API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. (application programming interface) module. Passing data through a Proxy module force-validates the Front-End module's data after submission. By force-validating, you ensure the data maintains its original form without manipulation.

This how-to guide assumes you have a Front-End module that collects the name, phone number, and email address of your end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product., with Property IDs of name, phone, and email, respectively. Then, an API module to pass the data. To ensure security, you'll add a Proxy module with the same name, phone number, and email address fields as your Front-End module. The only difference is that your Proxy module keeps all these fields hidden.

To begin, you need the following modules already configured:

• A Front-End module with name, phone, and email data fields.

• An API module to perform your necessary remote execute.

Ensure both modules exist in the same application.

Here's how your completed Proxy module looks in the Module Builder:

What You'll Learn

In this article, you'll learn how to add a Proxy module to a remote execute configuration.

What You Need

To set up your Proxy module, you need:

• 3 Panel components

• 1 Text Field component

• 1 Phone Number component

• 1 Email component

• 2 Initializer components

• 1 Plug-In component

• 1 Hidden component

Pre-Configuration

Create an Empty Proxy Module

First, open the application that contains your Front-End and API modules. Here you'll create a new module that acts as your Proxy module. Once created, you'll copy your Front-End module definition into it.

To create your Proxy module:

1.

At the top right of the Application page containing your Front-End and API modules, click + Create New.

2.

In the Module Name* field, enter Proxy Module.

3.

From the Module Type*, drop-down, select  O  Other.

4.

Click Create.

Copy Your Front-End Module

To ensure your Proxy module works as intended, you need to copy your Front-End module into it. Then, hide the name, phone number, and email address fields from the end-user.

To copy your Front-End module definition:

1.

From your application, find your Front-End module and open it in the Module Builder.

2.

At the top right of the Module Builder, click ···.

3.

Select Copy Module Definition. The module definition copies to your clipboard A place on your operating system that stores recently copied content. The clipboard only stores one item at a time..

Paste Your Front-End Module

Next, you'll paste your Front-End module definition to your empty Proxy module.

1.

From your application, find your empty module titled Proxy Module, and open it in the Module Builder.

2.

At the top right of the Module Builder, click ···.

3.

Select Paste Module Definition. The Paste Module Definition modal A modal is a window that appears on top of the content you are currently viewing. displays.

4.

In the Module Definition field, press the Ctrl + V keys (PC) or Cmd + V keys (Mac) on your keyboard to paste the module definition from your clipboard A place on your operating system that stores recently copied content. The clipboard only stores one item at a time..

5.

Click Paste.

Set Up Server Side Execution

A Proxy Module functions one level deeper than your user-facing application. To ensure that your new module is inaccessible in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., you must enable the Server Side Execution Only setting.

1.

At the top right of the Module Builder, click ···.

2.

Select Settings.

3.

Set Server Side Execution Only to  (ON).

4.

Click Save.

Display and Layout Configuration

Configure the Panel Components

These Panel components act as containers for the rest of the components in this example. The panelRequest Panel manages the data carried over from your Front-End module. The panelValidate Panel manages the remote execute trigger. And, the panelResponse Panel manages error handling.

1.

In your Proxy module, drag and drop three Panel components onto your canvas.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter the following for each Panel component:

3.

Save & Close each component as you add it.

Data Field Configuration

Next, you'll add a range of data components to store the name, phone number, and email address details. For this how-to guide, these are the same fields as the ones in your Front-End module, with Property IDs of name, phone, and email. For other use cases, ensure the fields expected in your Front-End module are created in the Proxy module. These data components include a  Text Field, Phone Number, and  Email component.

Configure the Text Field Component

First, configure the Text Field component to hold the end-user's name.

1.

Drag and drop a  Text Field component into the panelRequest Panel component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter name.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Name.

4.

Set Hide Field to  (ON).

5.

Click Save & Close.

Configure the Phone Number Component

First, configure the Phone Number component to hold the end-user's phone number.

1.

Drag and drop a Phone Number component into the panelRequest Panel component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter phone.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Phone.

4.

Set Hide Field to  (ON).

5.

Click Save & Close.

Configure the Email Component

First, configure the Email component to hold the end-user's email address.

1.

Drag and drop a Phone Number component into the panelRequest Panel component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter email.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Email.

4.

Set Hide Field to  (ON).

5.

Click Save & Close.

Validation Configuration

Configure the Initializer Component

Now we'll set up the first of two Initializer components. This first Initializer triggers a Plug-In component that you'll add later.

1.

Drag and drop an  Initializer component into the panelValidate Panel component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter initValidate.

3.

To the left of the component's configuration window, select Actions.

4.

From the Trigger Type drop-down, select New Submission.

5.

In the Outputs table, enter the following:

6.

Click Save & Close.

Configure the Initializer Component

Now, set up the second Initializer component to display an error message if the Plug-In component fails.

1.

Drag and drop an  Initializer component into the panelValidate Panel component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter initError.

3.

To the left of the component's configuration window, select Actions.

4.

From the Trigger Type drop-down, select Manual.

5.

In the Outputs table, enter the following:

6.

Click Save & Close.

Configure the Plug-In Component

Now that you have your Initializer components, add a Plug-In component. The Plug-In component force-validates the data from your Front-End module as it’s transmitted.

1.

Drag and drop a Plug-In component between your  Initializer components in the panelValidate Panel component.

2.

In the Property ID and Label Text fields, enter pluginValidate.

3.

From the Internal Services drop-down, select Execute Module.

4.

From the Module drop-down, select your API module.

5.

In the Inputs table, enter the following:

6.

In the Outputs table, enter the following:

7.

In the Error Trigger field, enter initError.

8.

Click Save.

Error Handling Configuration

Configure the Hidden Component

Next, you'll add a Hidden component to serve as the error handler. This Hidden component populates an error message that only displays to your end-user when your Plug-In component fails.

1.

Drag and drop a Hidden component into the panelResponse Panel component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter resolution.

3.

Click Save & Close.

4.

Save your module.

Lab

You'll find the completed Proxy module use case here: https://training.unqork.io/#/form/646bb2c1291cb4f5dcfa4809/edit.