ホームページ  >  記事  >  ウェブフロントエンド  >  WeChat JS-SDK バックエンド インターフェイスに Node.js を実装する

WeChat JS-SDK バックエンド インターフェイスに Node.js を実装する

巴扎黑
巴扎黑オリジナル
2017-07-18 17:57:451499ブラウズ

Web サイトを作成し、オンラインに公開し、WeChat で開き、クリックして共有しましたが、共有後に友人に送信されるリンク カードは、次のように WeChat にデフォルトで付属しているものです。タイトル、説明、写真はデフォルトで、他の人と共有したため、アカウントを盗む Web サイトだと思いましたが、WeChat の JSSDK にアクセスすると、共有コンテンツを次のようにカスタマイズできます。
この共有のタイトルと内容は同じではありませんが、深刻ではありませんが、WeChat JS-SDK バックエンド インターフェイスに Node.js を実装するWeChat JSSDK を通じてコン​​テンツを定義して共有できます
次に、アクセスを実装します。バックエンド Node.js から JSSDK を段階的に実行します。

インターフェース構成情報
WeChat JS-SDK バックエンド インターフェイスに Node.js を実装するインターフェース構成情報を変更します


URL アドレスはサーバー上のアドレスである必要があり、このアドレスはブラウザーのアドレス バーからアクセスできる必要があります (サーバーがない場合でも問題ありません。後で構築します)前提 ここで入力したサーバーアドレスは「http://www.your_server_name.com/wxJssdk」です

トークンを自由に入力して、署名の生成に使用できます。 (署名がわかりませんか? 問題ありません。これは後で使用します。)

ここで入力するトークンが「jegfjaeghfuccawegfgjdbh」であるとします。

  1. この時点で送信をクリックすると、構成が失敗するよう求められます。送信時に WeChat はサーバー アドレスを要求しますが、現在設定されているアドレスではアクセスできないため、設定が失敗したことを示すメッセージが表示されます。ただし、心配しないでください。まず、WeChat がサーバーにアクセスできるように、単純なノード サーバーを構築しましょう。

  2. 単純なノードサーバーを構築します
  3. このドメイン名でサーバーを構築し、インターフェースを /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')})
    今すぐページに「リクエストは成功しました」と表示される場合は、アドレス バーにアクセスし、失敗した場合は、サーバーでノード サーバーが有効になっているかどうかを確認します (ノード インデックスなど)。 .js
この時点で、WeChat テスト公式アカウント バックエンドのインターフェイス構成情報を保存するときに、構成が失敗したことを示すメッセージが表示されます。これは、要求どおりに返されなかったためです。

WeChatテストパブリックアカウントリクエスト情報に基づいて、対応するコンテンツを返します

WeChatパブリックアカウント開発ドキュメントアクセスガイドによると、WeChatが設定したインターフェースをリクエストすると、次の情報が提供されます

/wxJssdk

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服务器,如:node index.js

パラメータ

説明

タイムスタンプノンス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):

填写接口的配置信息

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的请求方式向 发起请求获取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_ticketlet 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_tokenrequest('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,// 必填,签名,见附录1jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  });})

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

if (wx) {
  axios.post('/wxJssdk/getJssdk', {url: location.href}).then((response) => {var data = response.datawx.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_tokensteps1.push((cb1) => {  let access_token = cache.get('access_token', (err, access_token) => {cb1(err, access_token)      })})// 第1.2步,缓存中有access_token则直接返回,如果没有,则从服务器中读取access_tokensteps1.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步,从缓存中读取ticketsteps1.push((cb1) => {  let ticket = cache.get('ticket', (err, ticket) => {cb1(err, ticket)      })})// 第2.2步,缓存中有ticket则直接返回,如果没有,则从服务器中读取ticketsteps1.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 = ticketlet nonce_str = '123456'let timestamp = new Date().getTime()let url = req.query.urllet str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + urllet 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')})
署名 WeChat暗号化署名。署名は、開発者によって入力されたトークンパラメータと、リクエスト内のタイムスタンプパラメータおよびノンスパラメータを組み合わせます。
タイムスタンプ
乱数
ランダム文字列

以上がWeChat JS-SDK バックエンド インターフェイスに Node.js を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。