FlexiCapture Cloud REST API Sample

This sample demonstrates secure data transfer to the server and back, using REST API FlexiCapture Cloud.

To simplify the front-end and back-end connection testing ABBYY Mobile Web Capture distribution provides a FlexiCapture CarLoan sample project for the sample images recognition (sample_fc_integration/fc_project). For testing the sample you should do some configuration first. Below you can find a step-by-step guide through both front-end and back-end configuration.

 Important! For correct module work several .js files are required.

  1. A web-capture.js file is located in the libs/js/ folder of the distribution. By default the sample connects to the file in the index.html page as following:

<script type="text/javascript" src="libs/js/web-capture.js?9935c54df812cca0b198"></script>

Please, make sure that the libs folder is located at the same directory level with the sample folder. Or you may change the path to the web-capture.js file in the index.html page code.

2. Third-party technology libraries are linked explicitly inside the <head> tag:

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/redux@4.0.5/dist/redux.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>.

When developing your project, please, make sure to link these libraries in your code.

Prerequisites

ABBYY Mobile Web Capture integration sample deployment requires installed ABBYY FlexiCapture and a FlexiCapture Cloud account. You should create a new user account for the sample scenario or use an existing one.

See detailed information about installation and managing user accounts in the ABBYY FlexiCapture 12 System Administrator's Help.
See how to set up and use ABBYY FlexiCapture Cloud REST API in the FlexiCapture 12 FlexiCapture Cloud Help.

ABBYY FlexiCapture Cloud set-up

Load the CarLoan project file to ABBYY FlexiCapture Cloud.

Open the Project Setup Station and do the following:

  1. Click File → Open Project... on the main menu of the Project Setup Station.
  2. Update the project to the current ABBYY FlexiCapture version if necessary.
     Note: Update is required for every new ABBYY FlexiCapture version.
  3. Click File → Upload Project to Server... on the main menu of the Project Setup Station.
  4. Specify the following settings:
    1. enter the server URL: https://<LOCATION>.flexicapture.com - for for loading CarLoan project to ABBYY FlexiCapture Cloud
      Please, customize <LOCATION> depending on your Cloud URL.
    2. enter your tenant name
    3. choose "Use server authentication" and specify the login and password of the user account, intended for the integration sample.
  5. Click OK. The project will be uploaded to the server.

Tracking of FlexiCapture projects requires some configuration of the FlexiCapture Administration and Monitoring Console.

Open the Administration and Monitoring Console and go to the Settings section. In the left menu perform the following:

  • on the Projects tab make sure that the CarLoan project was successfully uploaded.
  • on the Users tab find the user account, intended for the integration sample, and open the corresponding page by clicking on the user login.
    In the Permissions section of the user's page enable the Senior Verification Operator and External User roles (See Creating applications using the FlexiCapture REST API interface section of the FlexiCapture 12 FlexiCapture Cloud Help for details about permissions requirements).
    Save the changes.

Creation of a new application using the FlexiCapture REST API interface

For integration implementation you will need an application created via FlexiCapture REST API and connected with the CarLoan project. Create this application, following the steps from the Creating applications using the FlexiCapture REST API interface section of  the FlexiCapture 12 FlexiCapture Cloud Help. Once the application is created, you receive its id and token, which will be required as settings during the integration. See details in the next paragraph.

ABBYY Mobile Web Capture sample deployment

To run the Mobile Web Capture integration sample do the following:

1. Supplement the server/settings.js file with

    • application id and token, intended for the integration sample,
    • the HTTP server URL address, used for API calls
         const module.exports = {
             path: 'client', // relative address to the folder with implemented client side
             port: 3030,
             url: 'https://<LOCATION>.flexicapture.com',
       // HTTP server URL, where <LOCATION> is your API endpoint.
       // Find out your API endpoint at https://flexicapture.com
             id: '<ID>',
       // id of the application in the FlexiCapture Cloud,
       // connected to the sample project in the FlexiCapture Cloud tenant
             token: '<TOKEN>',
       // token of the application in the FlexiCapture Cloud,
       // connected to the sample project in the FlexiCapture Cloud tenant
         };

2. Install the Node.js platform on your computer
Place the license file to the sample_fc_integration/fc_cloud_restAPI/client/libs/js/ folder. Please notice, that the file name should be MWC.ABBYY.License. Rename your license file if necessary.

In terminal/CMD/PowerShell do the following:

    • Navigate to the sample_fc_integration/fc_cloud_restAPI folder
    • Run npm install
    • Run npm start
      The server will be available on http://localhost:3030/car-loan

Now you can capture driver license or load image of this document from gallery on the front-end web-page with a car loan form (sample_fc_integration/fc_cloud_restAPI/client/flexi-capture/index.html) and send the data to the back-end using SUBMIT button. The tasks for processing in cloud should appear on the Processing Server Monitor. When the document is recognized, data are sent back to the front-end and you can see the fields filled automatically.

7/27/2020 11:24:00 AM