E-sign application integration is a web-based integration that supports all types of web technology. We provide all the essential features, components, and gateway for integrating the SDK with web applications. Following this quick start guide, you can install and initialize e-sign SDK seamlessly.
SDK Integration Steps
Steps to Integrate Web Application with JavaScript SDK:
1.Include JS and CSS file in the header section.
<head>
<title>E- Sign portal SDK</title> <!-- E- Sign portal SDK--> <script type='text/javascript' src='isuSDK.min.js'></script> <link rel="stylesheet" href='isuSDK.min.css'> </head> |
2.The following functions, variables are to be passed to SDK .
function submitForm(e) {
e.preventDefault() var apiusername = document.getElementById("apiusername").value; var username = document.getElementById("username").value; var clientrefid = document.getElementById("clientrefid").value; var token = document.getElementById("token").value; var pass_key = document.getElementById("pass_key").value; var signerName = document.getElementById("signerName").value; var signerReason = document.getElementById("signerReason").value; var signerLocation = document.getElementById("signerLocation").value; var signerMail = document.getElementById("signerMail").value; var signArray = document.getElementById("signArray").value; var clientUrl = document.getElementById("clientUrl").value; var pdfFile = document.getElementById("pdfFile").files[0]; var signImage = document.getElementById("signImage").files[0]; } |
Note:
|
3.Initialize SDK.
isuSDK("#esign").open({
closeButton: true, className: "zoom-and-spin", clientRefId: clientrefid, inputParam: apiusername, token: token, username: username, pass_key: pass_key, signerName: signerName, signerReason: signerReason, signerLocation: signerLocation, signerMail: signerMail, signArray:signArray, clientUrl: clientUrl }); |
4.This sample function enables secure, client-side communication between your web page and the e-Sign SDK, transferring the uploaded PDF and signature image so that the SDK can display and process them for e- signing.
const interval = setInterval(() => {
const iframe = document.querySelector('.isuSDK-modal iframe'); if (iframe && iframe.contentWindow) { clearInterval(interval); const sendFileToIframe = (file, typeKey) => { const reader = new FileReader(); reader.onload = function (event) { if (event.target.readyState === FileReader.DONE) { const arrayBuffer = event.target.result; const blob = new Blob([arrayBuffer], { type: file.type }); const blobUrl = URL.createObjectURL(blob); console.log(blobUrl); // Send message with unique type and file metadata iframe.contentWindow.postMessage({ type: typeKey, blobUrl: blob, fileName: file.name, mimeType: file.type }, "*"); } }; reader.readAsArrayBuffer(file); }; // Send both files if (pdfFile) sendFileToIframe(pdfFile, "LOAD_PDF"); if (signImage) sendFileToIframe(signImage, "LOAD_IMAGE"); } }, 500); } } |
5.This step is for a message event from SDK to detect when the e-signing process has been successfully completed.
window.addEventListener("message", function (event) {
if (event.data === "transactionCompleted") { const ele = document.getElementsByClassName('isuSDK-overlay'); const ele2 = document.getElementsByClassName('zoom-and-spin'); const ele4 = document.getElementsByClassName('isuSDK-modal'); ele[0].remove(); ele2[0].remove(); ele4[0].remove(); } }); |
Steps to generate encrypted token
Prepare an Object with following sample details
{
"client_id": "d86149609e2972fe19403e22d014c7101a4c50f004ba0448e20362ebfbdb90cd42 e4b5fd56d861189bdf7efda25f4e40",
"client_secret": "2207c85437305733a3e6a536f33a248547e34eb876431fa091e8ce35e8475347e575 4f0fcec1b0bf235fa8262676a20b0cd59f21a853eae68b34b0f32eeecbca",
"epoch": "1723005493" //Current Time stamp } |
Encrypt above object using the following key
Key will shared during integration
|
Encryption can be done by the following programming languages as follows:
Encryption code in java:
package com.example.encryp_decryp; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.stereotype.Service; import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax.crypto.SecretKey; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import java.security.SecureRandom; import java.util.Arrays; import org.apache.commons.codec.binary.Base64; import com.example.demo.service.EncryptionService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; @SpringBootApplication public class EncrypDecrypApplication { public static void main(String[] args) { SpringApplication.run(EncrypDecrypApplication.class, args); } } @Service public class EncryptionService { private static final int AES_KEY_SIZE = 256; private static final int AES_BLOCK_SIZE = 16; public String encryptResponse(byte[] responseBody, String key) throws Exception { byte[] iv = new byte[AES_BLOCK_SIZE]; SecureRandom random = new SecureRandom(); random.nextBytes(iv); byte[] decodedKey = Base64.decodeBase64(key); SecretKeySpec secretKeySpec = new SecretKeySpec(decodedKey, "AES"); Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding"); cipher.init(Cipher.ENCRYPT_MODE, secretKeySpec, new IvParameterSpec(iv)); byte[] paddedData = pkcs7Padding(responseBody, AES_BLOCK_SIZE); byte[] encrypted = cipher.doFinal(paddedData); byte[] result = new byte[iv.length + encrypted.length]; System.arraycopy(iv, 0, result, 0, iv.length); System.arraycopy(encrypted, 0, result, iv.length, encrypted.length); return Base64.encodeBase64String(result); } public String decryptRequest(String encryptedString, String key) throws Exception { byte[] byteCipherText = Base64.decodeBase64(encryptedString); byte[] iv = Arrays.copyOfRange(byteCipherText, 0, AES_BLOCK_SIZE); byte[] cipherText = Arrays.copyOfRange(byteCipherText, AES_BLOCK_SIZE, byteCipherText.length); byte[] decodedKey = Base64.decodeBase64(key); SecretKeySpec secretKeySpec = new SecretKeySpec(decodedKey, "AES"); Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding"); cipher.init(Cipher.DECRYPT_MODE, secretKeySpec, new IvParameterSpec(iv)); byte[] decrypted = cipher.doFinal(cipherText); String decryptedString = new String(decrypted).trim(); return rmNoise(decryptedString); } private byte[] pkcs7Padding(byte[] data, int blockSize) { int padding = blockSize - (data.length % blockSize); byte[] padText = new byte[padding]; Arrays.fill(padText, (byte) padding); byte[] paddedData = new byte[data.length + padding]; System.arraycopy(data, 0, paddedData, 0, data.length); System.arraycopy(padText, 0, paddedData, data.length, padding); return paddedData; } private String rmNoise(String data) { for (int i = data.length() - 1; i >= 0; i--) { if (data.charAt(i) == '}') { return data.substring(0, i + 1); } } return data; } } @RestController @RequestMapping("/api") public class EncryptionController { @Autowired private EncryptionService encryptionService; @GetMapping("/encrypt") public String encrypt(@RequestParam String responseBody, @RequestParam String key) throws Exception { return encryptionService.encryptResponse(responseBody.getBytes(), key); } @GetMapping("/decrypt") public String decrypt(@RequestParam String encryptedString, @RequestParam String key) throws Exception { return encryptionService.decryptRequest(encryptedString, key); } }
Encryption code in PHP:
<?php function generateEncryptedTokendata() { // Current epoch timestamp (seconds) $timestamp = time(); // Encryption key (Base64 encoded) $key = 'awrNYcJKripBxUeEkr1IUuk01WVDUwxayfN4ORAQBug='; // Decode the Base64 key $decodedKey = base64_decode($key); // JSON request data $enreq = json_encode([ "client_id" => "AdOZaGcsQqq38Dk5RA4VU1sMbxTeYXtAEPbcobapuu9MhGij", "client_secret" => "VDJMKviTuHO12VAd5e4d7X6nZltrFkWsBlXxPhs2iN5Rmv66JG3KhfMQzGMDRycD", "epoch" => strval($timestamp) ]); // Generate a random 16-byte IV (same as CryptoJS.lib.WordArray.random(16)) $iv = openssl_random_pseudo_bytes(16); // Encrypt using AES-256-CBC with PKCS7 padding $encrypted = openssl_encrypt( $enreq, 'AES-256-CBC', $decodedKey, OPENSSL_RAW_DATA, // get raw binary ciphertext $iv ); // Combine IV + ciphertext $combined = $iv . $encrypted; // Encode to Base64 (same as CryptoJS.enc.Base64.stringify) $encryptedToken = base64_encode($combined); // Print the result echo $encryptedToken . " encrypted token\n"; } // Run the function generateEncryptedTokendata(); ?>
Note: Encrypted token containing Client id, Client secret and epoch timestamp. [Client will get the encrypted data by encrypting client id, client secret ,epoch timestamp using a unique key] |