获取手机验证码登录的完整流程

1. 概述

手机验证码登录是目前常见的用户登录方式之一，通过发送动态验证码至用户手机，验证其身份后完成登录。该方式安全性高、使用便捷，适用于大多数应用场景。

2. 流程图

手机验证码登录流程

以下为完整的流程图，展示了验证码登录的逻辑步骤。

3. 实现步骤

3.1 前置条件

已注册短信服务平台账号（如阿里云短信、腾讯云短信）。后端服务器支持 HTTPS。确保前后端项目环境已搭建完毕。

3.2 前端流程

前端实现分为以下步骤：

用户输入手机号，点击获取验证码。校验手机号格式是否正确。调用后端接口发送验证码，并处理接口返回的状态。用户输入验证码后，提交登录表单。调用后端验证接口，完成登录。

示例代码

3.3 后端流程

后端主要负责两部分：

验证码发送：调用短信服务接口生成验证码并发送给用户。验证码校验和登录：验证用户提交的验证码并完成登录逻辑。

示例代码

Node.js + Express 示例：

const express = require('express');

const app = express();

const bodyParser = require('body-parser');

const smsService = require('./smsService'); // 短信服务封装

const users = {}; // 模拟数据库

app.use(bodyParser.json());

// 发送验证码接口

app.post('/send-code', async (req, res) => {

const { phoneNumber } = req.body;

if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {

return res.status(400).json({ success: false, message: '手机号格式不正确' });

}

const code = Math.floor(1000 + Math.random() * 9000); // 生成4位验证码

users[phoneNumber] = { code, timestamp: Date.now() }; // 保存验证码和时间戳

try {

await smsService.sendSms(phoneNumber, `您的验证码是 ${code}，有效期5分钟。`);

res.json({ success: true });

} catch (error) {

console.error('发送验证码失败:', error);

res.status(500).json({ success: false, message: '发送失败，请稍后再试' });

}

});

// 登录接口

app.post('/login', (req, res) => {

const { phoneNumber, verificationCode } = req.body;

const user = users[phoneNumber];

if (!user) {

return res.status(400).json({ success: false, message: '验证码未发送' });

}

const isExpired = Date.now() - user.timestamp > 5 * 60 * 1000; // 验证码5分钟有效

if (isExpired) {

return res.status(400).json({ success: false, message: '验证码已过期' });

}

if (user.code !== verificationCode) {

return res.status(400).json({ success: false, message: '验证码错误' });

}

// 登录成功，生成 Token

const token = generateToken(phoneNumber); // Token生成逻辑

res.json({ success: true, token });

});

// 模拟短信服务

function generateToken(phoneNumber) {

return Buffer.from(phoneNumber).toString('base64');

}

app.listen(3000, () => console.log('Server running on port 3000'));

3.4 短信服务平台配置

选择短信服务商

国内常用服务商：

阿里云短信腾讯云短信华为云短信 创建短信签名

登录服务商后台，提交签名申请（例如：公司名称或产品名称）。 创建短信模板

编辑验证码短信模板，如：您的验证码是 ${code}，有效期为5分钟。。 获取 API 配置

获取 API 密钥、接口地址，并将其配置在后端。

4. 完整流程详解

用户输入手机号，前端校验格式。前端调用后端发送验证码接口。后端生成验证码，调用短信服务商 API 发送短信。用户输入验证码并提交登录请求。后端校验验证码的正确性和有效性。登录成功后，生成并返回 Token，前端保存 Token。

5. 注意事项

验证码有效期：建议设置为 5 分钟，防止滥用。频率限制：限制单手机号每分钟只能发送一次验证码。安全性：

后端生成 Token 时使用加密算法。验证码应仅存储短时间（如 10 分钟内）。用户体验：前端显示倒计时提示用户验证码的有效期。