LEARNING

Before you Start

This application will be created using an apache server. You will need to download XAMPP or similar software.

https://www.apachefriends.org/download.html

You will also need to add your application to the Circle Access Console. This can be done through the following guide.

https://circlesecurity.ai/learning/circle-access-360/how-to-add-applications-to-circle-access/

Circle Access

If you haven't already download the Circle Access app on your mobile device.

On your mobile device tap the settings tab, and tap on My e-mails

Tap Add new Email

After entering your email you will be provided an authentication code. Enter the code and tap Process Verification.

You are now ready to set-up 2FA

Set-up

to set-up the application files first navigate to your XAMPP htdocs folder

Default: C:\xampp\htdocs

Create a folder for your project, for this example I created circleaccessdemo

Download the following project files and extract it into the project folder

This contains all of the Circle API functions for creating your 2FA.

In the Includes sub folder open your config.php file you should see the following:

define('APP_NAME', '<>');
define('APP_KEY', '<>');
define('READ_KEY', '<>');
define('WRITE_KEY', '<>');

You will want to replace the <> with the information from your application.

This can be found at

console.circlesecurity.ai

Click on info

And you will see the following:

Creating your MFA

In your project folder create a new file named redirection.php

First we will add the following prerequisites:

<?php
session_start();
include_once ("./includes/circleApi.php");

Next we will add the following variables that will pull the information from the URL used for authenticating the user:

$userID = $_REQUEST["userID"];
$sessionID = $_REQUEST["sessionID"];
$sessionInfo = getSession($sessionID);
$userFromSession = $sessionInfo["data"]["userID"];
$isUserOkay = $userID == $userFromSession;

We will add the following to check that the user has a an email address set-up on the Circle Access App:

 if(!isset($sessionInfo["data"]["hashedEmail"])){
    header("Location: https://internal.circlesecurity.ai/api/circleaccess/missing/?return_url=http://localhost/circleaccessdemo/");
 }

We will then take the Hashed users email.

$userHashedEmailFromSession = $sessionInfo["data"]["userHashedEmails"];

Normally the following steps would utilize a Database. However we will go without it for this example.

Instead we will manually set the email like this:

$myEmail = "nathan@circlesecurity.ai";$myHashedEmail = hashText($myEmail);
$emailExists = false;
foreach ($userHashedEmailFromSession as $sessionHashedEmail) {
    if ($sessionHashedEmail == $myHashedEmail) {
        $emailExists  = true;
        break;
    }
}

Finally we will verify that the user email address matches and redirect them to another page. In this case it's loggedin.php

if ($isUserOkay){
    if($userHashedEmailFromSession == "" || $emailExists == false){
        header("Location: https://internal.circlesecurity.ai/api/circleaccess/missing/?return_url=http://localhost/circleaccessdemo/");
        return;
    }

    $_SESSION["userID"] = $userID; 
    header("Location: loggedin.php");
}
else{
    echo "your real call failed";
}

We will now create the loggedin.php page ourselves. On this page we will verify that the user ID is correct.

<?php

session_start();

if (isset($_SESSION["userID"])) {
 echo "welcome to logged in website";
}

Testing

To verify that everything is working open XAMPP and click start for Apache.

Open your web browser and in the URL enter

http://localhost/<foldername>/

replace the <foldername> with the name of your project folder. You should see something like this.

Click on the button, and you will be given a QR code.

On your mobile device tap Authenticate in the Circle Access app. Then tap Scan to Start.

Scan the QR code for the authentication to start.

Once the authentication has completed your web page will change and you will see the following: