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.

<!DOCTYPE html>
<?php session_start()?>
<html lang="en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">PHP - Simple Login With Captcha</h3>
                <hr style="border-top:1px dotted #ccc;"/>
                <div class="col-md-3">
                        <h5>Default user</h5>
                        <h5>Username: admin</h5>
                        <h5>Password: admin</h5>
                </div>  
                <div class="col-md-6">
                        <form action="" method="POST">
                                <div class="form-group">
                                        <label>Username</label>
                                        <input type="text" name="username" class="form-control" required="required"/>
                                </div>
                                <div class="form-group">
                                        <label>Password</label>
                                        <input type="password" name="password" class="form-control" required="required"/>
                                </div>
                                <h3>Solve Captcha</h3>
                                <center><img src="captcha.php" /></center>
                                <br />
                                <br />
                                <div class="form-group">
                                        <input type="text" class="form-control" name="captcha" required="required"/>
                                </div>
                                <?php include 'login.php'?>
                                <center><button name="login" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> login</button></center>
                        </form>
                </div>  
        </div>
</body>
</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

<?php
        if(ISSET($_POST['login'])){
                $username = $_POST['username'];
                $password = $_POST['password'];
                $captcha = $_POST['captcha'];
                
                if($username == "admin" && $password == "admin"){
                        if($_SESSION['captcha'] == $captcha){
                                echo "<center><label class='text-success'>Login successfully</label></center>";
                        }else{
                                echo "<center><label class='text-danger'>Invalid captcha!</label></center>";
                        }
                }else{
                        echo "<center><label class='text-danger'>Invalid username or password</label></center>";
                }
        }
?>

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

<?php
        session_start();
        
        $random = rand(1, 9).rand(1, 9).rand(1, 9).rand(1, 9);
        
        $_SESSION['captcha'] = $random;
        
        $captcha = imagecreatefromjpeg("images/captcha.jpg");
        $color = imagecolorallocate($captcha, 0, 0, 0);
        $font = realpath('code.otf');
        imagettftext($captcha, 20, 0, rand(30, 180), rand(20, 70), $color, $font, $random );
        imagepng($captcha);
        imagedestroy($captcha);
?>

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!

Comments

thank you very much, this is…

thank you very much, this is behind such a code, no more google captcha. Let's get rid of this system.kkk

Add new comment

Add new comment
6892 views