微信小程序登录产品设计方案

摘要:本文详细阐述了小程序微信登录体系的优化方案。针对现有登录链路中“微信一键登录”后强制绑定已有账号导致用户体验中断的问题,提出了“微信直登优先、绑定降级为可选”的核心策略。方案包括:默认路径下,未绑定微信时自动创建临时账号实现无缝登录;保留但优化“绑定已有账号”作为次级入口;明确了前后端接口职责分离(如新增prepare-bind接口)与数据规则(不进行复杂账号合并)。最终目标是提升登录转化率,提供符合用户直觉的流畅登录体验。

1. 背景与问题

当前小程序已接入微信快捷登录,但现有链路为:

  1. 用户点击“微信一键登录”
  2. 后端根据 code -> openId
  3. openId 未绑定已有博客账号,则前端强制进入“绑定已有账号”表单
  4. 用户必须再输入账号、密码、验证码才能完成登录

这条链路存在明显问题:

  • 与用户对“小程序微信一键登录”的预期不符,主路径被二次认证打断
  • 首次用户没有真正的“直接进入产品”能力,转化损耗高
  • 老用户迁移能力和新用户首访体验被混在同一条流程里,职责不清
  • 账号密码登录既承担“备用登录”,又承担“绑定已有账号”,交互语义混乱

因此需要将小程序登录体系调整为“微信直登优先、已有账号迁移降级为可选增强”的结构。

2. 目标

本次调整的目标是:

  • 微信一键登录必须形成真正闭环,用户点击后可直接进入产品
  • 保留已有 Web 博客账号的迁移能力,但不再阻塞默认登录路径
  • 账号密码登录保留为“绑定已有账号 / 备用登录”次入口
  • 前后端接口职责清晰,避免同一接口同时承担“登录”和“强制绑定引导”

3. 产品策略

3.1 默认主路径

默认主路径调整为:

  1. 用户点击“微信一键登录”
  2. 小程序调用 uni.login() 获取微信 code
  3. 后端用 code 换取 openId/sessionKey
  4. 若当前 openId 已绑定博客账号,则直接登录该账号
  5. 若当前 openId 未绑定任何账号,则自动创建一个 mini 来源的博客前台账号
  6. 后端直接返回站内登录 token
  7. 前端完成登录态写入、拉取 /front/user/info、回放待执行操作并返回来源页

用户不再被强制带入绑定流程。

3.2 次级路径

登录弹层中保留次入口“绑定已有账号 / 备用登录”,用户点击后展开账号表单。

展开后提供两条能力:

  • 账号密码登录
    作为纯备用登录路径,适用于不希望走微信授权的用户
  • 登录并绑定微信
    作为已有 Web 账号迁移路径,适用于想把当前微信身份绑定到既有博客账号的用户

这条绑定路径必须是用户主动选择,而不是默认强制流程。

3.3 绑定策略边界

本次 P0 只解决“未绑定微信时,用户主动选择将当前微信绑定到已有账号”的能力,不做复杂的数据合并系统。

边界如下:

  • 已绑定老账号:微信直登直接进入
  • 未绑定且直接点微信登录:自动创建 mini 账号并进入
  • 未绑定但用户主动点“登录并绑定微信”:绑定到已有账号并进入已有账号
  • 不做“登录后把已使用多日的临时 mini 账号数据合并到老账号”的复杂迁移

原因:

  • 账号合并涉及收藏、评论、关注、发布内容归属冲突,超出首版小程序登录 P0 范围
  • 小程序首版优先保证登录转化和进入产品的顺滑度

4. 交互方案

4.1 登录弹层结构

顶部信息:

  • Logo
  • 标题:欢迎来到 Sourcelin
  • 描述:优先推荐微信一键登录,减少输入成本并保留小程序原生体验

主按钮:

  • 微信一键登录

次级文字入口:

  • 绑定已有账号 / 备用登录

展开后表单:

  • 用户名 / 邮箱
  • 密码
  • 图形验证码(按后端开关)

展开后操作:

  • 主按钮:账号密码登录
  • 次按钮:登录并绑定微信

