热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信开发调用JSSDK扫一扫功能

调用扫一扫功能有几个步骤简单而言:1获取accesstoken2获取jsapi_ticket3生成签名signature调用wx.configwx.readywx.erro

调用扫一扫功能有几个步骤

简单而言:

1 获取accesstoken

2  获取jsapi_ticket

3 生成签名signature

调用wx.config     wx.ready     wx.error

三个function


=======我个人的代码在最后面,只是部分代码。具体的需要你们自己写,我用的是LaneWechat



(1和2都需要自己把它存储起来,ticket的调用次数比较少,所以更要注意,记住要写一个中转器自动检查更新这两个数据,而不是主动请求的时候才去生成新的凭据,否则在会出现延迟,页面出现错误,需要再次刷新才正常)

============================详细介绍:



在这里要说的是,我之前提示的是invaild signature  结果用官方的接口调试工具发现我生成的加密数据和官方生成的不同,调试工具:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign


结果发现,是因为我的timestramp 和  noncsrt  用的不是同一个,他们分别执行了两次,对不上号所以出错了。大家要注意


  1. 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
  2. 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回如下JSON:

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。


签名算法

签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。


即signature=sha1(string1)。 示例:

  • nOncestr=Wm3WZYTPz0wzccnW
  • jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
  • timestamp=1414587457
  • url=http://mp.weixin.qq.com?params=value


步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&nOncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value


步骤2. 对string1进行sha1签名,得到signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事项

  1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
  2. 签名用的url必须是调用JS接口页面的完整URL。
  3. 出于安全考虑,开发者必须在服务器端实现签名的逻辑




个人代码参考: 1//获取accesstoken  略 2: 获取jsapi_ticket
class JsapiTicket{


public static function getJsapiTicket(){

$jsapi_ticket = self::_checkJsapiTicket();
if($jsapi_ticket === false){
$jsapi_ticket = self::_getJsapiTicket();
}
return $jsapi_ticket['ticket'];
}


private static function _getJsapiTicket(){


$accessToken=AccessToken::getAccessToken();//获取access_token
//通过获取的accessToken请求 jsapi Ticket
//请求地址: https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
//GET方式请求
// print_r('get_accesstoken====>'.$accessToken);
$ticket_url='https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$accessToken.'&type=jsapi';


$jsapi_ticket = Curl::callWebServer($ticket_url, '', 'GET');
// print_r('JsapiTicket:====>>>'.$jsapi_ticket);



$jsapi_ticket['time'] = time();//设置时间戳
$jsapi_ticketJson = json_encode($jsapi_ticket);



$f = fopen('jsapi_ticket', 'w+');//将ticket保存下来。它也是有效期为7200S,而且接口的调用次数比accesstoken少
fwrite($f, $jsapi_ticketJson);
fclose($f);
// print_r('jsapi_ticket====>'.$jsapi_ticketJson);
return $jsapi_ticketJson;
}

/**
* @descrpition 检测微信ticket是否过期
*
* @return bool
*/
private static function _checkJsapiTicket(){

$data = file_get_contents('jsapi_ticket');
//print_r('从文件中读取的accesstoken,data是 :'.$data);
$jsapi_ticket['value'] = $data;
if(!empty($jsapi_ticket['value'])){
$jsapi_ticket = json_decode($jsapi_ticket['value'], true);

if(time() - $jsapi_ticket['time'] <$jsapi_ticket['expires_in']-200){//200为缓冲期
return $jsapi_ticket;
}
}
return false;//无论是ACCESSTOKEN过期了还是没有ACCESSTOKEN,都返回FALSE
}

}



三:生成签名(参考上面的 signature 签名算法,有几个参数是必要的)
 $randNumber=getRandChar(10);//随机字符串,这个是必要的
$curtime=time();//生成一个时间戳


function ticket(){

$ticket=JsapiTicket::getJsapiTicket();//获取ticket

//print_r($ticket);
return $ticket;

}

function getRandChar($length){
$str = null;
$strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
$max = strlen($strPol)-1;

for($i=0;$i<$length;$i++){
$str.=$strPol[rand(0,$max)];//rand($min,$max)生成介于min和max两个数之间的一个随机整数
}

return $str;
}


function getSignature(){

//获取SHA1加密后的字符串(官方有个加密检测工具,如果生成的最后数据跟你的生成的不一样,就说明是错的,其中有可能错的就是,你生成了两次的随机数或者两次的时间戳,所以务必确认你生成的参数和你提交的参数是相同的)
global $randNumber;
global $curtime;
$str="jsapi_ticket=".ticket()."&nOncestr=".$randNumber."×tamp=".$curtime."&url=http://weixin.ittun.com/huayuanWechat/saomiao.php";
//echo $str;
$signature=sha1($str);
return $signature;
//return $str;
}


