Nodejs를 WeChat JS-SDK에 연결하는 전체 과정을 공유하세요
- 不言원래의
- 2018-07-11 16:58:352096검색
이 글은 주로 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 코드는 다음과 같습니다. (여기 코드는 큽니다. 일부는 공식 페이지에서 복사한 것이므로 요점이 아닙니다.)
<!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...), 개발 중에 토큰/을 생성할 수 있습니다. 티켓을 인쇄하고 공식 도구 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 + '×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);
});
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 중국어 사이트를 주목해주세요!
관련 권장사항:
위 내용은 Nodejs를 WeChat JS-SDK에 연결하는 전체 과정을 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!