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

1. 概述

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

---

2. 流程图

手机验证码登录流程

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

---

3. 实现步骤

3.1 前置条件

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

---

3.2 前端流程

前端实现分为以下步骤：

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

示例代码

<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="onLogin">
      <label>手机号</label>
      <input v-model="phone" placeholder="请输入手机号" @input="validatePhone" />
      <label>验证码</label>
      <input v-model="code" placeholder="请输入验证码" />
      <button type="button" :disabled="isSending" @click="sendCode">获取验证码</button>
      <button type="submit" :disabled="!canLogin">登录</button>
    </form>
    <p v-if="countdown > 0">重新发送验证码：{{ countdown }}秒</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const phone = ref('');
    const code = ref('');
    const isSending = ref(false);
    const countdown = ref(0);
    const timer = ref(null);

    const validatePhone = () => /^1[3-9]\d{9}$/.test(phone.value);

    const sendCode = async () => {
      if (!validatePhone()) {
        alert('请输入正确的手机号');
        return;
      }
      isSending.value = true;
      countdown.value = 60;

      try {
        await fetch('/api/send-code', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ phone: phone.value }),
        });
        alert('验证码已发送');
      } catch (error) {
        alert('验证码发送失败，请重试');
      } finally {
        isSending.value = false;
      }

      timer.value = setInterval(() => {
        countdown.value -= 1;
        if (countdown.value <= 0) {
          clearInterval(timer.value);
        }
      }, 1000);
    };

    const canLogin = ref(false);
    watch([phone, code], () => {
      canLogin.value = validatePhone() && code.value.length === 6;
    });

    const onLogin = async () => {
      try {
        const response = await fetch('/api/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ phone: phone.value, code: code.value }),
        });
        const data = await response.json();
        if (data.success) {
          alert('登录成功');
          // 处理登录后逻辑
        } else {
          alert('验证码错误');
        }
      } catch {
        alert('登录失败，请重试');
      }
    };

    return { phone, code, isSending, countdown, sendCode, canLogin, onLogin };
  },
};
</script>

<style>
.login-container {
  width: 300px;
  margin: 50px auto;
}
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

---

3.3 后端流程

后端主要负责两部分：

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

示例代码

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 短信服务平台配置

1. 选择短信服务商

   • 国内常用服务商：
     • 阿里云短信
     • 腾讯云短信
     • 华为云短信

2. 创建短信签名

   • 登录服务商后台，提交签名申请（例如：公司名称或产品名称）。

3. 创建短信模板

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

4. 获取 API 配置

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

---

4. 完整流程详解

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

---

5. 注意事项

1. 验证码有效期：建议设置为 5 分钟，防止滥用。
2. 频率限制：限制单手机号每分钟只能发送一次验证码。
3. 安全性：
   • 后端生成 Token 时使用加密算法。
   • 验证码应仅存储短时间（如 10 分钟内）。
4. 用户体验：前端显示倒计时提示用户验证码的有效期。