Heim >Web-Frontend >js-Tutorial >Teilen Sie den gesamten Prozess der Verbindung von Nodejs mit dem WeChat JS-SDK
Dieser Artikel stellt hauptsächlich den gesamten Prozess des Teilens von Nodejs für die Verbindung mit WeChat JS-SDK vor. Jetzt kann ich ihn mit allen Freunden teilen, die ihn benötigen.
Ich dachte, es wäre so Das WeChat JS-SDK ist eine sehr einfache Sache, aber ich blieb mehrere Tage darin stecken und habe alle möglichen nutzlosen Informationen konsultiert. Schließlich habe ich es nach viel Mühe aufgeschrieben dass andere es später sehen werden. Dieser Artikel kann Ihnen helfen, so schnell wie möglich aus der Grube herauszukommen
Nach dem Anmelden Wählen Sie auf Ihrer öffentlichen WeChat-Plattform im linken Menü „Einstellungen“ – „Öffentliche Kontoeinstellungen“ – „Funktionseinstellungen“ – „JS-Schnittstellensicherheitsdomänenname“ aus. Es werden mehrere Vorsichtsmaßnahmen für Sie aufgeführt, z. B. der zu registrierende und zu übergebende Domänenname und die Datei MP_verify_nnbEERhXNfbMC8Z0.txt, die auf den Server hochgeladen werden soll. Anschließend wird eine Anfrage an die von Ihnen eingegebene Adresse gesendet. , nachdem Sie es erhalten haben, müssen Sie zum Vergleich die SHA1-Verschlüsselung verwenden
NodeJS-Code:
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); });
Konfigurationsdateicode:
{ "token":"test", "appId":"wx1c9dedd4d06c8f14", "appSecret":"07b365cb9e600b5ce04915f59623eb99" }
Die offizielle http://203.195.235.76/jssdk/ ist sehr hilfreich. Erstellen Sie zunächst eine HTML-Seite, um die Schnittstelle zum Implementieren der Funktion aufzurufen . Hier müssen Sie beachten, dass einige Schnittstellen für Abonnementkonten nicht ohne Authentifizierung aufgerufen werden können (spezifische Berechtigungen finden Sie in den Baidu-Ergebnissen: https://jingyan.baidu.com/art...)
Ich rufe hier Bilder auf Fotos machen/dies auf meinem Mobiltelefon auswählen Funktion, Image.html-Seite erstellen, der Image.html-Code lautet wie folgt: (Der größte Teil des Codes hier wird von der offiziellen Seite kopiert, das ist nicht der Punkt)
<!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>
Endlich sind wir an dem Punkt angelangt, an dem wir in den letzten Tagen feststeckten. Der Fehler „Konfiguration: Ungültige Signatur“ trat später endlich auf Problem. 1. Der Generierungszeitstempel muss sekundengenau sein. 2. Die URL, die während der Generierung benötigt wird, ist tatsächlich die URL-Adresse der Startseite .js, das verwendet wird, um die von wx.config benötigten Informationen zurückzugeben (genaue Informationen zu den jeweiligen Bedeutungen finden Sie im offiziellen Dokument). Der Text ist sehr klar: https://mp.weixin.qq.com/wiki... ), können Sie das generierte Token/Ticket während der Entwicklung ausdrucken und das offizielle Tool verwenden https://mp.weixin .qq.com/debu... Testen und vergleichen Sie, ob die Signatur konsistent ist
Die Der vollständige jssdk.js-Code lautet wie folgt:
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); });
Schritt 4: So debuggen Sie
2.Image.html Das Debug in wx.config muss auf true gesetzt sein und
wx.error(function(res){ console.log(JSON.stringify(res)) })
außerhalb von wx.ready hinzugefügt werden. Ich hoffe, dass es für alle zum Lernen hilfreich ist Bitte folgen Sie der chinesischen PHP-Website!
Verwandte Empfehlungen:
Einführung in Node Asynchronous I/ODialog-Plug-in-Kunst basierend auf Vue. js Release-Inhalt von dialog-vue2.0Das obige ist der detaillierte Inhalt vonTeilen Sie den gesamten Prozess der Verbindung von Nodejs mit dem WeChat JS-SDK. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!