Nodejs를 WeChat JS-SDK에 연결하는 전체 과정을 공유하세요

이 글은 주로 WeChat JS-SDK에 연결하기 위해 Nodejs를 공유하는 전체 과정을 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

WeChat JS-SDK에 연결하는 것이 좋을 것 같습니다. 아주 간단한 일이지만, 온갖 쓸데없는 정보들을 찾아 헤매다가 결국 며칠 동안 고민 끝에 알아냈으니 적어볼까 합니다. 앞으로 이 글을 읽는 사람들이 당신을 도울 수 있을 것입니다.

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 페이지를 생성하여 함수를 구현합니다. 인증된 구독 계정 (특정 권한 Baidu 결과 보기: https://jingyan.baidu.com/art...)

사진 촬영을 호출/휴대폰에서 이 기능을 선택하여 Image.html 페이지를 생성합니다. .html 코드는 다음과 같습니다. (여기 코드는 큽니다. 일부는 공식 페이지에서 복사한 것이므로 요점이 아닙니다.)

nbsp;html>



    <meta>
    <title>选择图像</title>
    <meta>



    <button>checkJsApi</button>
    <h3 id="图像接口">图像接口</h3>
    <span>拍照或从手机相册中选图接口</span>
    <button>chooseImage</button>
 



<script></script>
<script></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: [&#39;chooseImage&#39;,
                &#39;previewImage&#39;,
                &#39;uploadImage&#39;,
                &#39;downloadImage&#39;] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
    })

</script>

<script>
  
    wx.error(function(res){
        console.log(JSON.stringify(res))
    })
    wx.ready(function () {
        // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
        document.querySelector(&#39;#checkJsApi&#39;).onclick = function () {
            wx.checkJsApi({
                jsApiList: [
                    &#39;chooseImage&#39;,
                    &#39;previewImage&#39;,
                    &#39;uploadImage&#39;,
                    &#39;downloadImage&#39;
                ],
                success: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        };

        // 5 图片接口
        // 5.1 拍照、本地选图
        var images = {
            localId: []
        };
        document.querySelector(&#39;#chooseImage&#39;).onclick = function () {
           
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    alert(&#39;已选择 &#39; + res.localIds.length + &#39; 张图片&#39;);
                },
                error:function(res){
                    alert("error")
                    alert("res")
                }
            });
        };
    })
</script>

3단계: 백그라운드에서 서명 인증 생성

드디어 내가 가지고 있는 지점에 도달했습니다. 지난 며칠 동안 config:잘못된 서명 오류가 반복적으로 발생하고 나중에 마침내 문제를 발견했습니다. 1은 생성된 타임스탬프가 초 단위까지 정확해야 한다는 것입니다. 2. 생성할 때 필요한 URL은 실제로 첫 페이지의 URL 주소입니다

단계별로 해보겠습니다. 먼저 jssdk.js를 생성하고 이를 사용하여 wx를 반환합니다. 구성에 필요한 정보(구체적으로 각 정보의 의미는 공식 문서 https://mp.weixin을 읽으면 명확하게 이해할 수 있습니다. qq.com/wiki...), 개발 중에 토큰/을 생성할 수 있습니다. 티켓을 인쇄하고 공식 도구 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을 실행하면 효과를 볼 수 없습니다. 이때는 사료 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 중국어 사이트를 주목해주세요!

관련 권장사항:

노드 비동기 I/O 소개

vue.js 기반 대화 플러그인 art-dialog-vue2.0의 출시 콘텐츠

위 내용은 Nodejs를 WeChat JS-SDK에 연결하는 전체 과정을 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!