OneSpan Sign How To: Creating a Simple Java Web Application

Haris Haidary, April 27, 2016
Thumbnail

JavaServer Pages (JSP) technology is webpage scripting language used to create dynamic web content. Servlets, on the other hand, are Java programs that are already compiled, which also creates dynamic web content. In simpler terms, JSP is the inclusion on Java code inside HTML tags while Servlets are the opposite. In this blog, I will show you how to create a simple Java web application using JSP in which your user is required to fill-out a form and subsequently sign a sample contract using OneSpan Sign.

Requirements

You will need to setup your environment to create your Java web application. For this blog, you will need the following: OneSpan Sign’s Java SDK, Eclipse IDE for Java EE Developers, and Apache Tomcat 7.

Downloading the Java SDK

The link below will take you to a page where you can download the Java SDK and also provides a link to some examples of using the Java SDK on GitHub. Unzip the SDK to the location of your choice.

Download Java SDK

Downloading Eclipse IDE for Java EE Developers

For this blog, I will be using the Eclipse IDE for Java EE Developers. If you do not already have it, you can download the community version for free at the link below. You can use any other IDE but everything covered in this blog will be using the Eclipse IDE for Java EE Developers.

Download Eclipse IDE

Download Apache Tomcat 7 Lastly, you will need to download Apache Tomcat 7. Apache Tomcat is an open-source application server that executes Java servlets and renders web pages that include JSP coding. You will need to download the zip file and extract its content to a location of your choice.

 

tomcat

Download Apache Tomcat 7

OneSpan Sign Developer Community

Join the OneSpan Sign Developer Community! Forums, blogs, documentation, SDK downloads, and more.

Join Today

Install Apache Tomcat in Eclipse Development Environment

Before diving into the code, we will need to configure Apache Tomcat successfully in Eclipse. Open Eclipse. In your View window, click on "No servers are available. Click this link to create a new server…".

servers

If you’re unable to see the Servers tab, select from the menu Window > Show View and click on "Other…". From the "Show View" window, select "Servers" under the Server folder and hit "OK".

From the "New Server" window, select "Tomcat v7.0 Server" and click Next. Then, select "Browse…" and browse to the directory where you unzipped Apache Tomcat and click on Finish.

new_server

new_server2

You should see the following in your Servers tab: 

servers2

Creating Your Java Web Application

We can now start creating our simple Java web application. In the menu, select File > New and click on "Project…". Select "Dynamic Web Project" under the "Web" folder and click on "Next".

project

Give your project a name. For example, "JSPTutorial". Also, make sure that the "Target runtime" is indeed Apache Tomcat 7.0. Click on "Next" twice and in the "Web Module" window, select "Generate web.xml deployment descriptor" and click on "Finish".

project2

Java web applications use a deployment descriptor file to determine how URLs map to servlets. You can find the web.xml file in the "WEB-INF" folder. If you open your web.xml file, you will see a "welcome-file-list". A welcome file is the file that is invoked automatically by the server, if you don't specify any file name. By default, the server looks for the welcome file in following order:

  1. welcome-file-list in web.xml
  2. index.html
  3. index.htm
  4. index.jsp

If none of these files are found, server renders 404 error.

webxml

Now that our project is created, let’s create our first JSP file. Right-click on the "WebContent" folder in the "Project Explorer" and select New > JSP File. Name your JSP file "index.jsp" and click on "Finish".

jsp

Go ahead and copy the code below in your index.jsp file.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Form</title>
</head>
<body>
<h3>Please fill-out the following form:</h3>
<div style="border:1px solid #D0D0D0;width:400px;padding:10px;">

    <form method = "POST" action="ESLCreation.jsp">
        First Name: <input type="text" name="firstName" value="">
        <br>
        Last Name : <input type="text" name="lastName" value="">
        <br>
        Email Address : <input type="text" name="emailAddress" value="">
        <br>
        Company : <input type="text" name="company" value="">
        <br>
        Address : <input type="text" name="address" value="">
        <br>
        City : <input type="text" name="city" value="">
        <br>
        State : <input type="text" name="state" value="">
        <br>
        Zip : <input type="text" name="zip" value="">
        <br>
        Country : <input type="text" name="country" value="">
        <br>
        Phone Number : <input type="text" name="phoneNumber" value="">
        <br>
        Policy Number : <input type="text" name="policyNumber" value="">
        <br>      
        <hr>       
        <input type="submit" value="Submit">
    </form>

</div>

</body>
</html>[/code]

The HTML code above will create your form where the user is required to fill-out his information. Upon clicking the submit button, the user will be redirected to the "ESLCreation.jsp" page. 

Since you don’t have that page in your project, yet, go ahead and create a new "ESLCreation.jsp" file in your "WebContent" folder and copy the following code.

 

<%@ page import="com.esl.example.ESLPackageCreation" %>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Form Processing</title>

</head>

<body>

  <h3>Thank you for completing the form! Please sign the document below:</h3>

  <%

    String firstName = request.getParameter("firstName");

    String lastName = request.getParameter("lastName");

    String emailAddress = request.getParameter("emailAddress");

    String company = request.getParameter("company");

    String address = request.getParameter("address");

    String city = request.getParameter("city");

    String state = request.getParameter("state");

    String zip = request.getParameter("zip");

    String country = request.getParameter("country");

    String phoneNumber = request.getParameter("phoneNumber");

    String policyNumber = request.getParameter("policyNumber");

     

    String packageId = ESLPackageCreation.createPackage(firstName, lastName, emailAddress, company, address, city, state, zip, country, phoneNumber, policyNumber);

    

    String sessionToken = ESLPackageCreation.createSessionToken(packageId);

  %>

   

   <iframe src="https://sandbox.e-signlive.com/access?sessionToken=<%=sessionToken%>" width="1000" height="700"></iframe>

      

