Web trial: Build, configure and test the Tutorial App for web

Prev Next

Once you have configured your cloud tenant, you can build and set up the Tutorial app so you can test passkey creation, sign-in, and completing a transaction.

Prerequisites

Before building the Tutorial App for web, please ensure that your development environment includes the following components. You can click through each link to verify if the component is configured correctly:

JDK

Supported versions: 17, 21, 25

IDE

Eclipse IDE for Enterprise Java and Web Developers

Web server

  • Apache Tomcat v11.0

  • Apache Tomcat v10.1

WebAuthn-compliant browsers

  • Mozilla Firefox

  • Google Chrome

  • Apple Safari

See Set up your web development environment for the complete setup instructions.

Build the Tutorial App for web

Import the SDK files

  1. Launch Eclipse and open the workspace you will be using to build the tutorial app.

  2. Go to File > Import.1

  3. In the Import wizard, choose Existing Projects into Workspace under General. Click Next.

  4. In the Import Projects dialog, choose Select root directory and Browse for the folder where you extracted the zip file after downloading the App SDK for web.

  5. Any projects detected will be displayed in the Projects pane.    

    1. If TutorialWebApp (or a similarly named project) is visible, check it.

    2. Leave Copy projects into workspace unchecked.

  6. Click Finish.

  7. Before you proceed, confirm that the project appears correctly in the Project/Package Explorer.2

  8. Go to src > com > noknok > tutorial and open JWTExternalAuthServlet.java.

  9. Update the following constants:    

    • Set TENANT to your tenant name3

    • Set KEY to the JWT signing key4

    • Set ISSUER to the JWT issuer5

  10. Export the WAR file.    

    1. Right-click on your web project folder in the explorer and select Export from the pop-up menu.

    2. Select WAR file in the Export window and click Next.

    3. Select the project you wish to export and specify where the new file should be saved.

    4. Click Finish.

1 Do not use File > Open Projects from File System(...) or File > New > Project(...) as the existing project metadata will not be recognized and the project structure may be duplicated or broken.

2 In case of errors, check if:

  • The correct Java/Server runtime is correctly configured for the project in Project > Properties > Java Build Path.

  • No required libraries are missing in Project > Properties > Java Build Path > Libraries.

3 Your tenant name appears in the portal header.

4,5 See Record the JWT issuer and signing key

Deploy the Tutorial App for web

  1. Open the directory containing the WAR file.

  2. Once you have verified that the values for TENANT, KEY and ISSUER are correct, you are ready to deploy the tutorial web app.

  3. Use the command-line interface to copy gwtutorial.war to the Tomcat home directory.    

    • Unix/Linux:

      cp gwtutorial.war {{TOMCAT_HOME}}/webapps/
    • Windows:        

      Copy-Item gwtutorial.war {{TOMCAT_HOME}}\webapps\
  4. Start Tomcat.

Configure the Tutorial App for web

  1. Open a browser and navigate to http://localhost:8080/gwtutorial/configure.

  2. You will see the Web App Configuration dialog.

  3. First, make sure that Deployment is set to cloud.

  4. Next, fill in the following fields:    

    • Tenant: [your tenant name]

    • Server Host: https://staging.digipassone.com

  5. Click Apply Configuration.

The configuration is stored in the browser. If you test the tutorial web app on a different browser or close the current one, the settings will be lost.

Test the Tutorial App for web

  1. Using the same browser, access the web tutorial app at http://localhost:8080/gwtutorial.

  2. Feel free to enter any Username in the field provided, but make sure to enter "noknok" as the Password.

  3. Follow the instructions for registering a passkey.

  4. Log out and test your new passkey by:    

    1. Logging in

    2. Completing a transaction

  5. Once you have completed testing, delete the authentication method and verify that the passkey is no longer available.

Please contact digipassone-trial@onespan.com if you are unable to complete these steps.