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

前言

在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 值
});
复制代码

3. 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 的校验。记录了一次总体使用的过程，方便之后查看