Maison > Article > interface Web > Partagez l'ensemble du processus de connexion de Nodejs à WeChat JS-SDK

Partagez l'ensemble du processus de connexion de Nodejs à WeChat JS-SDK

不言original: 2018-07-11 16:58:352109parcourir

Cet article présente principalement l'ensemble du processus de partage de Nodejs pour se connecter à WeChat JS-SDK. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Je le pensais. était connecté. WeChat JS-SDK est une chose très simple, mais je suis resté coincé dedans pendant plusieurs jours et j'ai consulté toutes sortes d'informations inutiles. Finalement, après beaucoup de problèmes, je l'ai trouvé dans l'espoir. que d'autres le verront plus tard. Cet article peut vous aider à sortir de la fosse le plus rapidement possible

Étape 1 : Définir le nom de domaine sécurisé de l'interface JS

Après vous être connecté à votre public WeChat. plate-forme, sélectionnez Paramètres -> Paramètres du compte public dans le menu de gauche -》Paramètres de fonction-》Nom de domaine de sécurité de l'interface JS. Il répertorie plusieurs précautions à prendre pour vous, comme le nom de domaine à enregistrer et à transmettre, et le MP_verify_nnbEERhXNfbMC8Z0.txt à télécharger sur le serveur. Suivez simplement cette étape et une demande sera envoyée à l'adresse que vous avez renseignée, après réception. cela, vous devez utiliser le cryptage sha1 pour comparaison

Code 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);
});

Code du fichier de configuration :

{
    "token":"test",
    "appId":"wx1c9dedd4d06c8f14",
    "appSecret":"07b365cb9e600b5ce04915f59623eb99"
}

Étape 2 : Que diriez-vous du code HTML au réception ? Appeler l'interface

Fourni officiellement http://203.195.235.76/jssdk/ Ceci est toujours très utile La configuration frontale est copiée à partir d'ici. Créez d'abord une page html pour appeler l'implémentation de l'interface. . Fonction, veuillez noter ici que certaines interfaces ne peuvent pas être appelées sans comptes d'abonnement authentifiés (voir les résultats Baidu pour les autorisations spécifiques : https://jingyan.baidu.com/art...)

J'appelle des images ici pour. prendre des photos /Sélectionnez cette fonction sur votre téléphone mobile et créez la page Image.html. Le code Image.html est le suivant : (La plupart du code ici est copié de la page officielle, ce qui n'est pas le sujet)

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

Étape 3 : Authentification de signature par génération en arrière-plan

J'ai finalement atteint le point où il est bloqué ces derniers jours, avec des erreurs de configuration répétées : signature invalide. Plus tard, j'ai finalement découvert le problème One. est que l'horodatage généré doit être précis à 2 secondes près. L'URL requise lors de la génération est en fait l'adresse URL de la page d'accueil

Faisons-le étape par étape, créons d'abord jssdk.js, qui est utilisé pour renvoyer. les informations requises par wx.config (que signifie chacun spécifiquement ? , vous pouvez le voir clairement dans le document officiel https://mp.weixin.qq.com/wiki...), vous pouvez imprimer le jeton généré /ticket pendant le développement, et utilisez l'outil officiel https ://mp.weixin.qq.com/debu... Testez et comparez si la signature est cohérente

Le code jssdk.js complet est le suivant :

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);
});

Étape 4 : Comment déboguer

1. Une fois que tout est écrit, vous ne pouvez pas voir l'effet lors de l'exécution de Image.html sur le navigateur. Vous devez exécuter WeChat sur. votre téléphone portable pour voir l'effet. À ce moment, vous pouvez utiliser le code QR fourrager https://cli.im /url qui a été utilisé tout le temps, il est très simple à utiliser. Vous pouvez publier l'adresse (http://. /xx.xx.cn/wx/Image.html) et générez un code QR. Scannez-le simplement avec votre mobile WeChat

2 Le débogage dans wx.config sur Image.html doit être défini sur true, et ajoutez

    wx.error(function(res){
        console.log(JSON.stringify(res))
    })

en dehors de wx.ready. Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde. Pour plus de contenu connexe, veuillez prêter attention au. Site Web chinois PHP !

Recommandations associées :

Introduction aux E/S asynchrones de Node

art du plug-in de dialogue basé sur vue. js Publier le contenu de dialog-vue2.0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une pile en JavaScriptArticle suivant：Comment implémenter une pile en JavaScript

Articles Liés

Voir plus