OTP verification in php Bulksms


index.php

<?php
session_start();
if(count($_POST)>0){
	if($_SESSION['OTP']==$_POST['otp']){
		$message="Veified Successfully !";
	}
	else{
		$message="Invalid OTP!";
	}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>OTP Verification</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->	
	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->	
	<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="css/util.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
	
	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100">
				<div class="login100-pic js-tilt" data-tilt>
					<img src="images/img-01.png" alt="IMG">
				</div>

				<form class="login100-form validate-form">
					<span class="login100-form-title">
						Member Signup
					</span>

					<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
						<input class="input100" type="text" name="email" placeholder="Email">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-envelope" aria-hidden="true"></i>
						</span>
					</div>
					<div class="wrap-input100 validate-input" data-validate = "Valid Phone no is required: 9437730730">
						<input class="input100" type="text" name="text" placeholder="Phone" id="phone">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-envelope" aria-hidden="true"></i>
						</span>
					</div>
					<span style="text-align:right;padding-left:230px;padding-top:10px;" id="verify"><button type="button" style="padding:2px;" class="btn btn-primary"  >Verify</button></span>
					<span id="verified" style="display:none;color:green;">Verified Successfully !</span>

					<div class="wrap-input100 validate-input" data-validate = "Password is required">
						<input class="input100" type="password" name="pass" placeholder="Password">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-lock" aria-hidden="true"></i>
						</span>
					</div>
					
					<div class="container-login100-form-btn">
						<button class="login100-form-btn" id="Signup" disabled>
							Signup
						</button>
					</div>

					

					<div class="text-center p-t-136">
						<a class="txt2" href="#">
							Already Member
							<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
						</a>
					</div>
				</form>
			</div>
		</div>
	</div>
	
<!-- The Modal -->
   <div class="modal fade" id="verifyModal" data-keyboard="false" data-backdrop="static" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
		
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Enter OTP</h4>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
					<p id="resend_msg" style="text-align:center;color:green;"></p>
					<p id="error_msg" style="text-align:center;color:green;"></p>
					
					<div class="wrap-input100 validate-input" data-validate = "Password is required">
						<input class="input100" type="text" id="otp" name="otp" placeholder="OTP" maxlength="6">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-lock" aria-hidden="true"></i>
						</span>
					</div>
					
					<div class="container-login100-form-btn">
						<button class="login100-form-btn" id="otp_submit">
							Submit
						</button>
					</div>
					<div class="container-login100-form-btn">
						<button class="login100-form-btn" id="otp_resend">
							Resend
						</button>
					</div>
					
				
			
        </div>
        
        <!-- Modal footer -->
       
        
      </div>
    </div>
  </div>	

	
<!--===============================================================================================-->	
	<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
	<script src="vendor/bootstrap/js/popper.js"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
	<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
	<script src="vendor/tilt/tilt.jquery.min.js"></script>
	<script >
		$('.js-tilt').tilt({
			scale: 1.1
		})
	</script>
<!--===============================================================================================-->
	<script src="js/main.js"></script>
	<script>
	$("#verify").click(function(){
		if($('#phone').val()!=''){
			$("#verifyModal").modal('show');
			$.ajax({
						type: "POST",
						url: "otp_process.php",
						data:{
							type: 1,
							phone: $('#phone').val()
						},
						success: function(dataResult){
							/*var dataResult = JSON.parse(dataResult);*/
							if(dataResult.statusCode==200){
								
							}
						}
			});
		}
		else{
			alert("Mobile number can not be blank !");
		}
	});
	$("#otp_submit").click(function(){
		$.ajax({
					type: "POST",
					url: "otp_process.php",
					data:{
						type: 2,
						otp: $('#otp').val()
					},
					success: function(dataResult){
						var dataResult = JSON.parse(dataResult);
						if(dataResult.statusCode==200){
							$("#verifyModal").modal('hide');
							$("#verify").hide();
							$("#verified").show();
							$('#Signup').removeAttr("disabled");
						}
						else{
							alert("Invalid OTP");
							$("#error_msg").html('Invalid OTP !');
						}
					}
		});
	});
	$("#otp_resend").click(function(){
		$.ajax({
					type: "POST",
					url: "otp_process.php",
					data:{
						type: 3,
						phone: $('#phone').val()
					},
					success: function(dataResult){
						var dataResult = JSON.parse(dataResult);
						if(dataResult.statusCode==200){
							$("#resend_msg").html('OTP Resend Successfully !');
						}
					}
		});
	});
	</script>
</body>
</html>

Here we using rand() function to generate random number.

process.php

<?php
session_start();
function Fstmsms($sender_id,$message,$number){
			$fields = array(
				"sender_id" => $sender_id,
				"message" => $message,
				"language" => "english",
				"route" => "p",
				"numbers" => $number,
			);
			$curl = curl_init();

			curl_setopt_array($curl, array(
			  CURLOPT_URL => "https://www.fast2sms.com/dev/bulk",
			  CURLOPT_RETURNTRANSFER => true,
			  CURLOPT_ENCODING => "",
			  CURLOPT_MAXREDIRS => 10,
			  CURLOPT_TIMEOUT => 30,
			  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
			  CURLOPT_CUSTOMREQUEST => "POST",
			  CURLOPT_POSTFIELDS => json_encode($fields),
			  CURLOPT_HTTPHEADER => array(
				"authorization: TJemdf843EQZkPuYV2pN0cRHa9XhvFlwLbSUgWs5xG1AyrnKjDjfseJRtVHLZd0bvl5yogcPh7BTUkFE",
				"accept: */*",
				"cache-control: no-cache",
				"content-type: application/json"
			  ),
			));

			$response = curl_exec($curl);
			$err = curl_error($curl);

			curl_close($curl);

			if ($err) {
			  $response="cURL Error #:" . $err;
			}
				
}
if($_POST['type']==1){
	$otp=rand(100000,999999);
	$sender_id="FSTSMS";
	$message="OTP for mobile verification is :". $otp;
	$number=$_POST['phone'];
	Fstmsms($sender_id,$message,$number);
	$_SESSION['OTP']=$otp;
	echo json_encode(array("statusCode"=>200));
}
if($_POST['type']==2){
	if($_SESSION['OTP']==$_POST['otp']){
		echo json_encode(array("statusCode"=>200));
	}
}
if($_POST['type']==3){
	$sender_id="FSTSMS";
	$number=$_POST['phone'];
	$message="OTP for mobile verification is :". $_SESSION['OTP'];
	Fstmsms($sender_id,$message,$number);
	echo json_encode(array("statusCode"=>200));
}
?>