Click here to Skip to main content
15,945,119 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Everyone,
I have created signup form in which there are Signup.php.In signup.php file there are two javascript functions: email_send_OTP( )and email_verify_OTP( ).Inside both of these functions I have used AJAX. The email_send_OTP()function calls sendOTP.php file while email_verify_OTP() function calls verifyOTP.php file .The sendOTP.php file generates the 4 digits OTP while verifyOTP.php file verify whether OTP entered by user is same as that of generated 4-digit OTP or not. Both of these files sendOTP.php and verifyOTP.php work fine as checked by Postman and console.log() function.

The problem is inside javascript function named email_verify_OTP() where the statements in if block are not executed and the else block is executed giving output Error: Please enter valid OTP even if right OTP is entered ..

What I have tried:

I have tried the following codes:
JavaScript
<div class="form-group" style="margin-top: 22px;margin-bottom: 2px;">
                        <div class="input-group-prepend">
                            

                            class="fa fa-envelope">
                            <input style="margin-bottom: -3px; width:45%;"  
                                    type="email" 
                                    name="txtEmail" 
                                    id="txtEmail" 
                                     
                                    placeholder="Enter Your Email ID" 
                                    required/>
                            <button type="button" 
                                    class="email_send_OTP" 
                                     
                                    onclick="email_send_OTP()">Send OTP</button>
                            


                            <input style=" width:45%;"  
                                    type="email" 
                                     
                                    id="email_OTP" 
                                    class="email_verify_OTP" 
                                    placeholder="Enter OTP"/>

                            <button type="button" 
                                    
                                    class="email_verify_OTP" 
                                    onclick="email_verify_OTP()">Verify OTP</button>
                            
                            <span id="email_OTP_result" 
                                style="margin-top: 10px;color: red;">
                            </span>
                            

                        </div>
                        <center ><small style="font-size: 11.5px;color: red;"><span id="email_error"></span> </small></center>

                    
                    </div>

JavaScript
<script>
function email_send_OTP()
{
    jQuery('#email_error').html('');
    var email=jQuery('#txtEmail').val();
    if(email=='')
    {
        jQuery('#email_error').html('Please enter email id.');
    }
    else
    {
        jQuery.ajax
        ({
            url:'sendOTP.php', 
            type:'post',
            data:'email='+email+'&type=email',
            success:function(echoed_string_returned_from_sendOTP_dot_php_file)
            {
               console.log(echoed_string_returned_from_sendOTP_dot_php_file);
                if(echoed_string_returned_from_sendOTP_dot_php_file =='otp_sent')
                {
                    jQuery('#txtEmail').attr('disabled',true);
                    jQuery('.email_verify_OTP').show();
                    jQuery('.email_send_OTP').hide();
                    
                    jQuery('#email_error').html('Email containing OTP has been sent to your email Id.');
                }
                else
                {
                    jQuery('#email_error').html('Error: Email Not Sent.Please try after sometime.');
                }  
            }
        });   
    }
}

function email_verify_OTP()
{
    jQuery('#email_error').html('');
    var email_OTP=jQuery('#email_OTP').val();
    if(email_OTP=='')
    {
        jQuery('#email_error').html('Please enter OTP sent to your email id.');
    }
    else
    {
        jQuery.ajax
        ({
            url:'verifyOTP.php',
            type:'post',
            data:'otp='+email_OTP+'&type=email',
            success:function(echoed_string_returned_from_verifyOTP_dot_php_file)
            {
                console.log(echoed_string_returned_from_verifyOTP_dot_php_file);
                if(echoed_string_returned_from_verifyOTP_dot_php_file == 'otp_verified')
                {
                    jQuery('.email_verify_OTP').hide();
                    jQuery('#email_OTP_result').html('Email Id verified successfully.');

                }
                else
                {
                    jQuery('#email_error').html('Error: Please enter valid OTP.');
                }  
            }
        });
        
    }
     
}

</script>

sendOTP.php
PHP
<?php
    session_start();
    
    require_once 'DB/DBConnect.php';
    $db=new DBConnect();
    $pdoObj=$db->connectToDB();

    $type=$_POST['type'];

    if($type=='email')
    {
        $email=$_POST['email'];
        $otp=rand(1111,9999);
        $_SESSION['Email_OTP']=$otp;
        $html="OTP is: $otp";

        $to_email = $email;
        $subject = "Email Verification OTP";
        $body = "Dear USER <br><br>
        Thanks you for joining with us!
        The OTP for verifying your email id is: $otp
        <br><br><br><br><hr>Team Oodemy.com";
        
        $headers = "From:xyz@example.com \r\n";  
        $headers .= "MIME-Version: 1.0 \r\n";  
        $headers .= "Content-type: text/html;charset=UTF-8 \r\n";  
        $headers .= "From: sender email";

        $isEmailSent=  mail($to_email, $subject, $body, $headers);

        if($isEmailSent==true)
        {
            echo 'otp_sent';
        }
        else
        {
            echo 'otp_not_sent';
        }
    }
?>

verifyOTP.php
PHP
<?php

    session_start();
    
    require_once 'DB/DBConnect.php';
    $db=new DBConnect();
    $pdoObj=$db->connectToDB();

    $type=$_POST['type'];
    $otp_entered_by_user=$_POST['otp'];
    $otp_from_session=$_SESSION['Email_OTP'];

    if($type == 'email')
    {
        if($otp_entered_by_user == $otp_from_session)
        {
            echo 'otp_verified';
        }
        else
        {
            echo 'otp_not_verified';
        }
    }
?>
Posted
Updated 8-Jul-22 12:54pm
v3
Comments
Richard Deeming 19-Jul-21 5:33am    
NB: You have a security vulnerability in your code - you have no limit on the number of attempts, nor on the rate of attempts, to verify the OTP.

An attacker can simply spin up a script to call the verifyOTP.php page 10000 times in a tight loop, testing every possible 4-digit OTP in a matter of seconds. That will allow them to "verify" ownership of any email address, without needing access to the email account.

Use trim() function as something like below:
if(echoed_string_returned_from_verifyOTP_dot_php_file.trim() == 'otp_verified')
 
Share this answer
 
Read about OTP at One-time pad - Wikipedia[^]

Thank you.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900