1. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2. 采用http GET方式请求获得access_token(有效期7200秒)。
3. 用上一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒)。
4. 获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了,签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
5. 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
6. 在需要的H5页面上调用JSSDK。
注意事项
1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2.签名用的url必须是调用JS接口页面的完整URL。
3.出于安全考虑,开发者必须在服务器端实现签名的逻辑。
<?php// 微信 JS 接口签名校验工具: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign$appid = ‘your appid‘;$secret = ‘your secret‘;// 获取token$token_data = file_get_contents(‘./wechat_token.txt‘);if (!empty($token_data)) { $token_data = json_decode($token_data, true);}$time = time() - $token_data[‘time‘];if ($time > 3600) { $token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}"; $token_res = https_request($token_url); $token_res = json_decode($token_res, true); $token = $token_res[‘access_token‘]; $data = array( ‘time‘ =>time(), ‘token‘ =>$token ); $res = file_put_contents(‘./wechat_token.txt‘, json_encode($data)); if ($res) { echo ‘更新 token 成功‘; }} else { $token = $token_data[‘token‘];}// 获取ticket$ticket_data = file_get_contents(‘./wechat_ticket.txt‘);if (!empty($ticket_data)) { $ticket_data = json_decode($ticket_data, true);}$time = time() - $ticket_data[‘time‘];if ($time > 3600) { $ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$token}&type=jsapi"; $ticket_res = https_request($ticket_url); $ticket_res = json_decode($ticket_res, true); $ticket = $ticket_res[‘ticket‘]; $data = array( ‘time‘ =>time(), ‘ticket‘ =>$ticket ); $res = file_put_contents(‘./wechat_ticket.txt‘, json_encode($data)); if ($res) { echo ‘更新 ticket 成功‘; }} else { $ticket = $ticket_data[‘ticket‘];}// 进行sha1签名$timestamp = time();$nonceStr = createNonceStr();// 注意 URL 建议动态获取(也可以写死).$protocol = (!empty($_SERVER[‘HTTPS‘]) && $_SERVER[‘HTTPS‘] !== ‘off‘ || $_SERVER[‘SERVER_PORT‘] == 443) ? "https://" : "http://";$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; // 调用JSSDK的页面地址// $url = $_SERVER[‘HTTP_REFERER‘]; // 前后端分离的, 获取请求地址(此值不准确时可以通过其他方式解决)$str = "jsapi_ticket={$ticket}&noncestr={$nonceStr}×tamp={$timestamp}&url={$url}";$sha_str = sha1($str);function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str;}/** * 模拟 http 请求 * @param String $url 请求网址 * @param Array $data 数据 */function https_request($url, $data = null){ // curl 初始化 $curl = curl_init(); // curl 设置 curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE); // 判断 $data get or post if ( !empty($data) ) { curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, $data); } curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // 执行 $res = curl_exec($curl); curl_close($curl); return $res;}?><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <h2 onclick="test()">扫一扫</h2> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: ‘<? echo $appid ?>‘, // 必填,公众号的唯一标识 timestamp: <? echo $timestamp ?>, // 必填,生成签名的时间戳 nonceStr: ‘<? echo $nonceStr ?>‘, // 必填,生成签名的随机串 signature: ‘<? echo $sha_str ?>‘,// 必填,签名 jsApiList: [‘scanQRCode‘] // 必填,需要使用的JS接口列表 }); wx.ready(function(){ console.log(‘接口配置成功‘); }); function test(){ console.log(‘ok啦‘); wx.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function (res) { var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果 console.log(result); } }); } </script></body></html>