免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

如何實現基于Node.js的微信JS-SDK后端接口-創新互聯

小編給大家分享一下如何實現基于Node.js的微信JS-SDK后端接口,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

創新互聯專業為企業提供寧江網站建設、寧江做網站、寧江網站設計、寧江網站制作等企業網站建設、網頁設計與制作、寧江企業網站模板建站服務,十多年寧江做網站經驗,不只是建網站,更提供有價值的思路和整體網絡服務。

做了一個網站,放到線上,用微信打開,點擊分享,可是分享后發給朋友的鏈接卡片是微信默認自帶的,如下:

如何實現基于Node.js的微信JS-SDK后端接口

這標題,描述以及圖片是默認自帶的,丑不說,分享給別人還以為是盜號網站呢,而接入微信的JSSDK后,分享可以自定義內容,如下:

如何實現基于Node.js的微信JS-SDK后端接口

我承認,雖然這分享的標題和內容也并不正經,但這不妨礙我表達我們可以通過微信JSSDK定義分享內容,接下來我們將一步一步從零實現JSSDK從后端Node.js的接入。

成為測試公眾號開發者

登錄測試公眾號后臺

首先我們需要在微信公眾平臺申請測試接口,地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
使用微信掃描登錄后,即可來微信公眾平臺測試賬號系統。

成為測試公眾號開發者

其次在微信公眾平臺測試賬號中,掃描測試號二維碼,成為測試公眾號的開發者

接口配置信息

修改接口配置信息

1.URL地址必須是你服務器上的地址,此地址要能通過瀏覽器的地址欄訪問到(沒有服務器?沒關系,一會兒我們搭建一個)
 假設我這里填寫的服務器地址是"http://www.your_server_name.com/wxJssdk"

2.Token你可以隨意填寫,用作生成簽名,(不知道簽名?沒關系,一會兒會用到這東西的)
 假設我這里填寫的Token是"jegfjaeghfuccawegfgjdbh"

此時點擊提交是會提示配置失敗的,因為在提交的時候,微信是會請求你的服務器地址,而你的當前配置的地址并不能訪問,所以會提示配置失敗。不過別急,我們先來搭建一個簡單的Node服務器,讓微信能夠訪問該服務器。

搭建簡單的Node服務器

我們需要在http://www.your_server_name.com 這個域名上搭建一個服務器,并且曝出一個接口為/wxJssdk

const express = require('express')
const app = express()

app.get('/wxJssdk', (req, res) => {
 res.send('請求成功了了了了')
})

app.listen(80, err => {
 if(!err) console.log('connect succeed')
})

現在我們在地址欄中訪問http://www.your_server_name.com/wxJssdk ,如果頁面顯示“請求成功了了了了”,則進入到下一步,如果沒有成功的話,檢查一下你的服務器是否開啟Node服務器,如:node index.js

此時保存微信測試公眾號后臺的接口配置信息,仍然會提示配置失敗,這是因為我們沒有按照它的要求返回。

根據微信測試公眾號請求信息返回對應內容

根據微信公眾號開發文檔接入指南,微信在請求我們配置的接口時,會帶上如下信息

參數描述
signature微信加密簽名,signature結合了開發者填寫的token參數和請求中的timestamp參數、nonce參數。
timestamp時間戳
nonce隨機數
echostr隨機字符串

微信服務器會通過GET請求,來請求我們所配置的接口,并帶上以上表格的信息,而我們必須按照以下要求,將微信發送的信息進行要求校驗,以確保是微信發送的信息,其中校驗流程如下:

1)將token、timestamp、nonce三個參數進行字典序排序
2)將三個參數字符串拼接成一個字符串進行sha1加密
3)開發者獲得加密后的字符串可與signature對比,標識該請求來源于微信

const express = require('express')
const app = express()
const sha1 = require('sha1')

