前端node实现 jssdk 分享到朋友圈或者朋友

2019-01-17 本文已影响0人 sponing

分享该文章的原因是，后台由于各种原因迟迟或者未能提供该jssdk接口给你，但你项目中又必须用到该接口的话，阻塞你的项目进程，这里就自己手动用node实现jssdk

安装教程

1. git clone https://gitee.com/Jaction/wx_JSSDK.git
2. cd wx_JSSDK
3. cnpm i
4. cnpm run start

注意先cnpm run start 之前先全局安装supervisor

cnpm i supervisor -g

NodeJS热部署工具 — supervisor

image.png
项目启动成功

一、微信公众平台

参数和白名单

地址：微信公众平台官网
账号：用非个人微信的邮箱注册个账号

开发者ID(AppID)
开发者密码(AppSecret)
配置白名单 (node项目部署的服务端IP，不设置的话，请求微信公共接口会提示你去配置白名单)

图片如下
地址：微信公众平台 - 开发 - 基本配置

image.png

设置JS接口安全域名

JS接口安全域名是前端部署服务器后的链接，而不是你node部署的服务器

注意点：

链接的详细地址，包括二级域名和文件目录比如： xxx.baidu.com/h5/active
txt文件也是放在服务器的h5/active文件下，比如是采用vue + webpack编译的话，就放在跟index.html同个文件下

image.png

到此为止：微信公众平台的设置基本就搞定了，剩下就是实例开发问题了

二、node项目

node项目采用koa2框架来做的，这里就不多说如何构建koa2了，自行百度

koa2 test_jssdk
cd test_jsskd
cnpm i
cnpm run start

网页就localhost:3000打开就ok
分别在以下文件新建或者编辑代码

方法一

// app.js
const jssdk = require('./routes/jssdk')
app.use(pccjssdk.routes(), pccjssdk.allowedMethods())

这里写了post和get两种请求方式，任一用其中一种即可

// routes/jssdk.js
const router = require('koa-router')()
const jssdk = require('./../jssdk/index.js')

router.prefix('/jssdk')


router.post('/api', async (ctx, next)=> {
    let { url } = await ctx.request.body;
    console.log(ctx.request.body, 'ctx.request.body')
    ctx.body = {
        resCode: 0,
        obj: await jssdk(url),
        msg: ''
    }
})

router.get('/api', async (ctx, next)=> {
    let { url } = await ctx.request.query;
    ctx.body = {
        resCode: 0,
        obj: await jssdk(url),
        msg: ''
    }
})


module.exports = router

// jssdk/index.js
let sign = require('./sign.js');
const appid = "wx83647cc6a3d31xxx";  // 复制自己的appid
const appSecret = "c1bd64f161cb8644d65275d99893xxxx"; // 复制自己的appSecret 

// 后台请求用了flyio的库来做，也比较容易，自行百度查找
let fly=require("flyio")


// 获取access_token
let getAccessToken = ()=> {
    return new Promise((resolve, reject)=> {
        let url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+appid+'&secret='+appSecret;
        fly.get(url).then(res=> {
            console.log(res, '获取access_token')
            resolve({
                access_token: res.data.access_token,
                expires_in: res.data.expires_in
            })
        }).catch(error=> {
            console.log(error)
        })
    })
}

// 获取jsapi_ticket
let getJsapiTicket = ()=> {
    return new Promise((resolve, reject)=> {
        getAccessToken().then(res=> {
            let {access_token, expires_in} = res;
            let ticketUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi';
            fly.get(ticketUrl).then(params=> {
                console.log(params, '获取jsapi_ticket')
                let ticket = '';
                if (params.data.errmsg == 'ok') {
                    ticket = params.data;
                    resolve(ticket)
                } else {
                    reject()
                }
            }).catch(error=> {
                console.log(error)
            })
        })
    })
}

// 计算signature
let getSignature = (url)=> {
    return new Promise((resolve, reject)=>{
        getJsapiTicket().then(res=> {
            console.log(res, '计算signature')
            let ticket = res.ticket;
            let getSign = sign(ticket, url);
            console.log(getSign, 'getSign')
            resolve(getSign);
        })
    })
}

// var signatureStr = sign(content.ticket, req.body.url);
module.exports = (url)=> {
    return new Promise((resolve, reject)=> {
        getSignature(url).then(res=> {
            console.log(res, '========>>>>>' + JSON.stringify(res))
            resolve({
                appid,
                jsapi_ticket: res.jsapi_ticket,
                noncestr: res.nonceStr,
                sign: res.signature,
                timestamp: res.timestamp,
            })
        })
    })
}

