To implement a One-Time Password (OTP) SMS verification system in an ASP.NET MVC application, follow these step-by-step instructions. This guide will utilize the Textlocal API for sending SMS messages.
Step 1: Set Up Your ASP.NET MVC Project
- Create a New ASP.NET MVC Project:
- Open Visual Studio.
- Select “Create a new project.”
- Choose “ASP.NET Web Application” and select the MVC template.
- Install Required Packages:
- You may need to install the
System.Net.Httppackage if it is not already included.
- You may need to install the
Step 2: Register with Textlocal
- Create an Account:
- Go to Textlocal and sign up for an account.
- Generate API Key:
- After logging in, navigate to the API section of your account.
- Generate an API key which you will use to authenticate your requests.
Step 3: Create the Model
Create a model to handle the OTP functionality. This model will store the mobile number and the generated OTP.
csharp
public class OTPModel
{
public string MobileNumber { get; set; }
public string OTP { get; set; }
}
Step 4: Create the Controller
Create a new controller named OTPController to handle the OTP sending and verification logic.
csharp
using System;
using System.Collections.Specialized;
using System.Net;
using System.Web.Mvc;
using YourNamespace.Models; // Update with your actual namespace
public class OTPController : Controller
{
public ActionResult SendOTP()
{
return View();
}
[HttpPost]
public ActionResult SendOTP(OTPModel model)
{
if (ModelState.IsValid)
{
// Generate a random OTP
Random random = new Random();
model.OTP = random.Next(1000, 9999).ToString();
// Send OTP via SMS
SendSMS(model.MobileNumber, model.OTP);
// Store OTP in session for verification later
Session[“OTP”] = model.OTP;
return RedirectToAction(“VerifyOTP”);
}
return View(model);
}
public ActionResult VerifyOTP()
{
return View();
}
[HttpPost]
public ActionResult VerifyOTP(string userOTP)
{
if (userOTP == Session[“OTP”].ToString())
{
// OTP is verified
ViewBag.Message = “Your mobile number has been verified successfully.”;
return View();
}
else
{
ViewBag.Message = “Invalid OTP. Please try again.”;
return View();
}
}
private void SendSMS(string mobileNumber, string otp)
{
string apiKey = “YOUR_API_KEY”; // Replace with your API key
string sender = “TXTLCL”; // Sender ID
string message = $”Your OTP is {otp}”;
using (var wb = new WebClient())
{
var data = new NameValueCollection();
data[“apikey”] = apiKey;
data[“numbers”] = mobileNumber;
data[“message”] = message;
data[“sender”] = sender;
var response = wb.UploadValues(“https://api.textlocal.in/send/”, “POST”, data);
var result = System.Text.Encoding.UTF8.GetString(response);
// Handle response if needed
}
}
}
Step 5: Create Views
- SendOTP View (
SendOTP.cshtml):
xml
@model YourNamespace.Models.OTPModel
@using (Html.BeginForm())
{
<div>
<label for=”MobileNumber”>Enter your mobile number:</label>
@Html.TextBoxFor(m => m.MobileNumber)
<input type=”submit” value=”Send OTP” />
</div>
}
- VerifyOTP View (
VerifyOTP.cshtml):
xml
@{
ViewBag.Title = “Verify OTP”;
}
<h2>Verify OTP</h2>
@using (Html.BeginForm())
{
<div>
<label for=”userOTP”>Enter your OTP:</label>
<input type=”text” name=”userOTP” />
<input type=”submit” value=”Verify” />
</div>
}
@if (ViewBag.Message != null)
{
<div>@ViewBag.Message</div>
}
Step 6: Run Your Application
- Start your application and navigate to the OTP sending page.
- Enter a mobile number and click “Send OTP.”
- Check the mobile device for the OTP SMS.
- Enter the OTP on the verification page to confirm.
Conclusion:
This post demonstrates how to implement OTP SMS verification in an ASP.NET MVC application using the Textlocal API. You may build on this by including error handling, logging, and a more sophisticated user interface. Always handle sensitive information securely, and consider adding additional security measures for production applications.
