Nodejs を WeChat JS-SDK に接続するプロセス全体を共有する-jsチュートリアル-php.cn

この記事では、主に WeChat JS-SDK に接続するための Nodejs を共有するプロセス全体を紹介します。これで、必要な友達と共有できるようになりました。とても単純なことですが、数日間泥沼にはまり、いろいろと役に立たない情報を調べて、悩んだ末に思いついたことを書いていきたいと思います。将来この記事を読む人があなたを助けることができるように、できるだけ早くピットから抜け出します

ステップ 1: JS インターフェイスの安全なドメイン名を設定します

WeChat パブリックプラットフォームにログインした後、[設定] -> [公式] を選択します。左側のメニューから「アカウント設定」→「機能設定」→「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"
}

ログイン後にコピー

ステップ 2: フロントエンド html でインターフェイスを呼び出す方法

公式に提供されている http:/ /203.195.235.76/jssdk / これは依然として非常に役立ちます。フロントエンド設定はここからコピーされます。まず、関数を実装するための HTML ページを作成します。ここで、一部のインターフェイスは認証されていないと呼び出すことができないことに注意してください。サブスクリプション番号 (特定の権限百度の結果を参照してください: https://jingyan.baidu.com/art...)

携帯電話で写真を撮る/この機能を選択して、Image.html ページを作成します。 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>

ログイン後にコピー

ステップ 3: バックグラウンドで署名認証を生成する

ようやくここまでたどり着きました過去数日間スタックし、config:無効な署名エラーが繰り返し発生しました。後でようやく問題が見つかりました。1は、生成されたタイムスタンプが秒単位で正確である必要があることです。2。生成時に必要なURLは、実際にはフロントページのURLアドレスです

段階的に実行してみましょう。まず、jssdk.js を作成し、それを使用して wx を返します。設定に必要な情報 (具体的にはそれぞれが何を意味するかについては、公式ドキュメント https://mp.weixin.qq を読むと明確に理解できます)。 .com/wiki...)、開発中に token/ を生成できますチケットを印刷し、公式ツール https://mp.weixin.qq.com/debu... でテストして、署名が一貫しているかどうかを比較します

完全な 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 + '&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);
});

ログイン後にコピー

ステップ 4: デバッグ方法

1. すべてを記述した後、ブラウザ上で Image.html を実行しても効果は確認できません。現時点では、携帯電話の WeChat で見られる QR コード https://cli.im/url を使用しています。使い方は非常に簡単で、アドレス (http:/) を投稿するだけです。 /xx.xx.cn/wx/Image.html) して QR コードを生成し、携帯電話の WeChat 経由でスキャンするだけです

2.Image .html の wx.config のデバッグを true に設定し、追加する必要がありますwx.ready の外の

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

ログイン後にコピー

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。