底部:

  • 协议勾选

4.2 我的页登录弹层

“我的”页底部登录弹层与独立登录页保持同一交互逻辑:

  • 默认仅显示微信一键登录
  • 用户主动展开后才显示账号表单
  • 不再出现“点击微信登录后直接跳绑定页”的跳转型体验

4.3 成功反馈

登录成功后:

  • 微信已绑定老账号:提示 微信登录成功
  • 微信未绑定但自动创建账号:提示 已通过微信登录
  • 主动绑定已有账号成功:提示 绑定成功,后续可直接微信登录

5. 后端接口策略

5.1 保留接口

  • POST /auth/login
    账号密码备用登录,loginType=mini
  • POST /auth/wechat/mini/bind
    绑定已有账号并完成登录

5.2 调整接口

POST /auth/wechat/mini/login

调整为统一返回 token 的登录接口:

  • 已绑定:直接登录并返回 token
  • 未绑定:自动创建 mini 账号并返回 token

返回体建议扩展字段:

  • bound
  • newUser
  • token

说明:

  • bound=true 表示当前微信已绑定到已有博客账号
  • bound=falsenewUser=true 表示本次已自动创建 mini 账号并直接登录
新增 POST /auth/wechat/mini/prepare-bind

用于“用户主动选择绑定已有账号”时准备绑定票据:

  1. 前端先调用微信 uni.login() 获取 code
  2. 后端通过 codeopenId/sessionKey
  3. 若该 openId 已绑定其他账号,则直接报错提示
  4. 若未绑定,则生成短期 bindToken
  5. 前端再提交账号密码到 /auth/wechat/mini/bind

这样可以保留原有绑定票据模型,但不再把它塞到默认登录路径里。

6. 前端实现策略

6.1 微信主登录

前端调用 /auth/wechat/mini/login 后,统一按“拿到 token 即登录成功”处理。

前端不再根据 bound=false 自动切到绑定模式。

6.2 绑定已有账号

当用户在展开表单后点击“登录并绑定微信”时:

  1. 前端先调用 uni.login()
  2. 调用 /auth/wechat/mini/prepare-bind
  3. 得到 bindToken
  4. 再将 bindToken + username + password + captcha 提交到 /auth/wechat/mini/bind
  5. 成功后写入新 token 并刷新当前用户信息

6.3 备用登录

用户点击“账号密码登录”时:

  • 仅调用 /auth/login
  • 不做微信绑定
  • 保持现有 token 流程不变

7. 数据与账号规则

7.1 自动创建账号规则

未绑定微信时自动创建 mini 账号,建议规则:

  • username:系统生成唯一值,例如 mini_xxxxxxxx
  • nickname:默认 微信用户xxxx
  • password:系统生成随机强密码,仅内部保存
  • uuid:正常生成
  • openIdbindWechatIdsessionKey:写入用户记录
  • userStatus=0delFlag=0

7.2 不做数据合并

本轮不做以下动作:

  • 自动把临时账号的收藏、关注、评论迁移到老账号
  • 自动删除自动创建的 mini 账号
  • 复杂的账号合并冲突处理

这是明确的范围控制,不是遗漏。

8. P0 实施范围

P0 包含:

  • 微信一键登录直接完成登录
  • 未绑定微信时自动创建 mini 账号
  • 登录弹层不再强制跳绑定
  • 保留并优化“绑定已有账号 / 备用登录”
  • 新增 prepare-bind 接口,支持用户主动绑定已有账号
  • 更新相关产品与开发文档

P1 再考虑:

  • 账号安全页
  • 登录后补资料引导
  • mini 自动创建账号与老账号的数据合并策略

9. 验收标准

满足以下条件视为本轮完成:

  1. 首次用户点击“微信一键登录”后,不再出现强制绑定页
  2. 首次用户能够直接登录进入首页/来源页
  3. 已绑定用户点击“微信一键登录”可直接进入原账号
  4. 用户主动展开表单后,可选择:
    • 账号密码登录
    • 登录并绑定微信
  5. 微信开发者工具和真机环境下,登录链路无 404、无错误跳转、无死循环

更多推荐