</body>

</html>

The first line specifies a list of packages or classes for use in the JSP as the Java import statement does for Java classes. It is typically not recommended to put all your logic in your JSP page. More on this, later.

<%@ page import="com.esl.example.ESLPackageCreation" %>

The request.getParameter() methods extract the data sent by posting from an HTML form. This method always returns a String value.

String firstName = request.getParameter("firstName");

The createPackage() and createSessionToken() methods come from “ESLPackageCreation” class, that we will create later. The first method creates your package using the information from the HTML form and the second method creates the session token required to build the signing ceremony URL to embed in an Iframe. Notice that all Java code in a JSP page is in between “<%” tags.

String packageId = ESLPackageCreation.createPackage(firstName, lastName, emailAddress, company, address, city, state, zip, country, phoneNumber, policyNumber);

    

String sessionToken = ESLPackageCreation.createSessionToken(packageId);

Next, you will need to reference the OneSpan Sign Java SDK. Browse to the location where you unzipped the Java SDK and copy the JAR files. Then, in your “Project Explorer”, right-click on your “lib” folder under WebContent > WEB-INF and select “Paste”.

Now, let’s create our “ESLPackageCreation” class. In your “Project Explorer”, right click-on “src” under “Java Resources” and select New > Package. Name your package “com.esl.example” and hit “Finish”.

jsp

In your package, create a new Java class called “ESLPackageCreation”. Go ahead and copy the following code:

public class ESLPackageCreation {

     

    private static String CUSTOM_ID = "Signer";

    private static String API_KEY = "your_api key_here";

        private static String BASE_URL = "https://sandbox.e-signlive.com/api";

 

    public static String createPackage(String firstName, String lastName, String emailAddress, String company, String address, String city, String state, String zip, String country, String phoneNumber, String policyNumber) throws FileNotFoundException {

 

        EslClient client = new EslClient(API_KEY, BASE_URL);

 

        InputStream fs = new FileInputStream("DOC_FILE_PATH");

 

        // Build the DocumentPackage object

        DocumentPackage documentPackage = PackageBuilder.newPackageNamed("Java Form Package " + DateTime.now())

 

                // Customize package settings

                .withSettings(DocumentPackageSettingsBuilder.newDocumentPackageSettings().withDecline().withOptOut()

                        .withDocumentToolbarDownloadButton()

 

                        // Customize the signing ceremony settings

                        .withCeremonyLayoutSettings(CeremonyLayoutSettingsBuilder.newCeremonyLayoutSettings()

                                .withoutGlobalNavigation().withoutBreadCrumbs().withoutSessionBar().withTitle()))

 

                // Define the insured first and last name

                .withSigner(SignerBuilder.newSignerWithEmail(emailAddress).withCustomId(CUSTOM_ID)

                        .withFirstName(firstName).withLastName(lastName).withCompany(company))

 

                // Define sender

                .withSigner(SignerBuilder.newSignerWithEmail("[email protected]").withCustomId("Sender")

                        .withFirstName("Haris").withLastName("Haidary").withTitle("Technical Evangelist")

                        .withCompany("eSignLive"))

 

                // Define the document

                .withDocument(DocumentBuilder.newDocumentWithName("Form").fromStream(fs, DocumentType.PDF)

                        .enableExtraction()

                        .withInjectedField(FieldBuilder.textField().withName("first_name").withValue(firstName))

                        .withInjectedField(FieldBuilder.textField().withName("last_name").withValue(lastName))

                        .withInjectedField(FieldBuilder.textField().withName("address").withValue(address))

                        .withInjectedField(FieldBuilder.textField().withName("city").withValue(city))

                        .withInjectedField(FieldBuilder.textField().withName("state").withValue(state))

                        .withInjectedField(FieldBuilder.textField().withName("zip").withValue(zip))

                        .withInjectedField(FieldBuilder.textField().withName("country").withValue(country))

                        .withInjectedField(FieldBuilder.textField().withName("phone_number").withValue(phoneNumber))

                        .withInjectedField(FieldBuilder.textField().withName("company").withValue(company))

                        .withInjectedField(FieldBuilder.textField().withName("email").withValue(emailAddress))

                        .withInjectedField(FieldBuilder.textField().withName("policy_number").withValue(policyNumber))

 

                ).build();

 

        // Issue the request to the e-SignLive server to create the

        // DocumentPackage

        PackageId packageId = client.createPackage(documentPackage);

        client.sendPackage(packageId);

 

        return packageId.toString();

    }

 

    public static String createSessionToken(String packageId) {

        EslClient client = new EslClient(API_KEY, BASE_URL);

 

        SessionToken sessionToken = client.getSessionService().createSessionToken(packageId, CUSTOM_ID);

        //System.out.println("Session token: " + sessionToken.getSessionToken());

 

        return sessionToken.getSessionToken();

    }

}

Make sure to replace the api key and document file path placeholders with your own values.

Running Your Project

You are now ready to run your Java web application. Right-click on your project in the "Project Explorer" and select Run As > Run On Server. Then, hit "Finish".

runonserver

Next, you should be able to see your form in Eclipse. Go ahead and fill-out some sample information and click on "Submit".

form

Finally, you should be re-directed to the following page below where the signing ceremony is embedded in an Iframe and the document ready to be signed.

sign

You can find the complete project on the Developer Community Code Share section, here.

If you have questions regarding this blog or anything else concerning integrating OneSpan Sign into your application, visit the developer community forums: https://developer.onespan.com. That's it from me. Thank you for reading! If you found this post helpful, please share it on Facebook, Twitter, or LinkedIn. You can find all of my previous blogs by going to my author page.

Haris Haidary
Junior Technical Evangelist
LinkedIn | Twitter