AngularJS OTP Verification With Third Party Authentication

Satheesh Elumalai
7y
12.3k
0
5

100

Article

AngularJS OTP Verification With Third Party User Authentication.

Kindly see the following steps.

Step1

https://msg91.com/ just follow this url create signup your account and get API and authentication key.

Step2

Just get API URL and call your MVC page Controller.

For example, the API gets SendAPI, VerifyAPI. These both are called in your MVC Controller page.

Step3

Create one cshtml page and refer the below code to set time out and validate OTP input and submit button also.

//Design code
<form data-toggle="md-validator">
<div id="Checkemail" class="md-form-group md-label-floating"> <input class="md-form-control" type="text" name="email" maximum="10" ng-model="Mobilenumber"> <label class="md-control-label">Enter your MobileNumber</label> </div>
<div class="toast-message">
<p style="text-align:center;color:red;"></p>
</div>
<div class="md-form-group"> <button type="submit" ng-keyup="$event.keyCode == 13" class=" btn btn-primary btn-block" ng-click="Submit()">Submit</button> </div>
</form>

Step 4

Go to Controller.js and Service.js page and follow the below step. Use Page loading time ng-init() function to get your phone number from database and send, and we have to assign GenerateOTP function and get your OTP.

//Controller.js code
$scope.Submit = function() {
var mobile = $scope.Mobilenumber;
Service.GenerateOTP(mobile).then(function(p1) {
var Messageshow = JSON.parse(p1.data);
if (Messageshow == "OTP_SENT_SUCCESSFULLY") {
$scope.countDown = 60;
var timer = setInterval(function() {
$scope.countDown--;
if ($scope.countDown >= 0) {
$scope.$apply();
}
if ($scope.countDown == 0) {
$("#countid").hide();
}
}, 1000);
} else if (Messageshow == "OTP_EXPRID") {
$("#countidresult").show();
alert() p1.data;
}
});
}

Here I mention the sucess and failure message and OTP verify time limit. I will set 60 seconds for here.

Step 5

Like country code only pass to Service page to MVC Controller page. See the below.

//Service.js Code
this.GenerateOTP = function(mobile) {
var request = $http({
method: "Get",
url: "/SMS/GenerateOTP?mobile=" + mobile,
dataType: "json"
});
return request;
}

Step6

GoTo Controller folder right click add → new item ->select controller.cs file set name OTPController.

Send mobile number following this code.

[HttpGet]
public JsonResult GenerateOTP(string mobile) {
string CountryCode = "xx";
string appKey = "xxxxxxxxxxxxxxx";
var client = new RestClient("sms otp api url ");
var request = new RestRequest(Method.POST);
request.AddHeader("cache-control", "no-cache");
request.AddHeader("application-key", appKey);
request.AddParameter("undefined", "{\n \"countryCode\": " + countryCode + ",\n \"mobileNumber\": " + mobile + ",\n \"getGeneratedOTP\": true\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
var newResource = JsonConvert.DeserializeObject < OTPVerification > (response.Content);
if (newResource.response.code == "OTP_SENT_SUCCESSFULLY") {
return Json(newResource.response.code, JsonRequestBehavior.AllowGet);
} else if (newResource.response.code == "OTP_EXPRID") {
return Json(newResource.response.code, JsonRequestBehavior.AllowGet);
} else {
return Json(newResource.status, JsonRequestBehavior.AllowGet);
}
}

Reponce Code status.

We post data on this URL as delivery report. We get HTTP response code 200 ok it's successfully been returned. In case the other code was returned it means 500 for internal error.504 for gateway timeout. So we can try after some period of time. If you have success it means show this message OTP_SENT_SUCCESSFULLY .

Step7

The set time period to start in 60 seconds.

For Example

You didn't get OTP please click and resend via call to pickup call and verify code .

Step8

If the code was sent to OTPverifyCode interact Verification API.

If we enter the wrong code it means show error invalid otp:refer below image

Just follow Controller.js code.

$scope.VerifyOTP = function() {
var VerificationCode = $scope.VerificationCode;
Service.OTPverifyCode(VerificationCode).then(function(p1) {
var Messageshow = JSON.parse(p1.data);
if (Messageshow == "NUMBER_VERIFIED_SUCCESSFULLY") {
$scope.countDown = 0;
$("#countidresult").hide();
$("#countid").hide();
alert(p1.data);
RedirectSports(-1);
// $window.location.href = "/Account/Login";
} else if (Messageshow == "OTP_INVALID") {
$("#countidresult").show();
alert(p1.data);
}
});
}

Step 9

Service.js code

this.OTPverifyCode = function(verificationCode) {
var request = $http({
method: "Post",
url: "/SMS/OTPverifyCode?verificationCode=" + verificationCode,
dataType: "json"
});
return request;
}

Step10

[HttpPost]
public JsonResult OTPverifyCode(string verificationCode) {
string countryCode = "xx";
string appKey = "xxxxxxxxxxxxxxx";
var client = new RestClient("sms otp api url");
var request = new RestRequest(Method.POST);
request.AddHeader("cache-control", "no-cache");
request.AddHeader("application-key", appKey);
request.AddParameter("undefined", "{\n \"countryCode\": " + countryCode + ",\n \"mobileNumber\": " + mobileNumber + ",\n \"oneTimePassword\": " + verificationCode + "\n}", ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
var newResource = JsonConvert.DeserializeObject < OTPVerification > (response.Content);
if (newResource.status == "success" && newResource.response.code == "NUMBER_VERIFIED_SUCCESSFULLY") {
return Json(newResource.response.code, JsonRequestBehavior.AllowGet);
} else if (newResource.response.code == "OTP_INVALID") {
return Json(newResource.response.code, JsonRequestBehavior.AllowGet);
} else {
return Json(newResource.status, JsonRequestBehavior.AllowGet);
}
}