Don’t let company endpoints fall into the wrong hands. 🔒 Keep unauthorized users out with ActiveLock. Try it for free on one device

Set up 2FA on a Wordpress page with TypingDNA Verify

What is 2FA for WordPress?

Two-factor authentication (2FA) for Wordpress is the authentication process that provides an extra layer of security beyond passwords, for your users, that helps defend against account takeover.

Goal

The aim of this tutorial is to lay out the steps for integrating TypingDNA Verify 2FA on a wordpress page. These steps can be used to create a custom plugin. This tutorial is designed for the users of the Wordpress website and not for the administrator of the website.

Intro

In this tutorial we will build a sample page on wordpress that will run TypingDNA Verify 2FA. 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. verify-wordpress-1
  3. Have an account on Wordpress with a business subscription that will allow you to run plugins.

  4. Install the “Insert PHP Code Snippet” plugin on our wordpress platform. https://wordpress.org/plugins/insert-php-code-snippet/

  5. verify-wordpress-3

Configuration of your WordPress 2FA

We will first start by adding the PHP code into a code snippet.

Select the PHPCode Snippet option from the XYZ PHP Code available on the left hand side menu.

verify-wordpress-4

We are going to create the first PHP Code Snippet by selecting the “Add New PHP Code Snippet”.

verify-wordpress-5

Select Tracking Name as verify-button.

In the PHP code section first we will add the content from github: https://github.com/TypingDNA/TypingDNA-Verify-Client/blob/main/php/TypingDNAVerifyClient.php (do not add the first line <?php and the last line ?>).

Now that we have integrated the TypingDNAVerifyClient, 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([
    'email'=> "demo@typingdna.com",
    'language' => "en",
    'mode' => "standard"
]);
            
        

For this demo we are going to use the email address as the root of trust.

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

            
echo "
    <button
        class = 'typingDNA-verify'
        id = 'buttonTyping'
        data-typingdna-client-id=".$typingDNADataAttributes['clientId']."
        data-typingdna-application-id=".$typingDNADataAttributes['applicationId']."
        data-typingdna-payload=".$typingDNADataAttributes['payload']."
        data-typingdna-callback-fn= 'callbackFn'> Verify with TypingDNA
    </button>";
            
        

Select the Create button.

verify-wordpress-6

This code will generate a button that will open the TypingDNA Verify 2FA pop-up window.

Next, navigate to the header section:

verify-wordpress-7

Add the following code at the top of the header:

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

This will help us generate the TypingDNA Verify 2FA pop-up window.

The javascript callbackFn will be called once the TypingDNA Verify 2FA process is completed. So we will add the following code to redirect us to another page with the OTP (one time password) that was generated from the Verify window.

Replace new_page with the link of the new page that we will create later.

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

Next we will create a sample page where we will add the code snippet that we created.

[xyz-ips snippet="verify-button"]

Next we will navigate to the PHP Code Snippet plugin to create another snippet.

The “Tracking Name” will be verify-check.

In the PHP code section first we will add the content from github again: https://github.com/TypingDNA/TypingDNA-Verify-Client/blob/main/php/TypingDNAVerifyClient.php (do not add the first line <?php and the last line ?>).

At the end we will add

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

$response = $typingDNAVerifyClient->validateOTP([
    'email' => "demo@typingdna.com",
    'phoneNumber' => "",
], $_GET['otp']);

print_r($response);
            
        

Next we will create another page that will match the new_page link that we mentioned in the code in the header. We will add the following code to print out the result of the authentication.

[xyz-ips snippet="verify-check"]

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


For the production environment, in order to send OTPs via emails you will need to integrate your Verify 2FA account with SendGrid from the dashboard.

verify-wordpress-2

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

Tell your team there’s a better way to 2FA

Share this message across Slack, email, etc. We even jotted down some of the highlights to make it easier.

Check this out! 🚀 Found a cool way to 2FA our users: TypingDNA Verify 2FA. It authenticates people based on how they type — replacing authenticator apps and OTP codes. Awesome user experience! 🙌 Quick integration too (under 10 mins). And we can try it free with 100 users. What do you think? https://www.typingdna.com/verify

Copy