扫描二维码实现自动兑换积分的完整流程

需求分析：在 FastGPT 平台实现用户扫描二维码自动兑换积分功能

用户扫描包含兑换码信息的二维码，自动跳转到门户网站登录页，登录成功后，自动兑换兑换码，增加账号积分

实现用户无需手动输入兑换码，提升用户体验

需求分析

二维码的本质

二维码的本质是用二维图形存储二进制数据的信息载体

扫描一次二维码的本质是通过光学识别将图形转化为二进制数据，再解码出二维码中包含的数据，并执行

二维码需要包含的信息

  1. 重定向地址
  2. 兑换码
  3. 兑换码是否被使用

实现登录后自动兑换的方案

方案A：携带查询参数到登录页

扫描二维码后, 会重定向到登录页, 同时url中会携带兑换码信息作为查询参数

登录接口会接收查询参数中的兑换码信息, 并在登录成功后再传递给兑换接口

兑换接口在收到兑换码信息后执行, 即可兑换积分

方案B：使用本地存储

扫码跳转登录页后，将兑换码存储在本地存储

登录后检测本地存储，符合条件则执行兑换API，并删除存储

具体实现

技术选型

选择方案B

原因:

  1. 登录接口有多种, 微信登录, 账密登录等等, 选择方案A的话每个接口都需要修改
  2. 修改底层登录接口这种行为, 入侵性太强, 不适合

实现步骤

  1. 拼接门户网站URL和查询参数为一个重定向地址，用重定向地址生成二维码
  2. 跳转登录页后，检测URL查询参数包含兑换码，取出并存在本地存储
  3. 新写一个hook，挂载在layout文件中，实现登录成功后，从本地存储中取出兑换码，并执行兑换API，删除存储

优点

  1. 登录成功，进入页面后自动执行，同时不破坏代码原有的逻辑结构，未来还可以拓展
  2. 符合React的钩子设计哲学(声明式而不是命令式)
  3. 实现登录与兑换解耦

实现效果

用户扫描二维码后，整个兑换流程自动化完成，无需手动操作，大大提升了用户体验

优点

  • 用户体验流畅，无需手动输入兑换码
  • 代码侵入性小，不破坏原有架构
  • 可扩展性强，未来可以支持更多功能

后续优化方向

  • 增加兑换码的有效期验证
  • 支持批量兑换码处理
  • 添加兑换记录和日志功能