Heim > Artikel > Web-Frontend > Teilen Sie den gesamten Prozess der Verbindung von Nodejs mit dem WeChat JS-SDK

Teilen Sie den gesamten Prozess der Verbindung von Nodejs mit dem WeChat JS-SDK

不言Original: 2018-07-11 16:58:352096Durchsuche

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

Schritt 1: Richten Sie einen sicheren Domainnamen für die JS-Schnittstelle ein

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"
}

Schritt 2: So rufen Sie die Schnittstelle auf Das Front-End-HTML

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>

Schritt 3: Signaturauthentifizierung im Hintergrund generieren

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 + '&timestamp=' + timestamp + '&url=' + url);
        obj = {
            noncestr: noncestr,
            timestamp: timestamp,
            url: url,
            jsapi_ticket: jsapi_ticket,
            signature: sha1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '&timestamp=' + 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 + '&timestamp=' + timestamp + '&url=' + url);
                        obj = {
                            noncestr: noncestr,
                            timestamp: timestamp,
                            url: url,
                            jsapi_ticket: ticketMap.ticket,
                            signature: sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + 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

1 Nachdem alles geschrieben wurde, können Sie den Effekt nicht sehen, wenn Sie Image.html ausführen Sie müssen WeChat auf Ihrem Mobiltelefon ausführen. Derzeit können Sie den Grass-QR-Code https://cli.im/url verwenden Verwenden Sie es, fügen Sie die Adresse ein (http://xx.xx.cn/wx/Image.html) und generieren Sie einen QR-Code. Scannen Sie ihn einfach über WeChat auf Ihrem Mobiltelefon

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/O

Dialog-Plug-in-Kunst basierend auf Vue. js Release-Inhalt von dialog-vue2.0

Das 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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie einen Stack in JavaScriptNächster Artikel：So implementieren Sie einen Stack in JavaScript

In Verbindung stehende Artikel

Mehr sehen