微信与手机号登录 · 工程师交互演示

v1.3.0-cn-demo / V4.7.5 · 所有认证与后台数据均为本地模拟。

从同一个登录入口开始

默认手机号登录，下方微信和邮箱图标可切换。没有独立注册入口。
已有账号验证后登录；新手机号验证后提示首次登录，继续绑定微信。
先微信授权的新用户必须验证手机号。两个身份验证完成后，确认昵称并点击完成注册，才创建同一个账号。
取消、授权失败、绑定冲突时不会提前创建新账号；已有微信关联不会被覆盖。

本次新增场景（方案 A）

在右上角“模拟服务”的“完整场景体验”选择入口。开始只退出当前模拟会话，不删除已有账号或绑定；需要还原初始数据时手动重置。

已有账号未绑定微信：使用 13700000000 验证登录，进入首页 → 头像 → 账号设置 → 绑定微信，选择未绑定的海风，模拟扫码并确认授权，返回账号设置核对微信昵称。不会重复注册。也可先授权未绑定微信，再验证这个已有手机号完成绑定。
邮箱不存在：填写场景提示的未关联邮箱和演示密码，完成模拟验证后提示“新用户请先使用手机验证码方式登录”，自动切换手机号验证码页。邮箱存在但密码错误时留在原页，不误导注册；输入邮箱不会自动绑定到手机号账号。
新用户：先验证演示手机号，再授权未绑定微信，确认昵称并点击完成注册才创建账号。手机号验证本身不创建账号。先从微信进入也必须补充手机号验证；已有关联微信仍登录原账号。

验证码为 246810。场景会推荐未注册的演示手机号；若海风或备用账号已被你绑定，请在模拟服务中重置本地测试数据后重演。取消、过期和绑定冲突保留原规则，不覆盖已有绑定。

跟着小手走一遍

默认先指向手机号；新用户说明会明确提示先验证手机号。选择场景后，小手按邮箱输入、自动转手机号、验证、绑定或注册、进入首页的实际路径继续。阅读协议、手动勾选、模拟扫码、手机授权、验证码、注册确认都有当前步骤指引。悬停目标可读详细解释；顶部可关闭引导。系统减少动态效果设置会停用动画。

后台如何核对

用已有管理员演示账号登录，点击头像 → 玖麦管理后台。列表邮箱、手机号下方直接显示微信信息：未绑定时显示“未绑定微信登录”，已绑定时显示“微信：昵称”。点击用户仍可展开完整详情。列表与详情使用同一绑定数据；加载失败可重试，不误显示为未绑定；昵称缺失显示“已绑定微信 · 昵称暂不可用”。小手跟随当前展开的用户，读取失败不会显示成未绑定。新注册账号是普通用户，不会获得管理员权限。

演示数据

已有管理员：13800000000，邮箱 demo@example.test，初始密码 Demo123!。
另一已有账号：13700000000；新用户可用 13900000000。
模拟短信码：246810；发送前需完成本地滑块。
微信“小麦”初始绑定管理员，“海风”初始未绑定；顶部模拟服务工具可重置本地数据。

登录体验修正

登录成功后显示 3 秒倒计时，自动进入首页，也可立即点击进入；离开成功页后停止倒计时。账号内绑定成功仍手动返回账号设置。
微信服务不可用时同时提供重试、手机号和邮箱登录。切换到其他方式会结束本次微信流程。
微信扫码登录页移除左下角取消；保留刷新、方式切换和弹窗关闭。账号内绑定仍保留取消绑定。
切换微信登录之前须主动勾选用户协议，否则留在原方式并提示。
会话失效默认回到手机号验证码登录，其他登录方式只列微信、邮箱；切换后始终排除当前方式。

手机号登录方式统一

手机号登录包含验证码和密码两种模式。验证码页显示“使用密码登录”，密码页显示“使用验证码登录”；双向切换保留已输入手机号，密码仅用于手机号密码模式。两页下方其他登录方式均只列微信和邮箱；邮箱仍通过邮箱入口登录，原拖动验证、验证码与注册流程保留。

