Live stream set for 2025-05-04 at 14:00:00 Eastern
Ask questions in the live chat about any programming or lifestyle topic.
This livestream will be on YouTube or you can watch below.
Creating Web Form Two Factor Authentication
QR codes are matrix barcodes that can contain alphanumeric and binary data. A popular use of QR codes is to share a link to a website for people with mobile devices.
Multiple tools are available for generating barcodes. Some are command-line only, while others have a GUI.
The OATH Toolkit provides the components needed to build a one-time password authentication application.
An HTML form requests a numeric code send to the OTP client application. The server will verified the user input.
In this tutorial, the Libqrencode library will be used to encode data in a QR code. PHP will be used for the web server and for form handling.
Requirements For TOTP Authenticator Form
Glossary:
GUI
Graphical User Interface allows users to interact with electronic devices through graphic icons and indicators.
2D
Two-dimensional developed, using geometric patterns like rectangles, dots, and hexagons.
Data Matrix
Two-dimensional barcode with uniquely generated patterns of square modules.
Tools
| Name | Description | Example |
|---|---|---|
| Text editor | For creating and editing source code | Apache Netbeans IDE |
| SSH | Secure Shell Client | OpenSSH |
| Shell Access | Access to the command line. | Terminal |
| Name | Description | Example |
Generate TOTP QR Codes Via Libqrencode
# Create Base 32 Encoded Secret #
secret=$(echo edward@ojamboshow.local | base32)
# Create TOTP QR Code #
qrencode -t ANSI256 -o - $(echo otpauth://totp/OjamboShow:edward@ojamboshow.local?secret=${secret}\&issuer=OjamboShow\&algorithm=SHA256\&digits=6\&period=30) -o qrcode.png -t png -s 5
Generate HTML Form
<form action="form.php" method="POST"> <input type="email" name="email" placeholder="Enter Your Email" /> <input type="submit" value="Submit" /> </form>
Generate Form Handler
session_start();
$otp_secret = !empty($_SESSION['otp_secret']) ? $_SESSION['otp_secret'] : NULL;
if ( !empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
// TODO sanitization & validation
$name = $_POST['email'];
$secret = base32_encode($name);
$_SESSION['otp_secret'] = $secret;
$otpauth = "otpauth://totp/OjamboShow:{$name}?secret={$secret}&issuer=OjamboShow&algorithm=SHA256&digits=6&period=30";
shell_exec("qrencode -s 5 -o qrcode.png '{$otpauth}'");
echo <<<HTML
<img src="qrcode.png" alt="2FA Qr Code" />
<p>Scan the QR code and open your OTP Client for Two-Factor aunthectiation (2FA)</p>
<form action="form.php" method="POST">
<input type="text" name="otp" placeholder="Enter Your Code" />
<input type="submit" value="Submit" />
</form>
HTML;
} elseif ( !empty($_POST['otp']) ) {
// TODO sanitization & validation
$encoded = shell_exec("oathtool --totp=sha256 --base32 {$otp_secret}");
if ($encoded == $_POST['otp']) {
echo "You have successfully logged in";
} else {
echo "Try again";
}
} else {
echo "Try again";
}
PHP HTTP Server
# Start PHP Web Server # php -S localhost:8000
Download
The Libqrencode library can be downloaded from Libqrencode Library and installed on your workstation.
The PHP scripting language can be downloaded from PHP and installed on your workstation.
The Gnome Authenticator can be downloaded from Authenticator and installed on your workstation.
The OATH Toolkit can be downloaded from OATH Toolkit and installed on your workstation.
Explanation
- Generate a file with your QR code.
- Test the QR Code on your scanning device such as a smartphone or authenticator application.
- Open the HTML form in your web browser.
- Copy the code from the authenticator application to the form field.
- The form handler will verify the provided code.
Usage
For this tutorial, QR codes were generated for otpauth URI format for TOTP. Authenticator was used to save the issuer generated from the OATH Toolkit. PHP was used for form handling and to run shell commands for OATH Toolkit.
Open Source
Libqrencode is licensed under the terms of the GNU Lesser General Public License (LGPL) version 2.1. The copyleft license comes with strict rules and requirements to ensure the software remains free and open-source. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
OATH Toolkit is licensed under the terms of the GNU Lesser General Public License (LGPL) version 2.0 or later for libraries and the GNU General Public License (GPL) version 3.0 for the tools. These copyleft licenses come with strict rules and requirements to ensure the software remains free and open-source. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
The PHP scripting language is licensed under the PHP License. The permissive license has conditions requiring preservation of copyright and license notices. Redistribution is permitted in source or binary form with or without modifications, consult the license for more specific details.
Authenticator is licensed under the terms of the GNU General Public License (GPL) version 3.0 or later. The copyleft license comes with strict rules and requirements to ensure the software remains free and open-source. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
Conclusion:
Web developers now create their own custom Two-Factor Authentication mechanism using PHP along with OATH Toolkit and Libqrencode. Libqrencode can be used to generate QR codes on your local computer without restrictions. Gnome Authenticator can be used to generate Authentication codes for the web form. PHP can be used for the web server, form handling and running shell commands.
If you enjoy this article, consider supporting me by purchasing one of my OjamboShop.com Online Programming Courses or publications at Edward Ojambo Programming Books or simply donate here Ojambo.com Donate
References:
- Customer Sets Price Plugin for WooCommerce on Ojambo.com
- Learning JavaScript Course on OjamboShop.com
- Learning Python Course on OjamboShop.com
- Learning PHP Course on OjamboShop.com
- Learning JavaScript Paperback on Amazon
- Learning JavaScript Ebook on Amazon
- Learning Python Ebook on Amazon
- Learning PHP Ebook on Amazon
- OjamboServices.com For Custom Websites, Applications & Tutorials