网页用户中心

功能介绍

网页用户中心是飞鸟快验内置的一套 H5 网页自助中心(基于 uni-app + Vue3 开发,移动端/PC 浏览器均可打开),给最终软件用户使用。前端已经打包进服务端二进制文件里,无需单独部署,升级服务端即自带。

你的软件用户不需要找代理、不需要联系客服,打开网页就能自己完成:登录、注册、找回密码、查看到期时间、在线充值、卡号充值、换绑手机、参与签到/大转盘/邀请返利等活动。

核心特点:

特点	说明
零部署	前端已 go:embed 进服务端二进制,发版即自带,不用单独跑 nginx/静态服务器
一套前端服务所有应用	访问地址携带 AppId(/user/{AppId}/),前端从地址栏自动识别当前应用,不用按应用重复打包
同源请求	页面和 /userApi/ 接口同源,无跨域问题
多应用登录隔离	登录令牌按 AppId 分别存储,同一浏览器可以登录多个应用互不干扰
自适应	手机全屏显示,PC 端自动限宽 430px 竖屏居中,天然适合 iframe/WebView 内嵌
后台可开关	每个应用可单独 启用/停用,停用后接口直接拒绝

访问入口

网页用户中心的访问地址固定为:

http://服务器IP:18888/user/{AppId}/

把 10001 换成你自己的应用 AppId,结尾带 /。例如 http://demo.fnkuaiyan.cn:18888/user/10001/。

功能一览

登录后底部有三个 tab:首页(下载)、活动、我的。

模块	说明
登录/注册/找回密码	按应用类型自动适配:账号型应用(账号+密码+注册),卡号型应用(仅输卡号直接登录);带点选验证码、登录防爆破、应用公告栏
个人中心	用户名/Uid/积分/余额、会员等级、VIP 到期时间、立即续费入口
充值	在线支付(自动适配微信/支付宝环境,可用优惠券抵扣)、卡号充值(useKa)、充值订单记录
个人资料/绑定手机号	修改资料,短信验证码换绑手机
我的优惠券	领券中心(领取后台投放的优惠券)+ 我的券列表,充值时抵扣
每日签到	签到得积分、签到分记录、签到分兑换(积分换奖励)
邀请有礼(CPS)	专属邀请码/邀请链接、邀请列表、返利订单
幸运大转盘	抽奖活动,消耗/获得奖励后台可配
APP 下载	展示应用名/版本/二维码/APK 下载,微信内打开有引导提示

活动开关

签到、大转盘、邀请有礼(CPS)三类接口受后台对应活动开关控制,活动未开启时接口直接拒绝,前端入口也拉不到数据。使用前先在管理后台把对应活动配置好。

页面地址速查

所有页面都是 hash 路由,#/ 后面接页面路径,完整格式:

http://服务器IP:18888/user/{AppId}/#/pages/user/home

