阅读 287

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

前言

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

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

测试号管理

  1. 在这个页面你会得到测试号信息 appIDappsecret
  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 的校验。记录了一次整体使用的过程,方便以后查看

关注下面的标签,发现更多相似文章
评论