热门标签 | 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窗口的提示就不会弹出来了


推荐阅读
  • 本文介绍了如何使用JavaScript的Fetch API与Express服务器进行交互,涵盖了GET、POST、PUT和DELETE请求的实现,并展示了如何处理JSON响应。 ... [详细]
  • 本文详细介绍了网络存储技术的基本概念、分类及应用场景。通过分析直连式存储(DAS)、网络附加存储(NAS)和存储区域网络(SAN)的特点,帮助读者理解不同存储方式的优势与局限性。 ... [详细]
  • 深入解析 Spring Security 用户认证机制
    本文将详细介绍 Spring Security 中用户登录认证的核心流程,重点分析 AbstractAuthenticationProcessingFilter 和 AuthenticationManager 的工作原理。通过理解这些组件的实现,读者可以更好地掌握 Spring Security 的认证机制。 ... [详细]
  • 本文详细介绍了如何使用PHP检测AJAX请求,通过分析预定义服务器变量来判断请求是否来自XMLHttpRequest。此方法简单实用,适用于各种Web开发场景。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文深入探讨了Linux系统中网卡绑定(bonding)的七种工作模式。网卡绑定技术通过将多个物理网卡组合成一个逻辑网卡,实现网络冗余、带宽聚合和负载均衡,在生产环境中广泛应用。文章详细介绍了每种模式的特点、适用场景及配置方法。 ... [详细]
  • 本文介绍了如何使用PHP代码实现微信平台的媒体素材上传功能,详细解释了API接口的使用方法和注意事项,确保文件路径正确以避免常见的错误。 ... [详细]
  • 使用Vultr云服务器和Namesilo域名搭建个人网站
    本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站,包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南,帮助读者顺利完成建站过程。 ... [详细]
  • 使用Python在SAE上开发新浪微博应用的初步探索
    最近重新审视了新浪云平台(SAE)提供的服务,发现其已支持Python开发。本文将详细介绍如何利用Django框架构建一个简单的新浪微博应用,并分享开发过程中的关键步骤。 ... [详细]
  • 深入解析TCP/IP五层协议
    本文详细介绍了TCP/IP五层协议模型,包括物理层、数据链路层、网络层、传输层和应用层。每层的功能及其相互关系将被逐一解释,帮助读者理解互联网通信的原理。此外,还特别讨论了UDP和TCP协议的特点以及三次握手、四次挥手的过程。 ... [详细]
  • 本文详细介绍如何通过修改配置文件来隐藏Apache、Nginx和PHP的版本号,从而增强网站的安全性。我们将提供具体的配置步骤,并解释这些设置的重要性。 ... [详细]
  • 本文详细介绍了优化DB2数据库性能的多种方法,涵盖统计信息更新、缓冲池调整、日志缓冲区配置、应用程序堆大小设置、排序堆参数调整、代理程序管理、锁机制优化、活动应用程序限制、页清除程序配置、I/O服务器数量设定以及编入组提交数调整等方面。通过这些技术手段,可以显著提升数据库的运行效率和响应速度。 ... [详细]
  • 深入解析Java枚举及其高级特性
    本文详细介绍了Java枚举的概念、语法、使用规则和应用场景,并探讨了其在实际编程中的高级应用。所有相关内容已收录于GitHub仓库[JavaLearningmanual](https://github.com/Ziphtracks/JavaLearningmanual),欢迎Star并持续关注。 ... [详细]
  • 深入解析Java虚拟机(JVM)架构与原理
    本文旨在为读者提供对Java虚拟机(JVM)的全面理解,涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制,帮助开发者更好地掌握Java编程的核心技术。 ... [详细]
  • 本文作者分享了在阿里巴巴获得实习offer的经历,包括五轮面试的详细内容和经验总结。其中四轮为技术面试,一轮为HR面试,涵盖了大量的Java技术和项目实践经验。 ... [详细]
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社区 版权所有