密码登录入口

手机号表单主按钮下方提供全宽描边“使用密码登录”，沿用玖麦橙色、圆角与键盘焦点样式。只增强入口可见性，密码、拖动验证及账号判断逻辑不变。

微信登录协议校验：后端开发要求（尚未实现）

本 Demo 只模拟前端勾选检查。以下为工程实现约束，不代表现有后端已具备，也不改变既有注册或绑定规则。微信身份授权与平台协议同意分别验证。

用户主动勾选后，前端发起微信登录事务；提交同意标志及所展示的协议版本。后端核对服务器认可的版本，校验请求来源及 CSRF 防护，使用服务器时间记录同意，不能单靠回调传入的 agreed=true 放行。
后端创建短期、一次性的随机 state，关联当前浏览器的登录前会话、登录事务、平台标识、用途（登录或绑定）、协议版本／文档摘要、同意时间和经过白名单校验的返回目标。绑定用途还须关联当前已登录账号；禁止客户端任意指定绑定对象。
微信回调由后端验证 state 的匹配、浏览器关联、用途、有效期、取消及使用状态，再验证授权结果。state 不是身份凭证，code 与令牌不得写入 URL 日志或暴露给前端；具体微信接口能力由工程师按官方接入文档确认。
发放平台会话之前，再次检查该事务的同意记录及账号状态。缺少记录、版本失效或事务过期时不发放会话，也不创建账号或绑定；提示重新阅读勾选并重新发起登录，不能用回调补造同意记录。
已关联微信按既有账号规则登录；未关联微信继续手机号验证。新用户保留“手机号验证＋微信授权＋最终确认”才创建账号的规则，授权回调本身不能提前创建账号。最终提交再次校验短期证明、同意记录、账号状态与绑定唯一性。
二维码刷新使用新的 state，使旧二维码不能完成本次登录；切换方式、关闭或取消后取消当前事务。新事务仅能复用同一浏览器内仍有效且未撤回的同意记录。前端取消若未送达后端，不应宣称远端事务已撤销；新事务替换及到期仍须后端兜底。
回调及最终提交须原子处理并防止重复消费。重复请求不得重复创建账号、覆盖绑定或再次兑换授权码。登录成功才返回已验证的结果；成功倒计时仅属于页面跳转，不能作为认证通过依据。
同意记录在身份确认后关联到账号，保留事务标识、平台、协议版本／摘要、服务器时间、用途及处理结果。不要记录密码、短信验证码、微信授权码或令牌。此记录证明系统接收了同意动作，不能证明用户实际阅读理解。

开发验收清单

应覆盖：绕过前端直接发起、未同意／错误版本、伪造或跨浏览器 state、过期／取消／旧二维码回调、重复和并发回调、最终注册证明过期、绑定冲突、停用账号、成功及安全返回目标；失败均不得生成平台会话或部分账号／绑定。

待工程／业务确认的配置

协议版本更新后是否重新同意、事务有效期、同意记录保留期限与访问权限，须沿用平台已批准规则；尚未确定的值不能自行填定。本次不新增业务规则，不实现真实 OAuth 或后端服务。

设计参考：Keycloak 登录方式选择模板；安全实现参考：OAuth 2.0 安全最佳实践 RFC 9700。仅借鉴交互层级；未引入外部脚本、样式或依赖。

验收边界

所有操作只读写当前浏览器 localStorage。页面不连接微信、短信、真实后端或付费模型；不要输入真实凭证。真实开发需实现服务端身份校验、会话、授权与并发绑定校验，本演示不替代这些安全能力。

视觉概念

以商品创意走向全球为主题，使用浅色概念图，橙色轨道连接商品视觉与全球市场，合作资源作为底部背书。概念图为内置 imagegen 生成的演示插画。

返回演示