FlexiCapture Mobile API Sample

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). Below you can find a step-by-step guide through both front-end and back-end configuration, required for working with this project during the sample testing. Back-end can be represented by ABBYY FlexiCapture Application Server or by ABBYY FlexiCapture Cloud.

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

During the integration, corresponding FlexiCapture login and password are passed from the front-end to the back-end. Therefore, you should create a new user account for the sample scenario or use an existing one.

 Note: In this guide "USER" is used for FlexiCapture user's login and "PASSWORD" for password. Please, change this authentication info to corresponding values.

See detailed information about installation and managing user accounts in the ABBYY FlexiCapture 12 System Administrator's Help.

ABBYY FlexiCapture Application Server set-up

First, load the CarLoan project file to ABBYY FlexiCapture Application Server.

Open the Project Setup Station and do the following:

  1. Click File → Upload Project to Server... 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. Specify the following settings:
    1. enter the server URL: http://localhost
    2. choose "Use server authentication" and specify the login and password of the user account, intended for the integration sample.
  4. Click OK. The project will be uploaded to the local server.

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

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

    1. on the Projects tab make sure that the CarLoan project was successfully uploaded.
    2. 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 Scanning Operator role.
      Save the changes.

2. To avoid problems with CORS, customize the server configuration in the C:/inetpub/wwwroot/FlexiCapture12/web.config file by adding the following:

<cors enabled="true">
<add origin="http://localhost:3030" allowCredentials="true">
   <allowHeaders allowAllRequestedHeaders="true" />
   <allowMethods>
       <add method="HEAD" />
       <add method="OPTIONS" />
       <add method="GET" />
       <add method="POST" />
       <add method="PUT" />
   </allowMethods>
</add>
</cors>

<httpProtocol>
   <customHeaders>
       <remove name="Access-Control-Allow-Origin" />
   </customHeaders>
</httpProtocol>

Edited configuration file requires a specific IIS plugin that you can download and install by the link: https://www.iis.net/downloads/microsoft/iis-cors-module

Restart IIS after the plugin installation to finish the server set-up.

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 → Upload Project to Server... 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. 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.
  4. 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 Scanning Operator role.
    Save the changes.

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

    • required credentials of the user account, 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,
       
        loginFC: 'USER',//login of ABBYY FlexiCapture
      //user account, intended for
      //the integration sample
       
        passwordFC: 'PASSWORD', //password of this account
       
        projectName: 'CarLoan', //the sample ABBYY FlexiCapture project

        url: '<FLEXI_CAPTURE_SERVER>',
        //http://localhost for ABBYY FlexiCapture Application Server
        //https://<LOCATION>.flexicapture.com for ABBYY FlexiCapture Cloud
       
        tenant: ''//define the name of tenant for ABBYY FlexiCapture Cloud
      //for ABBYY FlexiCapture Application Server
      //leave this parameter set to ''
         };
       Note: Backslashes in the login string should be escaped by doubling, i.e. 'FINE\\USER'.

2. Install the Node.js platform on your computer
Place the license file to the sample_fc_integration/fc_mobileAPI/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_mobileAPI folder
    • Run npm install
    • Run npm start
      The server will be available on http://localhost:3030/flexi-capture

Now you can fill in all the fields on the front-end web-page with a car loan form (sample_fc_integration/fc_mobileAPI/client/flexi-capture/index.html), attach images and send the data to the back-end using Submit button.

After the sample scenario is finished and the Submit button is clicked, the tasks should appear on the Processing Server Monitor.

7/27/2020 11:24:00 AM