JavaScript Webservice Call

Description

The Webservice part (https://community.logicnets.com/t/g9hxjsz/call-webservice) allows you to perform a web service call and retrieve a response on the server side. However, there are cases in which you would want to perform a web service call on the client side instead. You can do that using JavaScript to send a client-side request to the Webservice framework and get a response back.

This topic walks you through the process of taking the attached example project and modifying it to work with your webservice project and send a client-side request. When you run the example from the logicnet, the system will ask a few questions that are generic and can be easily changed to fit your webservice. Download the example project and import it into your Designer.

Example

Node 30 of the example is a project node with a ‘set_data_object’ part. This part sets the full URL of the endpoint of your webservice call: <url>/<company>/<publish project name>/<endpoint name>. This variable is used throughout the example.

Node 20 of the example is a process node that contains an ‘authentication.external_users’ part that is used for authentication to the server. The target is your <url>/<company>. The system uses the result, called ‘webservice_bearer’ in this instance, in the JavaScript ajax call to the webservice. 

Node 120 contains a ‘redirect’ part used to send all data and parameters via JavaScript to the webservice project. You can add as many parameters as you want. 

Node 130 contains the call to the JavaScript script that is included in the example project. As parameters, you enter the data from the redirect part and the authentication. 

When you test the logicnet or project and click Next, the system triggers the JavaScript call. When you click Next again, the system returns the result and displays it in Node 110. 

Update Settings 

To make sure that the endpoints in the Webservice project can receive the request from the JavaScript client you need to update a few of the settings, as noted below.

Update Security White List

1. On your LogicNets dashboard, navigate to System Configuration. 

   

2. From the Security tab, add the text below to the Content Security Policy setting, making sure you change ‘https://your-site-name’ to the base URL where your webservice is hosted.
   
   default-src 'self'; script-src 'self' www.gstatic.com www.google.com www.googletagmanager.com www.google-analytics.com www.googleadservices.com http://localhost:41666 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' www.google.com 'unsafe-inline' www.google-analytics.com https://googleads.g.doubleclick.net data:; connect-src 'self' www.google-analytics.com www.googletagmanager.com http://localhost:41666 https://your-site-name; frame-src 'self' www.google.com;

Update Authorization Token

1. On your LogicNets dashboard, navigate to Access Management.  

   

2. Go to the Users tab and click new.
3. From the Type dropdown menu, select server to create a new server user. 

   

4. Go to the Groups tab and create a new group.

   

5. Add your newly created user to the group.
6. Go back to the user you created and click modify.
7. Select RS256 signed JWT Web token from the Authentication Method dropdown menu and click Generate new RSA key pair.

   

8. Save the private key. You will need this for the client.

Update the JavaScript Client Server

1. On the LogicNets dashboard, navigate to Access Management.

   

2. Go to the Server connections tab and click new.

   

3. Select Add account manually from the Type dropdown menu.

   

4. In the External instance URL field, enter [<your-site-name>/<company-name>]
5. In the User name field, copy the username that you just create on the server.
6. Select RS256 from the Password type dropdown menu.
7. Copy your private key into the Private RSA Key field.
8. Select Send feedback from the Purpose dropdown menu.