四:调用微信后台接口,记住要在公众号的功能设置填写有效的JS接口安全域,否则会提示无接口权限,其中有一个步骤是下载一个TXT文件放在填写的域名或者路径下。
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: appid, // 必填,公众号的唯一标识
    timestamp: timestamp, // 必填,生成签名的时间戳
    nonceStr: nonceStr, // 必填,生成签名的随机串
    signature: signature,// 必填,签名,见附录1
    jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

wx.ready(function(){


    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
mui.alert('微信接口准备就绪');
mui.alert('开始调用扫一扫接口');
wx.scanQRCode({
    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
    success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
}
});


});

});



wx.error(function(res){


    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
mui.alert('微信接口调用失败');

});


测试完成后再wx.config方法中的debug参数设置为false,这样alert窗口的提示就不会弹出来了


推荐阅读
  •     参考:微信JS-SDK文档其中包含有分享朋友圈、发送给朋友的js接口方法。(似乎不知道什么时候就会废弃)    文档中有完整的步骤,麻烦的是第三步:通过config接口注入权限验证配置。其 ... [详细]
  • 为了解决不同服务器间共享图片的需求,我们最初考虑建立一个FTP图片服务器。然而,考虑到项目是一个简单的CMS系统,为了简化流程,团队决定探索七牛云存储的解决方案。本文将详细介绍使用七牛云存储的过程和心得。 ... [详细]
  • 深入解析 Apache Shiro 安全框架架构
    本文详细介绍了 Apache Shiro,一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作,使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API,同时确保高度的安全性和灵活性。 ... [详细]
  • 远程过程调用(RPC)是一种允许客户端通过网络请求服务器执行特定功能的技术。它简化了分布式系统的交互,使开发者可以像调用本地函数一样调用远程服务,并获得返回结果。本文将深入探讨RPC的工作原理、发展历程及其在现代技术中的应用。 ... [详细]
  • 2017-2018年度《网络编程与安全》第五次实验报告
    本报告详细记录了2017-2018学年《网络编程与安全》课程第五次实验的具体内容、实验过程、遇到的问题及解决方案。 ... [详细]
  • 微信开发学习2--消息管理
    微信官方文档:一、接收普通消息(这里以文本消息举例)当普通微信用户向公众账号发消息时,微信服务器将POST消息的XML数据包到开发者填写的URL上 ... [详细]
  • 作者:守望者1028链接:https:www.nowcoder.comdiscuss55353来源:牛客网面试高频题:校招过程中参考过牛客诸位大佬的面经,但是具体哪一块是参考谁的我 ... [详细]
  • 2018年3月31日,CSDN、火星财经联合中关村区块链产业联盟等机构举办的2018区块链技术及应用峰会(BTA)核心分会场圆满举行。多位业内顶尖专家深入探讨了区块链的核心技术原理及其在实际业务中的应用。 ... [详细]
  • 采用IKE方式建立IPsec安全隧道
    一、【组网和实验环境】按如上的接口ip先作配置,再作ipsec的相关配置,配置文本见文章最后本文实验采用的交换机是H3C模拟器,下载地址如 ... [详细]
  • 本文回顾了2017年的转型和2018年的收获,分享了几家知名互联网公司提供的工作机会及面试体验。 ... [详细]
  • Python + Pytest 接口自动化测试中 Token 关联登录的实现方法
    本文将深入探讨 Python 和 Pytest 在接口自动化测试中如何实现 Token 关联登录,内容详尽、逻辑清晰,旨在帮助读者掌握这一关键技能。 ... [详细]
  • 探讨在构建类似Viber或WhatsApp的聊天应用时,如何有效实现客户端(Web、Android、iOS)与服务器之间的连接。本文将分析使用WebSockets标准及其替代方案的优劣。 ... [详细]
  • 微信登录(网站应用)ASP.NET第一步:请求CODE.第二步:通过CODE获取access_token.第三步:通过access_token调用接 ... [详细]
  • 如何使用企业号实现文本、图片、文件、语音、视频、图文消息等消息的发送操作
    这篇文章主要为大家展示了“如何使用企业号实现文本、图片、文件、语音、视频、图文消息等消息的发送操作”,内容简而易懂,条理清晰,希望能够帮 ... [详细]
  • 微信公众平台开发之如何上传下载多媒体文件
    这篇文章主要为大家展示了“微信公众平台开发之如何上传下载多媒体文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑, ... [详细]
author-avatar
咿呀最有味先
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有