H5扫码签到 核心流程

H5扫码签到的核心是「二维码 + 后台接口 + 签到状态同步」。下面我给你从全流程视角梳理一遍用户扫码签到的完整实现流程，分为两个角色：签到发起端（比如主持人网页） 和 扫码签到端（比如用户手机） 。

---

✅ 一、整体流程图

 
        [发起签到人]
             |
      1.生成签到二维码（含唯一标识）
             |
             ↓
    展示二维码在主持人屏幕上
             ↓
        [扫码签到用户]
             |
      2.扫码 → 打开签到H5页面
             |
      3.前端调用签到接口
             |
      4.服务端校验、记录签到
             |
      5.返回签到成功/失败状态
             |
      6.签到页面展示签到结果

---

🔁 二、签到流程角色与职责拆解

👤 1. 签到发起端（比如主持人PC或大屏 H5）

👉 功能：

• 点击「发起签到」按钮，调用接口创建一次签到事件（返回 signInId）
• 用该 signInId 生成二维码并展示

👉 技术点：

• 使用 qrcode 或 qrcode.vue 生成二维码
• 二维码内容形如：https://yourdomain.com/signin?signInId=xxx

✅ 示例代码（生成二维码）：

import QRCode from 'qrcode'

const signInId = 'abc123'; // 来自后端
const qrUrl = `https://yourdomain.com/signin?signInId=${signInId}`;

QRCode.toCanvas(document.getElementById('canvas'), qrUrl)

---

👤 2. 扫码签到用户（用微信/浏览器扫码）

👉 流程：

1. 扫描二维码，跳转到签到页面
2. 签到页面获取 URL 中的 signInId
3. 获取当前用户身份（可结合登录/微信授权）
4. 调用后台接口进行签到（附带 signInId + userId）
5. 展示签到结果

✅ 示例代码（前端扫码页）：

const signInId = new URLSearchParams(location.search).get('signInId')
const userId = getUserIdFromLogin() // 获取登录态或微信openid

fetch('/api/signin', {
  method: 'POST',
  body: JSON.stringify({ signInId, userId }),
})
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      showSuccess()
    } else {
      showError(data.message)
    }
  })

---

🧠 三、后端接口设计

🧾 1. 创建签到接口（主持人发起签到）

 
POST /api/create-signin
Body: {
  topic: '活动签到',
  expiresAt: '2025-07-23T12:00:00'
}
Response: {
  signInId: 'abc123'
}

---

🧾 2. 用户签到接口（扫码后调用）

 
POST /api/signin
Body: {
  signInId: 'abc123',
  userId: 'u001'
}
Response: {
  success: true,
  message: '签到成功'
}

🔐 注意事项：

• 一个用户只能签到一次（用 Redis 或 DB 做去重）
• 签到时校验 signInId 是否存在、是否已过期
• 可以记录签到时间、地理位置、IP等信息

---

🧩 四、可选增强点

功能	技术点
微信授权登录	OAuth2.0 + openid
地理位置	navigator.geolocation或高德 SDK
防刷签到	限制 IP/UA 签到频率
实时查看签到人数	WebSocket / 轮询
签到数据导出	Excel 下载
自定义二维码样式	Canvas 画图合成

---

✅ 总结：扫码签到核心步骤

阶段	内容
A. 主持人发起	创建签到记录 → 获取 signInId
B. 生成二维码	二维码中含有 signInId
C. 用户扫码	跳转到 H5 签到页面
D. 发起签到请求	前端调用后端签到接口（signInId + userId）
E. 签到完成	返回结果，记录状态，提示成功

---