分享Nodejs存取微信JS-SDK的全過程
- 不言原創
- 2018-07-11 16:58:352096瀏覽
這篇文章主要介紹了分享Nodejs接入微信JS-SDK的全過程，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
#本以為接入微信JS-SDK是一件很簡單的事情，結果掉坑裡好幾天，查閱了各種沒用的資料，終於翻山倒海的倒騰出來了，我要記下來，希望後面的人看到的這篇文章能幫助你早點爬出坑來
步驟一：設定JS介面安全網域
登入你的微信公眾平台後，左側選單選擇設定-」公眾號設置-》功能設定-》JS介面安全網域。它的上面給你列出了幾個注意事項，例如要備案通過的域名，要將MP_verify_nnbEERhXNfbMC8Z0.txt上傳到伺服器，這一步按照操作即可，這時會像你所填寫的這個地址發送一個請求裡面，你接受到後還需要利用sha1加密進行比較
Nodejs程式碼：
var express = require('express');
var crypto = require('crypto'); //引入加密模块
var config = require('./config');//引入配置文件
var http = require('http');
var app = express();
app.get('/wx', function (req, res) {
//1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
var signature = req.query.signature,//微信加密签名
timestamp = req.query.timestamp,//时间戳
nonce = req.query.nonce,//随机数
echostr = req.query.echostr;//随机字符串
//2.将token、timestamp、nonce三个参数进行字典序排序
var array = [config.token, timestamp, nonce];
array.sort();
//3.将三个参数字符串拼接成一个字符串进行sha1加密
var tempStr = array.join('');
const hashCode = crypto.createHash('sha1'); //创建加密类型
var resultCode = hashCode.update(tempStr, 'utf8').digest('hex'); //对传入的字符串进行加密
console.log(signature)
//4.开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
if (resultCode === signature) {
res.send(echostr);
} else {
res.send('mismatch');
}
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
config檔程式碼：
{
"token":"test",
"appId":"wx1c9dedd4d06c8f14",
"appSecret":"07b365cb9e600b5ce04915f59623eb99"
}
步驟二：前台的html怎麼呼叫介面
官方提供的http://203.195.235.76/jssdk/ 這個還是很有幫助的，前台的設定都是從這裡面複製過去的，首先創建html頁面，用來呼叫介面實作功能，這裡需要注意下，沒有認證的訂閱號碼有些介面無法呼叫（具體的權限看百度結果：https://jingyan.baidu.com/art...）
我這裡呼叫圖片拍照/手機選擇這個功能，創建Image.html頁面，Image.html程式碼如下：(這裡面的程式碼大部分都是複製官方提供的那個頁面的，這不是重點)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择图像</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
<h3 id="menu-image">图像接口</h3>
<span class="desc">拍照或从手机相册中选图接口</span>
<button class="btn btn_primary" id="chooseImage">chooseImage</button>
</body>
<script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$.get("http:/xx.xx.cn/getsign", function (res) {
console.log(res)
wx.config({
debug: true, // 开启调试模式
appId: "你的appid", // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.noncestr, // 必填，生成签名的随机串
signature: res.signature,// 必填，签名，见附录1
jsApiList: ['chooseImage',
'previewImage',
'uploadImage',
'downloadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
})
</script>
<script>
wx.error(function(res){
console.log(JSON.stringify(res))
})
wx.ready(function () {
// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
// 5 图片接口
// 5.1 拍照、本地选图
var images = {
localId: []
};
document.querySelector('#chooseImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
alert('已选择 ' + res.localIds.length + ' 张图片');
},
error:function(res){
alert("error")
alert("res")
}
});
};
})
</script>
</html>
步驟三：後台產生簽章認證
終於到了這幾天一直卡在的點上，反反复復的config：invalid signature錯誤，後面終於發現問題，1個是生成時間戳要精確到秒2.生成時所要求的URL其實是前台頁面的url地址
下面一步一步來做，首先創建jssdk.js 在這個下面用來返回wx.config所需的信息（具體每個都啥意思，這個你看官方文檔寫的很明白了https://mp.weixin.qq.com/wiki...），可以在開發的時候將生成token/ticket都打印出來，在官方提供的工具上面https://mp.weixin .qq.com/debu... 進行測試，比較signature是不是一致
完整jssdk.js程式碼如下：
var request = require('request'),
cache = require('memory-cache'),
sha1 = require('sha1')
var express = require('express');
var app = express();
app.use('/wx', express.static('static'));
app.get('/getsign', function (req, res) {
var url = "http://xx.xx.cn/wx/Image.html"
console.log(url)
var noncestr = "123456",
timestamp = Math.floor(Date.now() / 1000), //精确到秒
jsapi_ticket;
if (cache.get('ticket')) {
jsapi_ticket = cache.get('ticket');
// console.log('1' + 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url);
obj = {
noncestr: noncestr,
timestamp: timestamp,
url: url,
jsapi_ticket: jsapi_ticket,
signature: sha1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url)
};
res.send(obj)
} else {
request('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret', function (error, response, body) {
if (!error && response.statusCode == 200) {
var tokenMap = JSON.parse(body);
request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + tokenMap.access_token + '&type=jsapi', function (error, resp, json) {
if (!error && response.statusCode == 200) {
var ticketMap = JSON.parse(json);
cache.put('ticket', ticketMap.ticket, (1000 * 60 * 60 * 24)); //加入缓存
// console.log('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url);
obj = {
noncestr: noncestr,
timestamp: timestamp,
url: url,
jsapi_ticket: ticketMap.ticket,
signature: sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url)
}
res.send(obj)
}
})
}
})
}
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
步驟四：怎麼調試
1.都寫完了以後，在瀏覽器上運行Image.html看不到效果，要在手機微信裡面才有效果，這時候可以用草料二維碼https://cli.im/url 一直在用，很好用，你把地址貼過來（http://xx.xx.cn/wx/Image.html），產生一個二維碼，手機微信掃一掃就可以了
2.Image.html上的wx.config中的debug一定要設定為true，在wx.ready的外面加上
wx.error(function(res){
console.log(JSON.stringify(res))
})
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是分享Nodejs存取微信JS-SDK的全過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn