Send OTP mobile number verification using 2factor
SEND OTP VERIFICATION MESSAGES 2Factor.in offers simple HTTP APIs for implementing phone verification use case. Send OTP from PHP, JAVA, Android, iOS OR use Magento SMS Verification, Woocommerce OTP Verification, Wordpress Phone Verification, CRM Integration etc. A one-time password (OTP), also known as one-time PIN or dynamic password, is a password that is valid for only one login session or transaction, on a computer system or other digital device. OTPs avoid a number of shortcomings that are associated with traditional (static) password-based authentication; a number of implementations also incorporate two-factor authentication by ensuring that the one-time password requires access to something a person has (such as a small keyring fob device with the OTP calculator built into it, or a smartcard or specific cellphone) as well as something a person knows (such as a PIN). The most important advantage that is addressed by OTPs is that, in contrast to static passwords, they are not vulnerable to replay attacks. This means that a potential intruder who manages to record an OTP that was already used to log into a service or to conduct a transaction will not be able to abuse it, since it will no longer be valid. A second major advantage is that a user who uses the same (or similar) password for multiple systems, is not made vulnerable on all of them, if the password for one of these is gained by an attacker. A number of OTP systems also aim to ensure that a session cannot easily be intercepted or impersonated without knowledge of unpredictable data created during the previous session, thus reducing the attack surface further.
OTP
.rar
Download RAR • 3KB
ndex.php file.
<!DOCTYPE html> <html> <head> <title>otp verification</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> #otpdiv{ display: none; } #verifyotp{ display: none; } #resend_otp{ display: none; } .countdown{ display: table; width: 100%; text-align: left; font-size: 15px; } #resend_otp:hover{ text-decoration:underline; } </style> </head> <body> <!--html part start--> <div class="container p-3 my-3 border"> <div class="row"> <div class="col-6 border border-success p-4 ml-2"> <div class="otp_msg"></div> <h1 class="text-danger text-center">arshad</h1> <form method="post"> <div class="form-group"> <label for="mobile">Enter Mobile Number</label> <input type="text" class="form-control" id="mob" placeholder="Enter mobile"> </div> <div class="form-group" id="otpdiv"> <label for="otp verification">Enter OTP</label> <input type="text" class="form-control" id="otp" placeholder="Enter OTP"> <br> <div class="countdown"></div> <a href="#" id="resend_otp" type="button">Resend</a> </div> <button type="button" id="sendotp" class="btn btn-primary">Send OTP</button> <button type="button" id="verifyotp" class="btn btn-primary">Verify OTP</button> </form> </div> <div class="col-6 ml-2"> </div> </div> </div> <!-- html part ends--> <script type="text/javascript"> $(document).ready(function(){ function validate_mobile(mob){ var pattern = /^[6-9]\d{9}$/; if (mob == '') { return false; }else if (!pattern.test(mob)) { return false; }else{ return true; } } //send otp function function send_otp(mob){ var ch = "send_otp"; $.ajax({ url: "otp_process.php", method: "post", data: {mob:mob,ch:ch}, dataType: "text", success: function(data){ if (data == 'success') { $('#otpdiv').css("display","block"); $('#sendotp').css("display","none"); $('#verifyotp').css("display","block"); timer(); $('.otp_msg').html('<div class="alert alert-success">OTP sent successfully</div>').fadeIn(); window.setTimeout(function(){ $('.otp_msg').fadeOut(); },1000) }else{ $('.otp_msg').html('<div class="alert alert-danger">Error in sending OTP</div>').fadeIn(); window.setTimeout(function(){ $('.otp_msg').fadeOut(); },1000) } } }); } //end of send otp function
//send otp function $('#sendotp').click(function(){ var mob = $('#mob').val(); if (validate_mobile(mob) == false) $('.otp_msg').html('<div class="alert alert-danger" style="position:absolute">Enter Valid mobile number</div>').fadeIn(); else send_otp(mob); window.setTimeout(function(){ $('.otp_msg').fadeOut(); },1000) }); //end of send otp function //resend otp function $('#resend_otp').click(function(){ var mob = $('#mob').val(); send_otp(mob); $(this).hide(); }); //end of resend otp function //verify otp function starts $('#verifyotp').click(function(){ var ch = "verify_otp"; var otp = $('#otp').val(); $.ajax({ url: "otp_process.php", method: "post", data: {otp:otp,ch:ch}, dataType: "text", success: function(data){ if (data == "success") { $('.otp_msg').html('<div class="alert alert-success">OTP Verified successfully</div>').show().fadeOut(4000); }else{ $('.otp_msg').html('<div class="alert alert-danger">otp did not match</div>').show().fadeOut(4000); } } }); }); //end of verify otp function //start of timer function function timer(){ var timer2 = "00:31"; var interval = setInterval(function() { var timer = timer2.split(':'); //by parsing integer, I avoid all extra string processing var minutes = parseInt(timer[0], 10); var seconds = parseInt(timer[1], 10); --seconds; minutes = (seconds < 0) ? --minutes : minutes; seconds = (seconds < 0) ? 59 : seconds; seconds = (seconds < 10) ? '0' + seconds : seconds; //minutes = (minutes < 10) ? minutes : minutes; $('.countdown').html("Resend otp in: <b class='text-primary'>"+ minutes + ':' + seconds + " seconds </b>"); //if (minutes < 0) clearInterval(interval); if ((seconds <= 0) && (minutes <= 0)){ clearInterval(interval); $('.countdown').html(''); $('#resend_otp').css("display","block"); } timer2 = minutes + ':' + seconds; }, 1000); } //end of timer }); </script> </body> </html>
otp_process.php file.
<?php
session_start(); $ch = $_POST['ch']; switch ($ch) { case 'send_otp': $num = $_POST['mob']; $otp = rand(10000,999999); $_SESSION['otp'] = $otp; $curl = curl_init(); curl_setopt_array($curl, array( //CURLOPT_URL => "http://2factor.in/API/V1/293832-67745-11e5-88de-5600000c6b13/SMS/9911991199/4499", CURLOPT_URL => "http://2factor.in/API/V1/bff6e553-0247-11eb-9fa5-0200cd936042/SMS/".$num."/".$otp."", CURLOPT_RETURNTRANSFER => true, CURLOPT_ENCODING => "", CURLOPT_MAXREDIRS => 10, CURLOPT_TIMEOUT => 30, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => "GET", CURLOPT_POSTFIELDS => "", CURLOPT_HTTPHEADER => array( "content-type: application/x-www-form-urlencoded" ), )); $response = curl_exec($curl); $err = curl_error($curl); curl_close($curl); if ($err) { echo "cURL Error #:" . $err; } else { echo 'success'; } break; case 'verify_otp': $user_otp = $_POST['otp']; $verify_otp = $_SESSION['otp']; if($verify_otp == $user_otp){ echo "success"; } break; default: # code... break; } ?>