QR Link Mobile Sign

QR code signature allows signers to make signatures with their own mobile device for sign fields in OZ e-Form on the web.

Benefits

• Strong authentication - A signature is created with the signer's own device

• No mobile app is needed for the signer

• QR code link makes it easy to use

• Secured by time limit

How it works

1. Open 👉 Sample form​

2. Click the signature field. The Create Signature modal will open up.

3. The WEB tab allows you to draw your signature

4. The MOBILE tab allows you to scan a QR code, open the link, and draw a signature with your mobile device.

5. Confirm your signature with the OK button.

6. The Create Signature modal will show the signature you created.

7. Click the OK button again and then finally you will see your signature on the signature field in the e-Form.

Downloads

If you need source files, contact the support team.

Files included:

Base directory: webapps/

File	Description	Location
ajax.js	jQuery AJAX method definition	/oz/edu/qrsign
open-form.html	Open the sample e-form and open the signature modal to get signature	/oz/edu/qrsign
ozviewer.init.js	Set viewer options and launch the viewer	/oz/edu/qrsign
modal.viewer.js	Control UI of the signature modal	/oz/edu/qrsign
form.sign.receiver.js	Get signature data from QRSignServlet and send it to modal.controller.js	/oz/edu/qrsign
modal.controller.js	Put signature data into Signature component	/oz/edu/qrsign
mobile-sign.html	Mobile page for signature pad	/oz/edu/qrsign
mobile.sign.controller.js	Send signature data to QRSignServlet	/oz/edu/qrsign
qrcode.min.js	Library for generating QR Code on the canvas tag	/oz/edu/qrsign
OZSignLib.js	Library for drawing signature on canvas tag	/oz/edu/qrsign
form-page.html	OZ report declared page. This page is for avoiding the conflict of CSS settings.	/oz/edu/qrsign
signature_pad.min.js	e-Form SignPad implementation for HTML5	/oz/edu/qrsign
qrsign.jar	Implements the QRSignServlet.	/oz/WEB-INF/lib
json-simple-1.1.1.jar	The library used in qrsign.jar for JSON parse.	/oz/WEB-INF/lib
membership-qrsign.ozr	sample ozr file	/oz/WEB-INF/repository_files/edu/qrsign

Servlet definitions for QRSignServlet

The following code need to be added to the web.xml file for the servlet to work. The url-pattern needs to be changed accordingly to the desired pattern.

WEB-INF/web.xml

    <servlet>
        <servlet-name>QRSignServlet</servlet-name>
        <servlet-class>QRSignServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>QRSignServlet</servlet-name>
        <url-pattern>/edu/qrsign/sign/*</url-pattern>
    </servlet-mapping>

Configuration

All URL/PATH related variables need to be configured according to your server URL.

The variables to be modified are: TOKEN_URL, MOBILE_SIGN_PATH, and SIGN_DATA_URL. The "http://localhost:8080" will need to be changed to your server hostname or URL.

modal.controller.js

// URL for the request to the servlet for a token. 
const TOKEN_URL = ' http://localhost:8080/qrsign/sign/token';

// Path to the mobile-sign.html file
const MOBILE_SIGN_PATH = 'http://localhost:8080/qrsign/mobile-sign.html';

form.sign.receiver.js

// URL for the request to the servlet for signature data.
const SIGN_DATA_URL = 'http://localhost:8080/qrsign/sign/data'; 

In addition, the OZ viewer parameters need to be modified depending on the server to connect to and the OZR file to load.

ozviewer.init.js

const OZ_SERVLET_PATH = location.origin + '/training_final/server';	// This should be written to fit your OZ server.
const SAMPLE_OZR_FILE_PATH = '/guide/qrsign/membership-qrsign.ozr';     // This should be written to fit your OZR file.