记一次微信分享前后端实现

三只萌新
3,051 阅读4分钟

前言

在app端h5调用原生的分享功能，通过传递 title , desc,link 等参数可以自定义分享链接的样式如下：

当我们打开分享后的页面点击微信原生的分享后，会看到如下样式的分享链接。确实有点丑，所以接下来我们来接入 微信JS-SDK 服务端通过node来请求微信服务来实现一次整体的分享过程。

测试号管理

  1. 在这个页面你会得到测试号信息 appID 和 appsecret
  2. 需要验证接口配置信息，主要是为了验证服务器地址的有效性。
  3. JS接口安全域名,你需要使用微信 JS-SDK 的服务器域名
  4. 测试号二维码,扫码后你的微信号才有权限使用 JS-SDK 的功能

具体流程可以点击查看具体流程，重点说下第二点，验证服务器有效性。

  1. URL：填写上你服务端接口的地址
  2. Token：随意填写，在你服务端接口中会用到
  3. 微信会向你填写的URL发送一个请求并且带上 signature,timestamp,nonce,echostr 参数，请求类型为 GET,我们接受到这些参数后需要进行加密然后返回加密后的值作为验证。

接下来来写接口。

// 需要引入 sha1 包来将字符串转化
const sha1 = require('sha1')
router.get('/',async ctx=>{
  // 与你填写的 Token 保持一致
  const token = 'gwxtoken'
  const {
    signature,
    timestamp,
    nonce,
    echostr
  } = ctx.query
  // 进行字典排序加密
  let str = [token, timestamp, nonce].sort().join("");
  let sha = sha1(str)
  // 校验微信加密签名,如果来自微信将 echostr 原样返回
  if (sha === signature) {
    ctx.body = echostr
  } else {
    ctx.body = "wrong"
  }
})

服务端

获取 access_token

请求微信 access_token 接口,参数如下，请求类型为 GET ，可以拿到 access_token 的值。

grant_type appid secret
填写 client_credential 测试信息的appID 测试信息的appsecret

获取 jsapi_ticket

请求微信 jsapi_ticket 接口，参数如下，请求类型为 GET，可以拿到 的值

access_token type
填写 access_token 的值 填写 jsapi 
const request = require('request')
// 获取 access_token 
router.get('/assess-token',async ctx=>{
  let result  = await request('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appID&secret=appsecret')
  ctx.body = result
})

function getData(url){
  return new Promise((resolve,reject)=>{
    request(url,function(err,res,body){
      resolve(body)
    })
  })
}

// 获取 jsapi_ticket
router.get('/share',async ctx=>{
  // 获取客户端传递过来的 access_token 和分享地址
  const {sessionKey,link} = ctx.request.query
  let noncestr = '201913' // 自定义
  let timestamp = Math.floor(Date.now() / 1000) // 当前时间单位为 秒
  let result = await getData('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+sessionKey+'&type=jsapi')
  let tiket = JSON.parse(result).ticket 
  ctx.body = {
    noncestr,
    timestamp,
    signature:sha1('jsapi_ticket=' + tiket + '&noncestr=' + noncestr + '&timestamp=' + timestamp +'&url='+link)
  }
})

需要注意：

  1. noncestr 为自定义，timestamp 单位为秒
  2. 这里使用 request 作为 http 请求，
var request = require('request');
request('http://www.google.com', function (error, response, body) {
    // 打印值可以发现，body才是我们想要的 ticket 值
});
  1. koa2 中 ctx.body 如果放在 包含异步操作的回调中，返回均为404，(还不是很懂是为啥)，所以此处封装了一个 Promise 这样可以通过 await 的方式将代码执行同步化，ctx.body 可以拿到服务端返回的值。

客户端

通过wx.config接口注入权限验证配置

调用服务端的接口 为了获取服务端定义的 timestamp,nonceStr,signature 这三个值,这三个值需要保持和服务端同步

    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'AppId', // 必填，企业号的唯一标识，此处填写企业号corpid
        timestamp:'timestamp', // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature,// 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline', // 分享到朋友圈
        'onMenuShareAppMessage', // 分享给朋友
        'onMenuShareQQ',// 分享到QQ
        'onMenuShareWeibo',// 分享到腾讯微博
        'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

调用微信分享等接口

在需要自定义分享链接或其他 sdk 支持的功能可以通过 wx.ready 来初始化这些功能，拿分享功能作为例子,更多功能参考文档

wx.onMenuShareAppMessage({
  title: '', // 分享标题
  desc: '', // 分享描述
  link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  imgUrl: '', // 分享图标
  type: '', // 分享类型,music、video或link，不填默认为link
  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
  success: function () {
    // 用户点击了分享后执行的回调函数
  }
})

最后

当你看到这个提示框时候，那么你已经完成 sdk 配置 和服务端返回的 signature 的校验。记录了一次整体使用的过程，方便以后查看

avatar
文章
阅读
粉丝