app.get('/wxJssdk', (req, res) => {
 let wx = req.query

 let token = 'jegfjaeghfuccawegfgjdbh'
 let timestamp = wx.timestamp
 let nonce = wx.nonce

 // 1)將token、timestamp、nonce三個參數進行字典序排序
 let list = [token, timestamp, nonce].sort()

 // 2)將三個參數字符串拼接成一個字符串進行sha1加密
 let str = list.join('')
 let result = sha1(str)

 // 3)開發者獲得加密后的字符串可與signature對比,標識該請求來源于微信
 if (result === wx.signature) {
  res.send(wx.echostr) // 返回微信傳來的echostr,表示校驗成功,此處不能返回其它
 } else {
  res.send(false)
 }
})

此時我們重啟Node服務器,再次保存接口配置信息即可配置成功。

微信JSSDK使用步驟

根據微信JSSDK說明文檔,我們需要完成如下:

填寫安全域名

登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”,即要調用接口的域名,不包含協議

前端引入JS

在需要調用JS接口的頁面引入此JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

填寫接口的配置信息

wx.config({
 debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
 appId: '', // 必填,公眾號的唯一標識
 timestamp: , // 必填,生成簽名的時間戳
 nonceStr: '', // 必填,生成簽名的隨機串
 signature: '',// 必填,簽名
 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});

調用接口

做你前端該做的,調用微信分享接口,或微信提供的其它接口,whatever you need,當然,這并不是我們所要講的重點,我們接下來要看一下微信的配置信息從哪獲取

在Node服務器中生成jssdk所需要的配置信息

從上一節可以看到,調用微信JSSDK需要以下信息

1.appId
2.timestamp
3.nonceStr
4.signature
5.jsApiList

其中:

1.第1項appId是測試公眾號后臺的appId,我們已知
2.第2項時間戳我們也可以自己生成
3.第3項nonceStr可以隨意填寫,你可以理解為密鑰
4.第4項signature則需要我們按要求生成
5.第5項是所需要接口的接口名

生成signature

生成簽名之前必須先了解一下jsapi_ticket,jsapi_ticket是公眾號用于調用微信JS接口的臨時票據。正常情況下,jsapi_ticket的有效期為7200秒,通過access_token來獲取。由于獲取jsapi_ticket的api調用次數非常有限,頻繁刷新jsapi_ticket會導致api調用受限,影響自身業務,開發者必須在自己的服務全局緩存jsapi_ticket 。

為了保證我們appid,appsecret,nonceStr等信息不在前端曝露,我們以下步驟將在服務器上進行操作,以免他人盜用信息獲取(注:微信請求有每日次數限制,一旦超出,則無法使用,具體請求次數限制在微信公眾號后臺中可查看)

生成access_token

根據微信開發文檔[獲取access_token文檔說明],我們需要將微信測試公眾號后臺的appid和和appsecret以GET的請求方式向https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 發起請求獲取token,請求成功后我們會獲得下返回JSON轉化的字符串

{"access_token":"ACCESS_TOKEN","expires_in":7200}

具體請求代碼如下:

const request = require('request')

const grant_type = 'client_credential'
const appid = 'your app id'
const secret = 'your app secret'

request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
 let access_toekn = JSON.parse(body).access_token
})

獲取jsapi_ticket

const request = require('request')

const grant_type = 'client_credential'
const appid = 'your app id'
const secret = 'your app secret'

request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
 let access_toekn = JSON.parse(body).access_token

 request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
   let jsapi_ticket = JSON.parse(body).ticket
 })
})

生成簽名

生成簽名的步驟和最開始的/wxJssdk的算法是一致的,具體如下:

let jsapi_ticket = jsapi_ticket // 上一步從獲取的jsapi_ticket
let nonce_str = '123456'  // 密鑰,字符串任意,可以隨機生成
let timestamp = new Date().getTime() // 時間戳
let url = req.query.url  // 使用接口的url鏈接,不包含#后的內容

// 將請求以上字符串,先按字典排序,再以'&'拼接,如下:其中j > n > t > u,此處直接手動排序
let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + url

// 用sha1加密
let signature = sha1(str)

連接后的代碼為:

const request = require('request')

const grant_type = 'client_credential'
const appid = 'your app id'
const secret = 'your app secret'