页面	路径(#/ 后面的内容)
登陆	pages/login/login
注册	pages/login/reg
修改密码	pages/login/forget
个人中心	pages/user/home
个人资料	pages/user/userInfo
绑定手机号	pages/user/edit-phone
充值	pages/user/payka
充值订单	pages/user/payOrder
我的优惠券	pages/user/coupon
APP 下载	pages/about/index
活动列表	pages/promotion/list
每日签到	pages/checkIn/index
签到分记录	pages/checkIn/detail
签到分兑换	pages/checkIn/mall
邀请有礼	pages/cps/index
幸运大转盘	pages/luckyWheel/index

需要登录的页面未登录访问时,会自动跳到登录页并在登录成功后跳回原页面,所以直接分享活动页地址给用户也没问题。

后台配置

管理后台 → 应用管理 → 编辑应用 → 网页用户中心:

字段	说明
状态	启用/停用。停用后该应用所有用户中心接口直接拒绝,前端提示"应用已关闭网页登陆"
下载地址	下载页展示的安装包地址(.apk/.ipa),前端按后缀自动切换安卓/iOS 图标
登陆防爆破起始次数	登录失败达到该次数后强制要求点选验证码(默认 3)
注册是否要验证码	开启后注册需完成点选验证码
发短信是否要验证码	开启后发送短信前需完成点选验证码
用户中心域名	无感登录 302 跳转、CPS 短链生成使用的域名,留空则使用系统设置里的系统地址。套了自定义域名/nginx 反代必须填这里,否则用户会被跳到 IP:18888
限代理用户充值	开启后,没有代理归属(AgentUid=0)的用户禁止在线充值,提示"无归属,暂不可充值",用于保护代理渠道

内嵌方式

方式一:直接链接跳转

最简单的方式,软件里放个按钮或客服话术,让用户用浏览器打开:

http://服务器IP:18888/user/{AppId}/

用户自己登录即可,登录态存在浏览器本地。

方式二:无感登录(软件内打开,推荐)

用户已经在软件里登录过了,再让他在网页上输一遍账号密码体验很差。用用户Api 的 LoginShortUrl 接口(1.0.391+ 版本可用),拿一个一次性免登链接,软件内 WebView/系统浏览器直接打开就是已登录状态:

POST http://服务器IP:18888/Api?AppId=10001
Token: 用户登录后的令牌

{
    "Api": "LoginShortUrl",
    "Time": 1688551155,
    "Status": 13013,
    "JumpUrl": "pages/user/home"
}

JumpUrl 填 #/ 后面的页面路径(见上面的页面地址速查),可以直接落到充值页、签到页等活动页,留空默认进个人中心。

响应返回两个东西:

参数	说明
webUser	一次性免登链接,形如 http://域名/userApi/base/loginKey?k=eAapRxLX&j=pages/user/home,直接打开
webUserPng	同一链接的二维码(base64 图片),可以让 PC 软件用户手机扫码进手机版用户中心

打开流程(服务端自动完成,无需处理):

打开 loginKey 链接 → 服务端校验一次性key → 给用户签发网页用户中心会话
→ 写入 tempToken Cookie → 302 跳转到 /user/{AppId}/#/{JumpUrl}?tempToken=xxx
→ 前端读取 tempToken(Cookie 或 URL 参数)换成本地登录态 → 直接进入,全程无感

一次性与有效期

k 参数是缓存里的一次性 key,有过期时间,不要把它当成长期链接存在客户端里,应该在需要时实时调 LoginShortUrl 取新链接。

方式三:iframe 嵌入自己的网站

网页用户中心原生支持 iframe 内嵌:用户中心内每次页面跳转,都会向父页面发送 URL_CHANGE 消息,宿主页面可以同步感知用户走到了哪一页(比如做埋点、联动 UI)。

<iframe
  src="http://服务器IP:18888/user/10001/"
  style="width: 100%; height: 100%; border: 0;">
</iframe>

<script>
  window.addEventListener('message', (e) => {
    if (e.data && e.data.type === 'URL_CHANGE') {
      console.log('用户中心当前地址:', e.data.url)
      // 可根据 url 判断当前页面,联动宿主站点的菜单/统计
    }
  })
</script>

如果想让 iframe 打开即是登录态,把 src 换成方式二取到的 webUser 免登链接即可。

iframe + 无感登录必须 https

免登链接种的 Cookie 是 SameSite=None,浏览器规定它必须搭配 Secure(https)才能在跨站 iframe 里生效。http 站点用 iframe 嵌免登链接会掉登录态(顶层直接打开不受影响)。宿主站点和用户中心都上 https 再嵌。

PC 端打开时页面自动限宽 430px 竖屏居中,嵌在网站侧边栏、弹窗、软件内嵌面板里都很自然。

方式四:自定义域名(nginx 反代)

不想暴露 IP:18888,想用自己的域名直接访问用户中心,用 nginx 把三段路径反代到服务端:

server {
    listen 443 ssl;
    server_name uc.你的域名.com;
    # ssl_certificate ...;

    location /user/ {
        proxy_pass http://127.0.0.1:18888/user/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    location /userApi/ {
        proxy_pass http://127.0.0.1:18888/userApi/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    location /c/ {                 # CPS 短链跳转,用到短链推广才需要
        proxy_pass http://127.0.0.1:18888/c/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

然后到后台把该应用的 用户中心域名 填成 https://uc.你的域名.com,这样无感登录 302、短链生成都会用新域名。三段路径(​/user/、/userApi/、/c/)要转发的和后台填的域名协议一致,https 站务必配好证书,否则免登 Cookie 不生效。

使用场景

场景	说明
纯卡密软件补自助能力	软件本身没有续费/充值界面,把用户中心链接发给用户,到期查询、在线充值、卡号充值、换绑手机全自助,省客服
软件内一键打开	调 LoginShortUrl 无感登录,在软件里放"个人中心"按钮直接打开,零操作成本
PC 软件扫码进手机端	取 webUserPng 二维码展示在软件界面上,用户手机扫码进手机版用户中心完成支付
活动运营留存	签到送积分、积分兑换、幸运大转盘、优惠券,配合后台投放活动拉活跃
CPS 裂变推广	邀请有礼生成专属邀请短链,新用户经短链落地注册自动归因,邀请人拿返利
APP 分发	下载页展示版本号、二维码、安卓/iOS 下载,微信内打开自动出引导提示

常见问题

Q: 打开提示"应用已关闭网页登陆"? 后台该应用的网页用户中心状态是"停用",去 应用管理 → 编辑应用 → 网页用户中心 打开。

Q: 无感登录跳转到了 IP:18888 而不是我的域名? 该应用的"用户中心域名"没填,留空时回退到系统设置里的系统地址。填上自定义域名即可。

Q: iframe 里免登链接打开是未登录状态? 宿主页面是 http 或跨站 iframe 场景下 SameSite=None Cookie 被浏览器丢弃,改用 https(宿主站和用户中心都要)。

Q: assets 静态资源路径里是 /user/10001/,我的 AppId 不是 10001 会有问题吗? 没有问题,前端一套资源服务所有应用,服务端对 /user/{任意AppId}/assets/* 通配返回同一份资源,AppId 由前端从地址栏实时解析。

Q: 签到/大转盘/邀请有礼页面打不开数据? 对应活动没有在后台开启,或该应用没有配置活动。活动开关在管理后台对应活动模块里。