Implementing Phone Verification Login with PHP
This article explains how to implement a phone‑verification login system using PHP, covering front‑end page design, AJAX‑based code sending, and server‑side validation with example code snippets for HTML, JavaScript, and PHP integration.
With the growth of mobile internet, phone‑verification login has become a common feature for modern websites and apps, offering a more secure and convenient authentication method that prevents malicious logins and simplifies user interaction.
The implementation hinges on correctly obtaining the user's phone number and validating it via an SMS verification code. The following steps outline the complete solution.
Step 1: Front‑end Page Design – Create a login page containing an input for the phone number, a button to request the verification code, an input for the code, and a submit button.
<!-- login.html -->
<!DOCTYPE html>
<html>
<head>
<title>手机验证登录</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>手机验证登录</h1>
<form id="loginForm" action="login.php" method="POST">
<input type="text" name="phoneNumber" placeholder="请输入手机号码" required>
<button type="button" id="getCodeBtn">获取验证码</button>
<input type="text" name="code" placeholder="请输入验证码" required>
<input type="submit" value="登录">
</form>
<script src="login.js"></script>
</body>
</html>Step 2: Send Verification Code – When the user clicks the "Get Code" button, an AJAX request sends the phone number to the back‑end, which generates and dispatches the SMS code.
// login.js
$(function() {
$('#getCodeBtn').click(function() {
var phoneNumber = $('[name="phoneNumber"]').val();
$.ajax({
url: 'sendCode.php',
type: 'POST',
data: { phoneNumber: phoneNumber },
dataType: 'json',
success: function(res) {
if (res.code === 0) {
alert('验证码发送成功');
} else {
alert('验证码发送失败');
}
},
error: function() {
alert('发送请求失败，请稍后重试');
}
});
});
});
// sendCode.php
<?php
$phoneNumber = $_POST['phoneNumber'];
// Generate verification code
$code = mt_rand(100000, 999999);
// Send SMS (implementation omitted)
$response = ['code' => 0, 'msg' => '验证码发送成功'];
echo json_encode($response);
?>Step 3: Verify Phone Number and Code – After the user enters the phone number and received code, the front‑end submits the data to the server, which validates the pair.
// login.php
<?php
$phoneNumber = $_POST['phoneNumber'];
$code = $_POST['code'];
// Validation logic (implementation omitted)
$response = ['code' => 0, 'msg' => '登录成功'];
echo json_encode($response);
?>In the examples above, the front‑end uses AJAX to send the phone number to sendCode.php for code generation and delivery. Upon successful sending, a confirmation alert appears. The user then submits the phone number and code to login.php , which validates them and, if successful, displays a login‑success alert.
In real deployments, you should choose an appropriate SMS service provider, store user information in a database, and consider additional security measures such as image captchas or login rate limiting to enhance system safety.
Conclusion – By combining front‑end interaction with back‑end PHP processing, you can implement a secure and user‑friendly phone‑verification login system that improves authentication safety for modern web applications.
php中文网 Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.