request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
 let access_toekn = JSON.parse(body).access_token

 request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
   let jsapi_ticket = JSON.parse(body).ticket
   let nonce_str = '123456'  // 密鑰,字符串任意,可以隨機生成
   let timestamp = new Date().getTime() // 時間戳
   let url = req.query.url  // 使用接口的url鏈接,不包含#后的內容

   // 將請求以上字符串,先按字典排序,再以'&'拼接,如下:其中j > n > t > u,此處直接手動排序
   let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + url

   // 用sha1加密
   let signature = sha1(str)
 })
})

曝露接口,返回給前端

app.post('/wxJssdk/getJssdk', (req, res) => {
 const request = require('request')

 const grant_type = 'client_credential'
 const appid = 'your app id'
 const secret = 'your app secret'

 request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
  let access_toekn = JSON.parse(body).access_token

  request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
    let jsapi_ticket = JSON.parse(body).ticket
    let nonce_str = '123456'  // 密鑰,字符串任意,可以隨機生成
    let timestamp = new Date().getTime() // 時間戳
    let url = req.query.url  // 使用接口的url鏈接,不包含#后的內容

    // 將請求以上字符串,先按字典排序,再以'&'拼接,如下:其中j > n > t > u,此處直接手動排序
    let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + url

    // 用sha1加密
    let signature = sha1(str)

    res.send({
     appId: appid,
     timestamp: timpstamp,
     nonceStr: nonce_str,
     signature: signature,
    })
  })
 })
})

前端請求后端接口,獲取配置信息

獲取配置

axios.post('/wxJssdk/getJssdk', {url: location.href}).then((response) => {
 var data = response.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
 });

})

做你想做的,比如,自定義分享

if (wx) {
 axios.post('/wxJssdk/getJssdk', {url: location.href}).then((response) => {
  var data = response.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.ready(function () {
   wx.onMenuShareTimeline({
   title: wxShare.title,
   desc: wxShare.desc,
   link: wxShare.link,
   imgUrl: wxShare.imgUrl
   });

   wx.onMenuShareAppMessage({
   title: wxShare.title,
   desc: wxShare.desc,
   link: wxShare.link,
   imgUrl: wxShare.imgUrl
  });
 })

  wx.error(function (res) {
    // config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對于SPA可以在這里更新簽名。
  })
 })

}

至此,后端配置好了,我們已經能夠正常使用微信的接口了,但是微信每日接口請求是有上限的,通過2000次/天,因此如果網站上線后,一量當天訪問量超過2000次你的接口將失效,而且每次都請求微信接口兩次,造成請求時間浪費,所以我們需要將以上獲取信息緩存在后端,避免造成接口失效以及多次請求微信后臺。

緩存access_token及jsapi_ticket

此處直接上代碼,利用node_cache包進行緩存

const request = require('request')
const express = require('express')
const app = express()
const sha1 = require('sha1')
const waterfall = require('async/waterfall')
const NodeCache = require('node-cache')
const cache = new NodeCache({stdTTL: 3600, checkperiod: 3600}) //3600秒后過過期

app.get('/wxJssdk', (req, res) => {
 let wx = req.query

 // 1)將token、timestamp、nonce三個參數進行字典序排序
 let token = 'jegfjaeghfuyawegfgjdbh'
 let timestamp = wx.timestamp
 let nonce = wx.nonce

 // 2)將三個參數字符串拼接成一個字符串進行sha1加密
 let list = [token, timestamp, nonce]
 let result = sha1(list.sort().join(''))

 // 3)開發者獲得加密后的字符串可與signature對比,標識該請求來源于微信
 if (result === wx.signature) {
  res.send(wx.echostr)
 } else {
  res.send(false)
 }
})

