Create a login form using a CAPTCHA

Good afternoon blogger friend, this time I will share how to add captcha to the login form using PHP.

Before heading to the main tutorial I want to explain a little what the capt is and what is the purpose of the capt.



According to Wikipedia "CAPTCHA or Captcha is a form of response-response test used in computers to ensure that answers are not generated by a computer. This process usually involves a computer (server) that asks a user to complete a test simple computer that can be generated and assessed by the computer.Because other computers cannot solve CAPTCHAs, any user who can provide the correct answer will be considered a human, therefore this test is sometimes referred to as the back-to-back test, because it is managed by the machine for humans, the opposite of the standard Turing test which is usually managed by humans and is intended for a machine. CAPTCHAs generally use letters and numbers from distorted images that appear on the screen "

From the explanation above it is very clear the purpose of making the captcha itself, therefore we will share how to make a captca on your login form.

The first thing you do is create a Captcha Script, how to enter the code below then paste it into your notepad ++ or other tools that have clear language using PHP.

 <?php session_start(); 
$text = rand(10000,99999); 
$_SESSION["vercode"] = $text; 
$height = 26; 
$width = 55;   
$image_p = imagecreate($width, $height); 
$black = imagecolorallocate($image_p, 0, 0, 0); 
$white = imagecolorallocate($image_p, 255, 255, 255); 
$font_size = 14; 
imagestring($image_p, $font_size, 5, 5, $text, $white); 
imagejpeg($image_p, null, 80); 
?>
 

Save the file above with the name captcha.php, try to save it with the same folder where you saved your login form so that when called it is very easy. If you want to adjust the length and width of the display captcha with your login form, just change it

 $width = 55;
$height = 26; 

Next is to create a login form, here I download the template then retrieve the login form. Next is the login form that I use. Search template: Dashgum

  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>DASHGUM - Bootstrap Admin Template</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
        
    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/style-responsive.css" rel="stylesheet">
  </head>

  <body>

   <div id="login-page">
    <div class="container">
    
        <form class="form-login" action="index.html">
          <h2 class="form-login-heading">sign in now</h2>
          <div class="login-wrap">
              <input type="text" class="form-control" placeholder="User ID" autofocus>
              <br>
              <input type="password" class="form-control" placeholder="Password">
              <label class="checkbox">
                  <span class="pull-right">
                      <a data-toggle="modal" href="login.html#myModal"> Forgot Password?</a>
  
                  </span>
              </label>
              <button class="btn btn-theme btn-block" href="index.html" type="submit"><i class="fa fa-lock"></i> SIGN IN</button>
              <hr>
              
              <div class="login-social-link centered">
              <p>or you can sign in via your social network</p>
                  <button class="btn btn-facebook" type="submit"><i class="fa fa-facebook"></i> Facebook</button>
                  <button class="btn btn-twitter" type="submit"><i class="fa fa-twitter"></i> Twitter</button>
              </div>
              <div class="registration">
                  Don't have an account yet?<br/>
                  <a class="" href="#">
                      Create an account
                  </a>
              </div>
  
          </div>
  
            <!-- Modal -->
            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Forgot Password ?</h4>
                        </div>
                        <div class="modal-body">
                            <p>Enter your e-mail address below to reset your password.</p>
                            <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
  
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                            <button class="btn btn-theme" type="button">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- modal -->
  
        </form>    
    
    </div>
   </div>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>

    <!--BACKSTRETCH-->
    <!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
    <script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
    <script>
        $.backstretch("assets/img/login-bg.jpg", {speed: 500});
    </script>


  </body>
</html>
 

Then to install the Captchanya code it's easy to just call it. See the code above between <div class = "login-wrap"> Until <! - Modal-> Untul more details see the script below and add the code to call the captcha, just below the Password. Look at the red code, that's what I added to call the captcha.

 
<div id="login-page">
  <div class="container">
    
    <form class="form-login" action="index.html">
      <h2 class="form-login-heading">sign in now</h2>
      <div class="login-wrap">
        <input type="text" class="form-control" placeholder="User ID" autofocus>
        <br>
        <input type="password" class="form-control" placeholder="Password">
        <br>
        <input type="text" class="form-control1" name="vercode" placeholder="Verification Code" maxlength="5" autocomplete="off" required style="width: 225px; height: 26px;" />&nbsp;
        <img src="captcha.php">
        <label class="checkbox">
          <span class="pull-right">
            <a data-toggle="modal" href="login.html#myModal"> Forgot Password?</a>
            
          </span>
        </label>
        <button class="btn btn-theme btn-block" href="index.html" type="submit"><i class="fa fa-lock"></i> SIGN IN</button>
        <hr>
        
        <div class="login-social-link centered">
          <p>or you can sign in via your social network</p>
          <button class="btn btn-facebook" type="submit"><i class="fa fa-facebook"></i> Facebook</button>
          <button class="btn btn-twitter" type="submit"><i class="fa fa-twitter"></i> Twitter</button>
        </div>
        <div class="registration">
          Don't have an account yet?<br/>
          <a class="" href="#">
            Create an account
          </a>
        </div>
        
      </div>
      
      <!-- Modal -->
      <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">Forgot Password ?</h4>
            </div>
            <div class="modal-body">
              <p>Enter your e-mail address below to reset your password.</p>
              <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
              
            </div>
            <div class="modal-footer">
              <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
              <button class="btn btn-theme" type="button">Submit</button>
            </div>
          </div>
        </div>
      </div>
      <!-- modal -->
      
    </form>     
    
  </div> 

Oh ya the captcha code will not appear when you have not Captcha code verified, here is the Captcha verification code.

 //code for captach verification
  if ($_POST["vercode"] != $_SESSION["vercode"] OR $_SESSION["vercode"]=='')  {
    echo "<script>alert('Incorrect verification code');</script>" ;
  }  

Surely a lot of people ask how and how to put this captcha code, for a web developer this is very easy, but for beginners this is very difficult. I find it difficult to explain because I am lacking in speech, but I hope that with the placement picture below you will understand how to place it.

See the code that I marked above, Oh yes, if my friends don't understand what I share above.

Please leave a comment below, I hope that what we share benefits for all of you, discussion is very much waiting, Thanks.

No comments:

Post a Comment