Verify Email Address with OTP Web Flow Template

verifyemail0.png

Overview

This Web Flow template has pre-configured components allowing builders to capture and verify user email addresses through a one-time password method. From Activity Builder, this Web Flow can be tailored to provide users with a customized experience.

Email Verification with OTP Web Flow template components

This Web Flow contains two Web Pages with the following components:

Capture Email Page

• Two Label controls, one with the title and a second one with instructions.
• An Email Input control for the user to enter their email address.

• A Verify Button control with two actions

  • A Run Data Flow action that broadcasts a Generate One-Time Password Code Data Flow that creates the verification code.

  • A Navigate to Web Page action leading the user to the next page.

Verify Email Page

• Two Label controls, one with the title and a second one with instructions.

• A Text Input control for the user to enter the verification code.
• A Label indicating the user to enter a valid code in case an invalid one was entered.

• A Submit Button control that runs the Verified Event based on the condition that the code is valid.

• A Resend Button control that triggers two Data Flows:

  • A Generate One-Time Password Code Data Flow that creates the verification code.

  • A Verification Code Send Email Data Flow that sends the code to the user via email.

• A Change Email Button control with a Navigate to Web Page action that takes the user to the first page again so that the email address can be changed.

Web Flow Variables and Inputs

This Web Flow also contains the following configuration Variables:

verifyAB.png

These Variables can be set from Journey Builder or builders can have other Variables determine these parameters.

Web Page Variables

This Web Flow has the following Variables saving the information and choices of the user in its Web Pages:

Capture Email Page

Text

• verification_code

Email

• email

Verify Email Page

Text

• input_code

Email

• user_email

Boolean

• code_invalid

DateTime

• code_expiration

Data Flows

This Web Flow includes two Data Flows that can be seen from Connection Builder.

Generate One-Time-Password Code

This Data Flow is run by the Verify and Resend buttons and generates a one time password code based on the length that is provided as an input.

Inputs

• length: length of the one time password code

Outputs

• code: the randomly generated code based off of the length provided

Verification Code Send Email

This Data Flow is run by the Submit and the Resend buttons. It sends the user the verification code that is generated from the Generate One-Time-Password Data Flow.

Inputs

• user_email: email of the user to send the code to

• verification_code: code that is generated from the Generate One-Time-Password Data Flow

Events

In Journey Builder, the application’s path can be extended by adding an action or a node to the Journey following the Verified Event.

Use Cases

• Allow app builders to capture and verify email addresses with a one-time password through the app.