app.get('/wxJssdk/getJssdk', (req, res) => {
 let grant_type = 'client_credential'
 let appid = 'your app id'
 let secret = 'your app secret' // appscret

 let steps = []

 // 第一步,獲取access_token
 steps.push((cb) => {

 let steps1 = []

  // 第1.1步,從緩存中讀取access_token
  steps1.push((cb1) => {
   let access_token = cache.get('access_token', (err, access_token) => {
    cb1(err, access_token)
   })
  })

  // 第1.2步,緩存中有access_token則直接返回,如果沒有,則從服務器中讀取access_token
  steps1.push((access_token, cb1) => {
   if (access_token) {
    cb1(null, access_token, 'from_cache')
   } else {
    request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
     cb1(err, JSON.parse(body).access_token, 'from_server')
    })
   }
  })

  // 第1.3步,如果是新從服務器取的access_token,則緩存起來,否則直接返回
  steps1.push((access_token, from_where, cb1) => {
   if (from_where === 'from_cache') {
    console.log(' === 成功從緩存中讀取access_token: ' + access_token + ' ===')
    cb1(null, access_token)
   } else if (from_where === 'from_server') {
    cache.set('access_token', access_token, (err, success) => {
     if (!err && success) {
      console.log(' === 緩存已過期,從服務器中讀取access_token: ' + access_token + ' ===')
      cb1(null, access_token)
     } else {
      cb1(err || 'cache設置access_token時,出現未知錯誤')
     }
    })
   } else {
    cb1('1.3獲取from_where時,from_where值為空')
   }
  })



  waterfall(steps1, (err, access_token) => {
   cb(err, access_token)
  })
 })


 // 第二步,獲取ticket
 steps.push((access_token, cb) => {
  let steps1 = []

  // 第2.1步,從緩存中讀取ticket
  steps1.push((cb1) => {
   let ticket = cache.get('ticket', (err, ticket) => {
    cb1(err, ticket)
   })
  })

  // 第2.2步,緩存中有ticket則直接返回,如果沒有,則從服務器中讀取ticket
  steps1.push((ticket, cb1) => {
   if (ticket) {
    cb1(null, ticket, 'from_cache')
   } else {
    request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
     cb1(err, JSON.parse(body).ticket, 'from_server')
    })
   }
  })

  // 第2.3步,如果新從服務器取的ticket,則緩存起來,否則直接返回
  steps1.push((ticket, from_where, cb1) => {
   if (from_where === 'from_cache') {
    console.log(' === 成功從緩存中讀取ticket: ' + ticket + ' ===')
    cb1(null, ticket)
   } else if (from_where === 'from_server') {
    cache.set('ticket', ticket, (err, success) => {
     if (!err && success) {
      console.log(' === 緩存已過期,從服務器中讀取ticket: ' + ticket + ' ===');
      cb1(null, ticket)
     } else {
      cb1(err || 'cache設置ticket時,出現未知錯誤')
     }
    })
   } else {
    cb1('2.3獲取from_where時,from_where值為空')
   }
  })

  waterfall(steps1, (err, ticket) => {
   cb(err, ticket)
  })
 })


 // 第三步,生成簽名
 steps.push((ticket, cb) => {
  let jsapi_ticket = ticket
  let nonce_str = '123456'
  let timestamp = new Date().getTime()
  let url = req.query.url

  let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + url
  let signature = sha1(str)

  cb(null, {
   appId: appid,
   timestamp: timestamp,
   nonceStr: nonce_str,
   signature: signature,
   ticket: ticket
  })
 })

 waterfall(steps, (err, data) => {
  if (err) {
   res.send({status: 'error', data: err})
  } else {
   res.send({status: 'success', data: data})
  }
 })
})

app.use('/wxJssdk/public', express.static('public'))

app.listen(80, err => {
 if(!err) console.log('connect succeed')
})

以上是“如何實現基于Node.js的微信JS-SDK后端接口”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯網站建設公司行業資訊頻道!

另外有需要云服務器可以了解下創新互聯建站m.newbst.com,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目:如何實現基于Node.js的微信JS-SDK后端接口-創新互聯
網站地址:http://m.newbst.com/article42/deopec.html

成都網站建設公司_創新互聯,為您提供全網營銷推廣、做網站搜索引擎優化域名注冊營銷型網站建設、用戶體驗

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都做網站