Phone Number Verification through Web Form Application

Hi Questetra users! I’m Hatanaka, Questetra’s CTO.

We have created a Workflow App for the web application form in which verification is performed on the entered email address.

How to Utilize Receive Task (Form) – Email Address Verification through Webform Application

And then we will set up a deadline on the web form.

How to Utilize Receive Task (Form) – Set a Deadline for Application Form

Today, we are going to ask applicants to enter their phone number in addition to that. We will also implement verification on the phone number.

The Workflow diagram so far is as follows.

1. The applicant enters an email address at the Start Event (Form).
2. An email is sent to the address entered at #1 to inform the URL of #3 below.
3. The applicant enters the rest of the information at the Receive Task (Form).
4. The Human Task is as an appendix.

The lower half that is split by the AND gateway is for processing the deadline on the web form.

We are going to revise it to do the following:

1. An applicant enters an email address and a phone number at the Start Event (Form).
2. An email is sent to the address entered at #1 to inform the URL of #4 below.
3. A phone call is made to the number entered at #1 to inform of the verification code to be entered at #4 below.
4. The applicant enters the verification code and the rest of the information in the Receive Task (Form).
5. The Human Task is as an appendix.

We will incorporate the mechanism described in the previous article Automatically Making a Phone Call in the Middle of a Workflow.

Automatically Making a Phone Call in the Middle of Workflow

First, arrange the Data Items. Those starred items are Data Items that will be added.

Referring to the mechanism in Automatically Making a Phone Call in the Middle of a Workflow, I added:

• [Phone number]: Phone number of the applicant. It will be the destination of the verification phone call.
• [API Key]: Used in the Receive Task (Webhook). It will be a part of the callback URL.
• [callback url]: The URL for callback when Twilio succeeds in connecting a call.

In addition to these, I added:

• [Verification code]
• [Verification code (Retention at server)]

The latter is a number which is dynamically generated by Questetra and informed to the applicant. The former is the number which is entered by the applicant at the Receive task (Form). By matching both numbers, we confirm the existence of the applicant’s phone number.

The Workflow diagram is as follows.

The “Phone call outgoing” section surrounded by the red rectangle is the part I have added. That part is a copy of the Workflow App I created in the previous blog post.

For the Verification code generator Step that is at the top of the red-rectangle, the Random Number Generator add-on is used.

Random Number Generator

Please refer to the following for importing add-ons.

M415: Adding an Auto-Step to be Used for Business Process Definition

The settings are as follows. It generates a random number between 0 and 99 and saves it in the Verification code (Retention at server) Data Item.

I have omitted explanations of the settings in “callback url calculation” and the Throwing Message Intermediate Event (HTTP).
At the callback url calculation Step it calculates the URL of the Receive Task (Webhook) below.
Set the Throwing Message Intermediate Event (HTTP) to call Twilio’s Voice API Call.
Please make these settings referring to the previous blog post.

Next, the settings of the Receive Task (Webhook), which returns the contents of the call responding to Twilio’s callback.
It must be configured to tell the verification code.

<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Say voice="alice" language="en-US">Thank you for applying.</Say>
    <Say voice="alice" language="en-US">The verfication code is</Say>
    <Say voice="alice" language="en-US">#{data['8']}</Say>
    <Say voice="alice" language="en-US">です。</Say>
    <Say voice="alice" language="en-US">Your verfication code is</Say>
    <Say voice="alice" language="en-US">#{data['8']}</Say>
</Response>

#{data['8']} is for retrieving Verification code (Retention at server).
Concerning the content of TwiML specified in the response, they principally recommend playing a recording for a fixed part (using the <Play> tag), and using the speech engine (using the <Say> tag) only for parts which dynamically vary.

Some may say that if I specialize in mobile phone numbers, SMS is enough rather than a phone call. Maybe it would be stylish if the applicant can choose either SMS or call? Regarding that improvement, I will try someday.

That’s it for today.