// jssdk/sign.js
// 随机字符串
const domain = 'http://creapptest.pacificcoffee.com.cn/h5/coupon/';
var crypto = require('crypto'); // hash加密
var createNonceStr = function () {
  return Math.random().toString(36).substr(2, 15);
};

// 时间戳
var createTimestamp = function () {
  return parseInt(new Date().getTime() / 1000) + '';
};

// 排序拼接
var raw = function (args) {
  var keys = Object.keys(args);
  keys = keys.sort()
  var newArgs = {};
  keys.forEach(function (key) {
    newArgs[key.toLowerCase()] = args[key];
  });
  var string = '';
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k];
  }
  string = string.substr(1);
  return string;
};

/**
* @synopsis 签名算法 
*
* @param jsapi_ticket 用于签名的 jsapi_ticket
* @param url 用于签名的 url ，注意必须动态获取，不能 hardcode
*
* @returns
*/
let sign = (jsapi_ticket, url = domain)=> {
  let ret = {
    jsapi_ticket: jsapi_ticket,
    nonceStr: createNonceStr(),
    timestamp: createTimestamp(),
    url: url
  };
  let string = raw(ret);
  let shasum = crypto.createHash('sha1');
      shasum.update(string);
  let signature = shasum.digest("hex");
  ret.signature = signature;
  return ret;
};

module.exports = sign;

方法二

const router = require("koa-router")();
const fs = require("fs");
const path = require("path");
const moment = require("moment");
const request = require("request");
var crypto = require("crypto");
const appid = "wx83647cc6a3d31bc3";
const appSecret = "c1bd64f161cb8644d65275d99893cc10";

router.prefix('/jssdk')

const filePath = path.join(__dirname, "/wxconfig.json");
router.post("/wxconfig", async (ctx, next) => {
  const req = ctx.request.body;
  console.log(req);
  let nowUrl = req.url;

  // 定义两个函数返回Promise对象，用来组成串行，并最终获取到jsapi_ticket后最终处理成签名。

  // 获取accessToken
  const getToken = function() {
    let p1 = new Promise((reslove, reject) => {
      request(
        "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+ appid +"&secret=" + appSecret,
        function(error, response, body) {
          if (!error && response.statusCode == 200) {
            console.log(body);  // 注意返回的数据是一个纯字符串，要格式化处理
            let token = JSON.parse(body).access_token;
            if (token !== "") {
              reslove(getJsapi(token));
            }
          }
        }
      );
    });
    return p1;
  };

  // 获取jsapi_ticket
  const getJsapi = function(token) {
    let p2 = new Promise((reslove, reject) => {
      request(
        "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" +
          token +
          "&type=jsapi",
        function(error, response, body) {
          if (!error && response.statusCode == 200) {
            console.log(body); // 注意返回的数据是一个纯字符串，要格式化处理
            // 存储当前 ticket
            const ticketData = {
              jsapi_ticket: "",
              time: moment().format("YYYY/MM/DD HH:mm:ss")
            };
            if (JSON.parse(body).errcode === 0) {
              // 如果成功获取到
              ticketData.jsapi_ticket = JSON.parse(body).ticket;
              /* 这里是将在这个同级目录下创建一个json文件用来存储jsapi_ticket，
和请求时间，用于下次接口被调用的过期校验。*/
              fs.writeFile(filePath, JSON.stringify(ticketData), function(err) {
                if (err) console.error(err);
                console.log("写入ticketData的json文件成功！");
              });
              reslove(JSON.parse(body).ticket);
            } else {
              fs.writeFile(filePath, JSON.stringify(ticketData), function(err) {
                if (err) console.error(err);
                console.log("写入ticketData的json文件失败！");
              });
            }
          }
        }
      );
    });

    return p2
      .then(result => {
        console.log(result);
        // 在这里返回签名生成函数的结果给前台
        let sendData = getSignature(nowUrl, result);
        ctx.status = 200;
        ctx.body = sendData;
      })
      .catch(err => {
        console.log(err);
      });
  };

/* 这里是先判断存储json文件是否存在，若不存在或者文件存在但已过期，
 就调用上方的串行函数，直接返回生成的签名给前台。若文件存在没过期，
 直接使用json文件中的jsapi_ticket生成签名返回给前台使用。*/

  if (fs.existsSync(filePath)) {
    console.log("文件路径存在");
    // 先读取
    const jsapiData = JSON.parse(fs.readFileSync(filePath));
    console.log(jsapiData);
    // 先判断时间是否过期，若不过期传key，过期不传key
    let t1 = jsapiData.time; // 数据,必须是2018/12-/01 12:09:04这种格式，否则Date对象无法转换
    let dateBegin = new Date(t1); // 转化为Date对象的形式
    let dateEnd = new Date(); //当前时间数据
    let dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
    // console.log(Math.floor(dateDiff / 1000))
    if (Math.floor(dateDiff / 1000) > 7198) {
      // 缓存时间超过有效期（过期）
      sendData = await getToken();
    } else {
      // 不过期，调用签名生成函数生成结果直接ctx返回给前台
      let signaData = await getSignature(nowUrl, jsapiData.jsapi_ticket);
      ctx.status = 200;
      ctx.body = signaData;
    }
  } else {
    console.log("文件路径不存在");
    sendData = await getToken();
  }
});

