Implement passkeys on the Web Tutorial App

Access and record the JWT issuer and signing key

To maintain security for all users, a unique JWT issuer and signing key is generated for each tenant. Your app will need this information to communicate with Digipass S3 Authentication Cloud.

1. Login to the Digipass S3 Authentication Cloud portal.

2. Navigate to Configuration > API Server > External Authentication Plugins and click the modify icon in the JWT Authentication Method row.
   

3. You should see the code that enables the JWT Authentication. Look for the k and issuer keys and record their values.
   

4. You will use this information when you build the tutorial web app.

Set up the Web Tutorial App

Download the Web SDK

1. Locate the Software Downloads tile on the portal.
   

2. Click Web SDK and download the zip file.
   

3. Extract the zip to a local directory.

Import and build the Web Tutorial App

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

2. Go to File > Import.¹

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 in Step 3 of Download the Web SDK.

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.²

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

9. Update the following constants:            

   • Set TENANT to your tenant name³

   • Set KEY to the JWT signing key⁴

   • Set ISSUER to the JWT issuer⁵

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.

¹ 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.

² 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.

³ Your tenant name appears in the portal header.

^4,5 See Access and record the JWT Issuer and signing key.

Deploy the tutorial web app

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 your Authentication Cloud tenant

1. Return to the portal and locate the Authentication Cloud tile. Click Configure Server.
   

2. Navigate to Configuration > Authentication Methods.
   

3. Click FIDO2/WebAuthn and update the RP ID to localhost.⁶ This will allow the tutorial web app to use a Local Identity Provider (IdP) for the initial sign in.⁷
   

⁶ If you are planning to test a native mobile application via the Android and iOS Tutorial apps, you must restore the RP ID to its default: staging.digipassone.com.

⁷ QR code and cross-device sign-in are supported by the Web Tutorial App provided that the RP ID is a public domain.

Allow the tutorial web app to access your tenant

Add to the web client origin allow list

1. Navigate to Configuration > API Server and click Main.
   

2. Click Add an origin, enter http://localhost:8080 and check.
   

Add to the trusted facets list

1. Navigate to Configuration > Apps. Click Add App.
   

2. Choose Browser and click Add.
   

3. In the App window, enter the following details:      

   • Package Name/URL: http://localhost:8080/gwtutorial/

   • App Name: Tutorial Web App

   • Facet ID: FIDO2/WebAuthn

   • FIDO2 Facet ID: http://localhost:8080

   • Adaptive Ruleset: tutorial
     

4. Click Save.

5. Tutorial Web App should now appear in the Apps page with the details you provided.

Configure the tutorial web app

1. Go to http://localhost:8080/gwtutorial/configure. You will see the Web App Configuration dialog.
   

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

3. Next, fill in the following fields:    

   • Tenant: [your tenant name]

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

4. 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 web app

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.

You can now proceed to Adding your Web application to the Digipass S3 Authentication Cloud.