PHP - Simple Login With Captcha

Submitted by razormist on Thursday, April 25, 2019 - 21:19.
In this tutorial we will create a Simple Login With Captcha using PHP. This code will only login an user account if the given captcha has been solve. The code use imagettftext() a special tool that create a image data manually and that is where you can store the captcha value as a SESSION data. This is a user-friendly kind of program feel free to modify it. We will be using PHP as a scripting language and interpreter that is used primarily on any webserver including xamp, wamp, etc. It is being use to any famous websites and it has a modern technology that can easily be use by the next generation.

Getting Started:

First you have to download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html. And, this is the link for the bootstrap that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple form for our application. To create the forms simply copy and write it into your text editor, then save it as index.php.
  1. <!DOCTYPE html>
  2. <?php session_start()?>
  3. <html lang="en">
  4.         <head>
  5.                 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
  6.                 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  7.         </head>
  8. <body>
  9.         <nav class="navbar navbar-default">
  10.                 <div class="container-fluid">
  11.                         <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
  12.                 </div>
  13.         </nav>
  14.         <div class="col-md-3"></div>
  15.         <div class="col-md-6 well">
  16.                 <h3 class="text-primary">PHP - Simple Login With Captcha</h3>
  17.                 <hr style="border-top:1px dotted #ccc;"/>
  18.                 <div class="col-md-3">
  19.                         <h5>Default user</h5>
  20.                         <h5>Username: admin</h5>
  21.                         <h5>Password: admin</h5>
  22.                 </div> 
  23.                 <div class="col-md-6">
  24.                         <form action="" method="POST">
  25.                                 <div class="form-group">
  26.                                         <label>Username</label>
  27.                                         <input type="text" name="username" class="form-control" required="required"/>
  28.                                 </div>
  29.                                 <div class="form-group">
  30.                                         <label>Password</label>
  31.                                         <input type="password" name="password" class="form-control" required="required"/>
  32.                                 </div>
  33.                                 <h3>Solve Captcha</h3>
  34.                                 <center><img src="captcha.php" /></center>
  35.                                 <br />
  36.                                 <br />
  37.                                 <div class="form-group">
  38.                                         <input type="text" class="form-control" name="captcha" required="required"/>
  39.                                 </div>
  40.                                 <?php include 'login.php'?>
  41.                                 <center><button name="login" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> login</button></center>
  42.                         </form>
  43.                 </div> 
  44.         </div>
  45. </body>
  46. </html>

Creating the Login Function

This code contains the login function of the application. This code will login a user account if the given captcha is correct. To make this just copy and write these block of codes below inside the text editor, then save it as login.php
  1. <?php
  2.         if(ISSET($_POST['login'])){
  3.                 $username = $_POST['username'];
  4.                 $password = $_POST['password'];
  5.                 $captcha = $_POST['captcha'];
  6.                
  7.                 if($username == "admin" && $password == "admin"){
  8.                         if($_SESSION['captcha'] == $captcha){
  9.                                 echo "<center><label class='text-success'>Login successfully</label></center>";
  10.                         }else{
  11.                                 echo "<center><label class='text-danger'>Invalid captcha!</label></center>";
  12.                         }
  13.                 }else{
  14.                         echo "<center><label class='text-danger'>Invalid username or password</label></center>";
  15.                 }
  16.         }
  17. ?>

Creating the Main Function

This code contains the main function of the application. This code will generate a captcha image when the web page start running. To make this just copy and write these block of codes below inside the text editor, then save it as captcha.php
  1. <?php
  2.         session_start();
  3.        
  4.         $random = rand(1, 9).rand(1, 9).rand(1, 9).rand(1, 9);
  5.        
  6.         $_SESSION['captcha'] = $random;
  7.        
  8.         $captcha = imagecreatefromjpeg("images/captcha.jpg");
  9.         $color = imagecolorallocate($captcha, 0, 0, 0);
  10.         $font = realpath('code.otf');
  11.         imagettftext($captcha, 20, 0, rand(30, 180), rand(20, 70), $color, $font, $random );
  12.         imagepng($captcha);
  13.         imagedestroy($captcha);
  14. ?>
There you have it we successfully created Simple Login With Captcha using PHP. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
Tags
php
Bootstrap
captcha

Comments