// 生成签名函数
const getSignature = function(nowUrl, key) {
  let noncestr = Math.random()
    .toString(36)
    .substr(2); // 随机字符串
  let timestamp = moment().unix(); // 获取时间戳，数值类型
  let jsapi_ticket = `jsapi_ticket=${key}&noncestr=${noncestr}&timestamp=${timestamp}&url=${nowUrl}`;
  // console.log(jsapi_ticket)
  jsapi_ticket = getSha1(jsapi_ticket);
  return {
    appid: appid,
    noncestr: noncestr,
    timestamp: timestamp,
    signature: jsapi_ticket
  };
};

/**
 * @sha1加密模块 (加密固定,不可逆)
 * @param str string 要加密的字符串
 * @retrun string 加密后的字符串
 * */
const getSha1 = function(str) {
  var sha1 = crypto.createHash("sha1"); //定义加密方式:md5不可逆,此处的md5可以换成任意hash加密的方法名称；
  sha1.update(str);
  var res = sha1.digest("hex"); //加密后的值d
  return res;
};

module.exports = router;

nodejs后端写一个生成微信signature的接口

在线获取jssdk的singure签名
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

前端接口请求

url: http://localhost:3000/pccjssdk/api&url=xxxx

{
  "resCode": 0,
  "obj": {
  "appid": "wx83647cc6a3d31xxx",
  "jsapi_ticket": "HoagFKDcsGMVCIY2vOjf9u7m4h2TBKvKibbo42NtVLAJnUlWRP2q6wvlCxBKs_AhSScE-XK8qbdLscaZQBAYQ",
    "noncestr": "b9756av9i04",
    "sign": "33b212eb473471de5a1bcf645626f421072864f8",
    "timestamp": "1547721744"
  },
  "msg": ""
}

到此为止node的接口已经写好，前端自行调用便可

项目地址：码云

前端H5页面调用

在vue构建项目，初始化wx.config,最好在main.js做好

import wx from 'weixin-js-sdk'
window.wx = wx;

// 常见问题
// 如果怎么修复都是报签名失败，尝试不用encodeURIComponent去编码链接
axios({
    url: 'http://h5collect.vcihg.com/h5collect/index.php/home/index/shareCode?myurl=' + encodeURIComponent(window.location.href),
    method: 'get',
}).then((res) => {
    let data = res.data;
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // ', // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名，见附录1
        jsApiList: [
                'onMenuShareTimeline', // 分享到朋友圈
                'onMenuShareAppMessage', // 分享给朋友
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.error(function(result) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert(result + '测试报错，上线后就可以修复');
    });
})

其他页面

mounted () {
    this.$nextTick(()=> {
           wx.ready(()=> {
               this.wxJsJdk();
           });
    })
},
methods: {
        wxJsJdk () {
            wx.ready(()=> {
                 // 分享给朋友
                wx.onMenuShareAppMessage(this.winxin());
                // 分享到朋友圈
                wx.onMenuShareTimeline(this.winxin());
            })
       },
        weixinShare() {
            // 分享到朋友圈
            console.log('onMenuShareTimeline 朋友圈');
            wx.onMenuShareTimeline(this.winxin());
        },
        weixinShareFirend() {
            // 分享给朋友
            console.log('onMenuShareAppMessage 微信朋友');
            wx.onMenuShareAppMessage(this.winxin());
        },
        winxin() {
            return {
                title: '我爱二次元第二季海选招募',
                desc: '百万梦想基金，打造次元之星。《我爱二次元》第二季王者荣归，即日启动！',
                link: location.href,
                imgUrl: this.imgUrl,
                success: function () {
                    this.$dialog.toast({
                        mes: '分享成功！',
                        timeout: 1500,
                        icon: 'success'
                    });
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                    this.$dialog.toast({
                        mes: '分享失败',
                        timeout: 1500,
                        icon: 'success'
                    });
                }
            }
        },
  }
}

注意：利用微信浏览器内置api做分享，在微信公众平台前端网页上添加分享按钮