How to send OTP on your mobile in MVC

In this article, I  explain how to send OTP on our mobile in MVC. First, we have to create an account on www://textlocal.com

After Register just you log in on www://textlocal.com

After the have to generate API Key. So for that go in Setting >> API Keys
then click Create New Key Button

After that click Save New key Button

After that, it will generate an API key

 Now copy of API Key and use in our program in API Key

Now Open Visual Studio and create a project.
After creating the project add a controller and add the Index action method

public ActionResult Index()

{

    return View();

}

Now Right-click and aad a view and write below code

<div>

    <input type="text" id="txtMobile" class="form-control" />

    <br />

    <a href="#" class="btn btn-primary" onclick="SendOTP()">Send OTP</a>

</div>

Now add Jquery code in Script tage

<script>

    var SendOTP = function () {

        var mobileNumber = $("#txtMobile").val();

        $.ajax({

            url: "/Demo/SendOTP",

            type: "POST",

            data: { mobileNumber: mobileNumber },

            success: function (data) {

                if (data == "success") {

                    alert("OTP sent successfully");

                    window.location = "EnterOTP";

                }

                else {

                    alert("Faild");

                }

            }

        });

    }

</script>

Now go  in Controller and write below code

 public JsonResult SendOTP(string mobileNumber)

{

    int otpValue = new Random().Next(100000, 999999);

    var status = "";

    string moNumber = mobileNumber;

    string appKey = "Vm4gpyV/ajY-T1pMNIGZowSl3e1qU37ZlxTuZwyTwW";

    string msg = "Your OTP Number is " + otpValue + "(Sent By Mithilesh)";

    string encodedMessage = HttpUtility.UrlEncode(msg);

    using (var webClient = new WebClient())

    {

        byte[] response = webClient.UploadValues("https://api.textlocal.in/send/", new System.Collections.Specialized.NameValueCollection() {

                {"apikey",appKey },

                { "numbers",moNumber},

                { "message",encodedMessage},

                { "sender","TXTLCL"}});

        string result = Encoding.UTF8.GetString(response);

        var jsonObject = JObject.Parse(result);

        status = jsonObject["status"].ToString();

        Session["CurrnetOTP"] = otpValue;

    }

    return Json(status, JsonRequestBehavior.AllowGet);

}

After running the project and Enter mobile number and click send OTP button 

Now click Send OTP button

After that, it will give a successful message 

Now we have to verify the OTP number so again go to controller and add action method.

public ActionResult EnterOTP()

{

    return View();

}

Now Right-click and aad a view and write below code

<div>

    <input type="text" id="txtOTP" placeholder="Enter OTP Number" class="form-control" />

    <input type="button" class="btn btn-primary" id="btnVerifyOTP" value="Confirm OTP" />

</div>

<script>

    $(document).ready(function () {

        var otp = $("#txtOTP").val();

        $.ajax({

            url: "/Demo/VerifyOTP",

            type: "POST",

            data: { otp: otp },

            success: function (data) {

                if (data == true) {

                    alert("OTP veryfication successfully");

                }

                else {

                    alert("veryfication Faild");

                }

            }

        });

    });

</script>

After that create method in controller for verification OTP

[HttpPost]

public JsonResult VerifyOTP(string otp)

{

    bool result = false;

    string sessionOTP = Session["CurrnetOTP"].ToString();

    if (sessionOTP == otp)

    {

        result = true;

    }

    return Json(result, JsonRequestBehavior.AllowGet);

}

See the output