+91 9875180954 info@vivanwebsolution.com

Month: August 2021

send OTP using angular js and php
Angular JS

How To Send OTP Using Angular JS And PHP?

hello there, today we are going to discuss how can we send OTP using angular js and PHP? so in this tutorial, we need to understand some advanced topics of PHP, and also How API call in PHP? in this tutorial we will use API for sending the message, which is free to use. so let’s get started. which service we will use for send OTP using angular js and php? so in this tutorial, we gonna use the fast2sms service which provides 50 free credits for send SMS. this service actually provides us bulk SMS service but will use this service as OTP verification. if you also want to use this service then please visit this link. so we know that we are going to use the free2sms service but how do we donna calls the API this is the main part of this tutorial, so we get a link from the fast2sms service but we need to call that service so we are gonna use cURL for this operation. What is cURL? curl is used in command lines or scripts to transfer data. curl is also used in cars, television sets, routers, printers, audio equipment, mobile phones, tablets, set-top boxes, media players and is the Internet transfer engine for thousands of software applications in over ten billion installations. what cURL supports? DICT, FILE, FTP, FTPS, GOPHER, GOPHERS, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, MQTT, POP3, POP3S, RTMP, RTMPS, RTSP, SCP, SFTP, SMB, SMBS, SMTP, SMTPS, TELNET and TFTP. curl supports SSL certificates, HTTP POST, HTTP PUT, FTP uploading, HTTP form based upload, proxies, HTTP/2, HTTP/3, cookies, user+password authentication (Basic, Plain, Digest, CRAM-MD5, SCRAM-SHA, NTLM, Negotiate and Kerberos), file transfer resume, proxy tunneling and more. Let’s Move to the front-end side of this tutorial. so in the front-end, we will use HTML, CSS, Bootstrap, and jquery. so in this tutorial, we will use some jquery functions too, so it makes our page much creative. so let’s create a user form and go through it. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>OTP Verification Using Angular JS And PHP</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <style type="text/css">
  	input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
  </style>
</head>
<body>
<div class="container-fluid" ng-app="OTPApp" ng-controller="OTPC">
	<div class="row">
		<div class="col-md-12">
			<h1 class="text-center">OTP Verification Using Angular JS AND PHP</h1>
			<div class="d-flex justify-content-center">

				<div class="card" style="border-radius: 20px;overflow: hidden;">
					<div id="msg"> </div>
					<div class="card-header">
						<h4 class="text-info">Please Verify Your Mobile Number</h4>
					</div>
					<div class="card-body">
					<div id="sendotp">
						<form>
							<label>Enter Your Mobile Number</label>
							<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"type = "number"maxlength = "10"
 							class="form-control" placeholder="please enter your mobile number here" id="mobile" ng-model="mobile" required/>
						</form>
					</div>
						<div id="verify">
							<form>
								<label>Enter OTP</label>
								<input type="number" oninput="javascript: if(this.value.length > this.maxLength) this.value=this.value.slice(0,this.maxLength);" maxlength="6" class="form-control" placeholder="please enter otp here" ng-model="otp">
							</form>
						</div>
					</div>
					<div class="d-flex justify-content-end card-footer">
						<button class="btn btn-primary" id="sendOtp" ng-click="sendOTP()">Send OTP</button>
						<button class="btn btn-success" id="verifyOTP" ng-click="verifyOTP()">Verify OTP</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
  <!-- Bootstrap core JavaScript -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
this is the front-end but we need to apply some jquery here let’s generate it. 
  	$(document).ready(function() {
  		$("#verify").hide();
  		$("#verifyOTP").hide();
  		$("#sendOtp").attr('disabled','disabled');
  		$("#mobile").keyup(function() {
  			var number = $(this).val();
  			if(number.length == 10){
  				$("#sendOtp").removeAttr('disabled','disabled');
  			}else{
  				$("#sendOtp").attr('disabled','disabled');
  			}
  		});
  	});
all the javascript or jquery code provide here you have to use inside the script tag. so you can call it properly. after complete these steps, your output should look like this. we have completed our front-end here now let’s go through the back-end of this tutorial. Let’s Move to the Back-end of the Send OTP Using Angular Js And PHP. so we completed the front-end so now we have to create a backend of the tutorial. so let’s create ajax for the calling API. 
var app = angular.module('OTPApp',[]);
  	app.controller('OTPC',function($scope,$http){
  		$scope.sendOTP = function(){
  			$http.post('api/sendOTP.php',{'mobile_number':$scope.mobile,'submitFor':'submit_otp'}).then(function(res){
  				$("#msg").append(res.data);
  				$("#verify").show();
  				$("#verifyOTP").show();
  				$("#sendotp").hide();
  				$("#sendOtp").hide();
  			});
  		}
  		$scope.verifyOTP = function(){
  			$http.post('api/sendOTP.php',{'otp':$scope.otp,'submitFor':'verify_otp'}).then(function(res){
  				if(res.data['code']==200){
	  				$("#msg").append(res.data['info']);
  					$("#verify").hide();
  					$("#verifyOTP").hide();
  					$("#sendotp").show();
  					$("#sendOtp").show();
  				}else{
  					$("#msg").append(res.data['info']);
  				}
  			});
  		}
  	});
so we completed the front-side and also we completed the API call for sending SMS using angular js and PHP. now only one thing remaining that is the main part of this tutorial sending SMS API and how to use it.so we will use the API which is provided by the fast2sms, you can find it under the dashboard section inside the dev-API page where you can find your API key.so let’s create an API for send SMS. 
<?php

error_reporting(0);
$data =json_decode(file_get_contents("php://input"),true);
$mobile = mysql_real_escape_string($data['mobile_number']);
$uotp = mysql_real_escape_string($data['otp']);
$ch = mysql_real_escape_string($data['submitFor']);
switch ($ch) {
	case 'submit_otp':
		$num = $mobile;			
		$otp = rand(100000,999999);
		setcookie('otp',$otp);
		$key ="your key";
		$route = "get from your dashboard";
		$senderid = "get from your dashboard";
		$message = "Hello your varification OTP is $otp";
		$language = "english";
		$flash=0;
		$url = "dev/bulkV2?".
		"authorization=".$key."&".
		"route=".$route."&".
		"sender_id=".$senderid."&".
		"message=".urlencode($message)."&".
		"language=".$language."&".
		"flash=".$flash."&".
		"numbers=".urlencode($num);
		$curl = curl_init();
		curl_setopt_array($curl, array(
		CURLOPT_URL => $url,
		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 $response;
	  echo '<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Success !</strong> your OTP has been sent.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>'; 
	}
	break;
	case 'verify_otp':
		$user_otp = $uotp;
		$verify_otp = $_COOKIE['otp'];
		if($verify_otp == $user_otp){
			$response =array('res'=> '<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Success !</strong> your OTP successfully verified.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>','code'=>200);
    setcookie("otp", "", time() - 3600);
echo json_encode($response);
		}else{
			$response =array('info'=>'<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <strong>Failed !</strong> Please check your OTP.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>',code=>201);
    echo json_encode($response);

		}
		break;
}
?>
so now everything is done now you have to just run this file and check that you receive an SMS or not, if not then let us know in our comment section, and also if you want to learn that how to send E-mail using angular JS and PHP then please visit our this blog.
3
×