话费充值系统基于NodeJS+MongoDB 有微信支付、微信通知

效果预览

• 小程序端 （体验可以搜小程序: 丘宇海外助手）

• 管理端

项目功能简介

✨项目主要对接第三方接口充值海外手机话费业务

✨ 基于 vue3+js+antd+nodejs+express.js+uniapp+mongodb 搭建

• 管理端

1. 基于角色权限管理
2. 登录、首页统计信息
3. 访客记录、操作记录、用户信息
4. 订单管理（话费和流量）、充值日志管理、各国家套餐管理
5. 广告管理、公告通知、客服内容配置
6. 会员卡、优惠券管理和配置
7. 下单、支付、黑名单、退款、协议、第三方API、小程序、公众号等配置
8. 小程序页面自定义装饰配置
9. 主题更换、全局搜索等等

• 小程序端

1. 用户无感登录
2. 话费、流量充值
3. 微信支付、订单退款、微信订阅通知
4. 开通会员、领取优惠券
5. 个人信息修改
6. 订单信息查询等等

基于角色权限设计

项目中我采用的权限设计方案属于基于角色的访问控制（Role-Based Access Control，RBAC）。RBAC 是一种常见且广泛使用的权限管理模型，它通过将用户分配到不同的角色，然后将角色与特定的权限关联，来实现对系统资源的访问控制。

基于RBAC 模型的权限设计方案有四个部分：

1. 角色（Roles） ： 角色是一组用户，这些用户在系统中具有相似的权限需求。每个角色都会被分配一组权限，然后用户被分配到角色而不是直接分配权限。
2. 权限（Permissions） ： 权限定义了用户可以执行的操作或访问的资源。每个角色都会被授予一组权限，这些权限定义了该角色所能执行的操作。
3. 用户（Users） ： 用户是系统的最终操作者。每个用户都会被分配一个或多个角色（项目中没有使用多角色），这些角色决定了他们在系统中的权限。
4. 前端路由匹配 ： 前端根据用户的角色和权限信息，动态生成菜单和路由。这意味着当用户登录系统时，前端会根据用户的角色查询其对应的权限，然后根据权限配置来渲染出适当的菜单和页面。

在 RBAC 模型中，角色充当了用户和权限之间的中介，简化了权限管理和维护。

权限基本关系是：当用户登录后再查询出角色信息，然后关联出角色对应的权限信息

• 前端权限设计

原理：根据权限表数据和路由元信息进行匹配，然后筛选出对应的菜单

• 后端权限设计

原理：是对每个请求进行权限验证 每个请求前端都会携带token,基于这个信息来进行验证用户的权限

其中会经过两轮的验证：token验证 和 接口权限验证 以确保数据的安全性

详细可查看我的这篇文章 【项目总结】关于权限系统前后端的设计方案

微信支付 v3支付接口

使用的是全新的微信支付 APIv3，优点是 - 使用JSON作为数据交互的格式，不再使用XML

小程序支付逻辑全流程图解：

详细可查看我的这篇文章 Nodejs实现微信小程序支付功能前后端全流程实践 全新的微信支付 APIv3

其中最为复杂和容易出错的在 后端生成支付参数 这一步

后端生成支付参数

后端生成支付参数响应给前端小程序进行拉起支付

/**
 * 微信支付v3 付款签名生成支付参数
 * @param {string} prepay_id 预支付交易会话标识
 */
exports.createPaySign =async function (prepay_id) {
    let timeStamp = (Math.floor(new Date().getTime() / 1000)).toString();
    let nonceStr = generateNonceStr(32);
    const ac = await getThirdKeys()
    let signStr = `${ac.appid}\n${timeStamp}\n${nonceStr}\nprepay_id=${prepay_id}\n`;
    let cert = fs.readFileSync(`./pems/files/${ac.pem}`, "utf-8");
    let sign = crypto.createSign("RSA-SHA256");
    sign.update(signStr);
    return {
        paySign: sign.sign(cert, "base64"),
        timestamp: timeStamp,
        nonce_str: nonceStr,
        signType: 'RSA',
        package: 'prepay_id=' + prepay_id
    };
}

小程序拉起支付

// 从后端获取到支付参数（上面 createPaySign 生成的数据）
phoneWxRequest(that.form).then(res => {
 wx.requestPayment({
  provider: 'wxpay',
  timeStamp: res.timestamp,
  nonceStr: res.nonce_str,
  package: res.package,
  signType: res.signType,
  paySign: res.paySign,
  success(res) {
   uni.showModal({
    title: '提示',
    content: '支付成功!',
    showCancel: false,
    success: function(res) {
     if (res.confirm) {
      uni.switchTab({
       url: '/pages/index/index'
      })
     }
    }
   });
  },
  fail(err) {
   uni.switchTab({
    url: '/pages/index/index'
   })
   console.log('fail:' + JSON.stringify(err));
  }
 });
})

微信支付回调 （会多次调用）

微信支付通过支付通知接口将用户支付成功消息通知给商户(也就是在这里接收到支付是否成功 去修改订单状态)。
https://pay.weixin.qq.com/docs/merchant/apis/jsapi-payment/payment-notice.html

回调URL： 该链接是通过基础下单接口中的请求参数“notify_url”来设置的，要求必须为HTTPS地址。请确保回调URL是外部可正常访问的，且不能携带后缀参数，否则可能导致商户无法接收到微信的回调通知信息。回调URL示例：“https://qy.xxx.com/v1/payment/wx/success”

微信通知

微信通知交互类似于下图

1. 前期准备：微信小程序后台开通微信通知服务并且配置模板，具体方法自行百度

2. 代码实现：

• 前端：
  拉起订阅消息板

 // 订阅消息
subscribe() {
 wx.requestSubscribeMessage({
 // 最多配置3个订阅模板
  tmplIds: ['33PJeEz4LvjGkHQHexIEd_T711rx1VEhqNicj620nGc',
   'lYYnUAbolXwHaL6IR3HhWPTiprgmKigGvuwC_cHn61E',
   's8yxlrkibXNKz54tRqzOf4EY02QMCkSHzZSwFXG52KY'
  ],
  success(res) {
   console.log(res)
  },
  fail(err) {
   console.log(err)
  }
 })
},

• 后端：
  主动发送一次性模板通知消息

注意构建 data 的数据要和模板的数据类型一致，否则会发送失败

// 发送小程序订阅消息
async function sendSubscribeMsg(params) {
    let accessToken = await getWxAccessToken()
    let info = {
        "template_id": params.template_id,
        "touser": params.touser,
        "page": params.page,
        "data": params.data ,
        "miniprogram_state": params.miniprogram,
        "lang": "zh_CN",
    }
    return axios.post(`https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${accessToken}`,info);
}

消息推送通知返回信息：

// 成功
{"errcode":0,"errmsg":"ok","msgid":3366503134080123000}
// 失败 用户拒绝通知
{"errcode":43101,"errmsg":"user refuse to accept the msg rid: 65ed8179-6b245d4c-493956ff"}

推送成功：

最后

该项目现已上线运营，可支持二开、作为各种管理系统，基础功能都已完成，开箱即用，需要完整源码或者项目合作的同学可联系我哦 😊😊

不明白之处或者觉得处理的不好的地方可以评论区留言，期待和各位大佬的交流😊

联系方式

• QQ: 1840354092
• 微信 （备注事由）