How to: Add a Proxy Module to a Remote Execute

Estimated Reading Time:  4 minutes

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.

NOTE  Ensure both modules exist in the same application.

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

A static image displaying the complete configuration of the Proxy module 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:

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.

A static image displaying the Create Module modal with Module Name of Proxy Module and the selection of the Other Module Type.

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..

NOTE  Copying a module copies the settings and components in that module. Transforms do not copy. For this example, what copies by default is all you need.

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 you 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).

A static image displaying the Module Details modal and Server-Side Execution Only set 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:

Property ID

Label Text

panelRequest

panelRequest

panelValidate

panelValidate

panelResponse

panelResponse
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 Radio Button component icon 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 Icon Actions.
4. From the Trigger Type drop-down, select New Submission.
5. In the Outputs table, enter the following:

Property ID

Type

 Value

pluginValidate

trigger

GO

NOTE  The Property ID in the Outputs table corresponds to the Plug-In component you'll add in the next section. The Property ID you use in the Outputs table must match the Plug-In component’s Property ID.

A static image displaying the Initializer component's configuration window with the New Submission Trigger Type and Outputs table.

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 Radio Button component icon 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 Icon Actions.
4. From the Trigger Type drop-down, select Manual.
5. In the Outputs table, enter the following:

Property ID

Type

 Value

resolution

value

error

NOTE  The Property ID in the Outputs table corresponds to the Hidden component you'll add later. The Property ID you use in the Outputs table must match the Hidden component’s Property ID.

A static image displaying the Initializer component's configuration window with the Manual Trigger Type and Outputs table.

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 Radio Button component icon 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.

A static image displaying the Plug-In component's configuration window with the Execute Module Internal Service.

5. In the Inputs table, enter the following:

Property ID

Mapping

name

dataName

phone

dataPhone

email

dataEmail

'true'

validate

NOTE  Values in the Property ID column must match the Property IDs of the components copied from your Front-End module. Values in the Mapping column must match the Property IDs with data added, in the format data.PropertyID.

6. In the Outputs table, enter the following:

Property ID

Mapping

resolution

data.resolved.resolution
7. In the Error Trigger field, enter initError.

A static image displaying the Plug-In component's configuration window showing the Inputs and Outputs tables, and the error Error Trigger.

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.