Faster Onboarding with Prove's Angular/Java Starter Kit

The Prove Pre-Fill^® solution enables enterprises to deliver a frictionless and secure onboarding and commerce enablement experience for their customers and stakeholders. This innovative tool streamlines online form completion by auto-filling verified user information, reducing friction, and boosting conversion rates.

Learn how to easily implement the Prove Pre-Fill^® solution with our Angular/Java (Spring Boot) starter kit. This guide provides a solid foundation for integrating this valuable tool into your workflows. At the end, you will have a demo application you can implement into your current user journey.

Using a different tech stack? We also have a starter kit for a React/MaterialUI frontend and Node/Express backend.

Why Prove Pre-Fill^®?

The Prove Pre-Fill^® solution simplifies the user journey while reducing friction. By populating forms with verified data, it eliminates manual entry, reduces errors, and accelerates onboarding. This translates to happier customers and a more efficient process.

This solution uses phone numbers to provide verified digital identities from trusted data providers. The solution quickly fills out the needed information for your consumer during the onboarding process. It uses the user’s phone number and another identifier, like date of birth or the last four digits of the person’s Social Security Number.

PRO Model

The Prove Pre-Fill^® solution leverages Prove’s PRO Model℠ of identity verification which leverages the unique capabilities of mobile devices to create a robust and secure verification process. It includes these three core precepts for establishing identity:

• Possession: Confirm possession of the phone with “something-you-have” authentication.
• Reputation: Check for risks to make sure the phone used for authentication is not in the hands of a bad actor.
• Ownership: Confirm that the consumer's phone number links to them.

Client-Side and Server-Side SDKs

Our starter kit demonstrates best practices for implementing using both client-side and server-side SDKs. This approach ensures a robust and secure integration:

• Client-Side SDK (Angular): Handles user interactions and securely transmits data to the Prove APIs from your web, iOS, or Android application.
• Server-Side SDK (Java): Handles OAuth token management and simplifies the request and response handling for our Prove APIs.

Our flow diagram guides you through each step of the user journey. It highlights the interactions between the UX screens, client-side SDK, and server-side SDK.

‍

Head on over to our developer docs for a deep dive into each of these functions.

Why Do I Need a Starter Kit?

Our starter kits can be a huge time-saver and a valuable resource when integrating our Prove Pre-Fill^® solution. Here are some key benefits:

• Faster Development: It provides ready-made UI elements, sample code, and pre-configured workflows. This eliminates the need to build everything from scratch, allowing you to focus on customizing the app to your specific needs.
• Improved User Experience: It optimizes user flows, leading to a smoother and more intuitive user experience. Our ready-made UI elements can help you build a professional app. They create a consistent user interface, which boosts user engagement and satisfaction.
• Reduced Costs: It significantly reduces development time and costs by leveraging our pre-built components and integrations. A quicker development cycle means you can launch your app sooner, potentially generating revenue earlier.
• Focus on Innovation: It provides a strong base for innovation. You can try different methods and improve your app's design and features.

Using Our Angular/Java Starter Kit

This section will guide you through the initial setup and launch of the starter kit. We'll cover the prerequisites, cloning the repository, and configuring the frontend/backend.

Prerequisites

Acquire Sandbox credentials:

1. Navigate to the Developer Portal.
2. Fill in your information and complete the signup process.
3. Once logged in, navigate to the Prove Pre-Fill® solution and create a new project.
4. On the newly created project, click the ellipsis (3 vertical dots) to access your credentials.
5. Save these credentials (Client ID and Client Secret). You will need them as you set up your backend.

Install Node.js and npm: A recent version of Node.js, which includes npm. You can download it from the official Node.js website or use a package manager like Node Version Manager (NVM).

Install an IDE: An Integrated Development Environment (IDE) like IntelliJ. This tutorial will use this IDE to build the backend.

Download the starter kit:

1. Open your terminal or command prompt.
2. Navigate to the directory where you want to store the project.
3. Clone the starter kit using the following command: git clone https://github.com/prove-identity/prove-prefill-angular-starter-kit-v3.git

Build and Launch the Angular Application

1. Change your directory to the cloned repo: cd prove-prefill-angular-starter-kit-v3
2. Change to the frontend folder: cd frontend
3. Install the libraries required using this command: npm install
4. Run the application: npm run start
5. Open your browser of choice and enter localhost:4200 in the address bar. The following page will display to show the angular app is running correctly:

‍

Build and Launch the Spring Boot Backend

Now that you started the frontend, we need to set up the backend service. This step varies based on the IDE you choose. This tutorial will be running a Spring Boot project in IntelliJ:

• Open the project from the IDE and load the Maven project file pom.xml‍

• Select Open as Project. IntelliJ imports the project and downloads all necessary dependencies.
• Open the application.properties file.

• Update the prove.client-id and prove.client-secret using the values you saved at the beginning

• Navigate to the top navigation bar and select AngularPrefillStarterKitV3Application

• Click the green run button to launch the backend.

Explore the Prove Pre-Fill^® Demo

Now that we have the frontend and backend running, let’s explore the demo! Prove's sandbox environment allows you to experiment with different user behaviors using provided test accounts. We will be using Marcia Longo as our test user:

• Enter the identity information as shown below and click CONTINUE.

• The following screen will display for a few seconds, simulating the possession check of the mobile device:

• You will be redirected to the pre-fill screen where Marcia’s PII will be automatically populated. Click CONTINUE when you are ready to proceed:

• You will arrive at the following screen showing successful completion of the identity verification process:

Next Steps

The Prove Pre-Fill® demo provides a hands-on experience. You've seen how it seamlessly auto-fills forms with verified user data, enhancing the user experience and strengthening security. Among the many benefits of our Prove Pre-Fill® solution are:

• Reduced Friction: Streamlines onboarding and improves conversion rates.
• Enhanced Security: Verifies user identity and protects against fraud.
• Improved Accuracy: Eliminates manual entry errors.
• Increased Efficiency: Automates data collection and reduces processing time.

This starter kit provides a solid foundation for integrating the Prove Pre-Fill® solution into your application using an Angular frontend and Java backend. Explore the source code, learn more about our sandbox environment, experiment with different configurations, and leverage the power of Prove to enhance your onboarding process.

‍

‍

‍Photo by Christopher Gower on Unsplash