記一次微信分享先後端實現

前言

在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 的校驗。記錄了一次總體使用的過程，方便之後查看