TypingDNA Verify 2FA Standard Integration with PHP

Goal

The aim of this tutorial is to lay out the steps for integrating TypingDNA Verify 2FA with a web application that is using PHP as the back end.

Intro

In this tutorial we will build a simple web application that will use PHP as the back end. We will cover all technologies that are needed to run a simple demo on a local machine.

Prerequisites

In order to create a working example of TypingDNA Verify 2FA, the following actions need to be taken.

  1. Create an account on typingdna.com. The Verify 2FA dashboard will provide you with the clientId, secret and applicationId.

  2. Create a localhost environment that will run php applications. For this tutorial we will use XAMPP that can be downloaded from https://www.apachefriends.org/index.html

  3. Setup ngrok. Ngrok creates a public url that will be linked to your localhost environment. For security purposes, TypingDNA Verify 2FA will only run on a public url. Ngrok can be downloaded from the following link: https://ngrok.com/

Configuration

The first step is to create a simple php demo application that will run on ngrok.

We will first create a file called index.php that we will place in the htdocs location of xampp. This folder is usually located here: C:\xampp\htdocs

The index.php file will look like this:

<html>
   <head>
   </head>
   <body>
       <h1> TypingDNA Verify </h1>
   </body>
</html>

Then we will navigate to the ngrok location folder and we will start up the public url with the following command:

ngrok.exe http 80

Once the ngrok link has been created, we will setup this link in our Integration section in the Verify 2FA Dashboard.

Make sure you enter just the domain name and you do not include https or http in the name.

✓ Correct: ee503c799d3f.ngrok.io
✗ Incorrect: https://ee503c799d3f.ngrok.io

We will start up our XAMPP Apache server.

By accessing our ngrok link, in this case https://ee503c799d3f.ngrok.io we will see the following page:

Make sure to always use https otherwise TypingDNA Verify 2FA will not work.

Integration

We will need to download the TypingDNA Verify 2FA PHP client (TypingDNAVerifyClient.php) from the TypingDNA GitHub location that is located here: https://github.com/TypingDNA/TypingDNA-Verify-Client/tree/main/php

We will include this at the start of our index.php file.

<?php
   include("TypingDNAVerifyClient.php");
?>

Next we will initialize TypingDNA Verify 2FA where we will pass as parameters the clientId, secret and applicationId.

$typingDNAVerifyClient = new TypingDNAVerifyClient($client_id, $application_id, $secret);

You will need to initialize the variable with the actual values from the Verify 2FA Dashboard.

Once the variable is initialized we will generate the data attributes required to start TypingDNA Verify 2FA.

$typingDNADataAttributes = $typingDNAVerifyClient->getDataAttributes([\
            'phoneNumber' => "0012025551234",\
            'language' => "en",\
            'mode' => "standard"\
        ]);

For this demo we are going to use a phone number as the root of trust.

Our PHP code will look like this:

<?php
    include('TypingDNAVerifyClient.php');

$typingDNAVerifyClient = new TypingDNAVerifyClient($client_id, $application_id, $secret);

$typingDNADataAttributes = $typingDNAVerifyClient->getDataAttributes([\
        'phoneNumber' => "0012025551234",\
        'language' => "en",\
        'mode' => "standard"\
    ]);
?>

In order to generate the TypingDNA Verify 2FA window we will need to add the following javascript to our code:

<script src ="https://cdn.typingdna.com/verify/typingdna-verify.js">
</script>

Next we will add the button that will start the TypingDNA Verify 2FA window.

<button
       class = "typingdna-verify"
       data-typingdna-client-id= <?php echo $typingDNADataAttributes["clientId"] ?>
       data-typingdna-application-id= <?php echo $typingDNADataAttributes["applicationId"] ?>
       data-typingdna-payload= <?php echo $typingDNADataAttributes["payload"] ?>
       data-typingdna-callback-fn= "callbackFn"
   >Verify with Typingdna
</button>

The javascript "callbackFn" will be called once the TypingDNA Verify 2FA process is completed.

<script>
    function callbackFn(payload)
    {
        window.location.href = "verify_otp.php?otp=".concat(payload['otp']);
    }
</script>

TypingDNA Verify 2FA will return a payload that will contain the one time password that is generated. For simplicity, in this demo we will navigate to another page and we will pass the one time password as a parameter in the link.

The final version of the index.php will look like this:

<?php
   include("TypingDNAVerifyClient.php");

$typingDNAVerifyClient = new TypingDNAVerifyClient($client_id, $application_id, $secret);

$typingDNADataAttributes = $typingDNAVerifyClient->getDataAttributes([\
      "phoneNumber" => "0012025551234",\
      "language" => "en",\
      "mode" => "standard"\
   ]);
?>
<html>
   <script src="https://cdn.typingdna.com/verify/typingdna-verify.js"></script>
   <script>
       function callbackFn(payload)
       {
           window.location.href = "verify_otp.php?otp=".concat(payload["otp"]);
       }
   </script>
   <head>
   </head>
   <body>
       <h1> TypingDNA Verify </h1>
       <button
           class = "typingdna-verify"
           data-typingdna-client-id=<?php echo $typingDNADataAttributes["clientId"]?>
           data-typingdna-application-id=<?php echo $typingDNADataAttributes["applicationId"] ?>
           data-typingdna-payload=<?php echo $typingDNADataAttributes["payload"]?>
           data-typingdna-callback-fn= "callbackFn"
           >Verify with Typingdna
       </button>
   </body>
</html>

Next we will look at the verify_otp.php file. First we will initialize our variable just like we did in index.php.

<?php
    include('TypingDNAVerifyClient.php');
    $typingDNAVerifyClient = new TypingDNAVerifyClient($client_id, $application_id, $secret);
?>

In order to validate that the one time password is correct we will use the validateOTP function that will make an API call to the TypingDNA server if the one time password is correct.

$response = $typingDNAVerifyClient->validateOTP([\
    'phoneNumber' => "0012025551234",\
], $_GET['otp']);

Next we will print on the screen the response.

print_r($response);

The final version of the verify_otp.php will look like this:

<?php
    include('credentials.php');
    include('TypingDNAVerifyClient.php');
    $typingDNAVerifyClient = new TypingDNAVerifyClient($client_id, $application_id, $secret);

$response = $typingDNAVerifyClient->validateOTP([\
        'phoneNumber' => "0012025551234",\
    ], $_GET['otp']);

print_r($response);
?>

Now we can go ahead and test our solution.

Testing

Our initial page will look like this:

We select the Verify 2FA with TypingDNA button and our TypingDNA Verify 2FA window will appear.

After we complete the instruction from the TypingDNA Verify 2FA button we will be redirected to the verify_otp.php page where the result will be displayed.

The success value indicates if it was a valid authentication 1 or if it was invalid 0.

For the production environment, in order to be able to send SMS OTPs you will need to integrate with Twillio in the Verify 2FA dashboard. First log in to your Twillio account and then click on the following button from the dashboard:

For more support, contact us at support@typingdna.com.