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


推荐阅读
  • 本文介绍了UUID(通用唯一标识符)的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符,广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID,并提供了多种优化方法,以提高生成效率和兼容性。 ... [详细]
  • C#微信开发入门教程第二篇:新手快速上手指南,含详细视频讲解
    在距离上次课程一个多星期后,我们终于带来了第二讲的内容。虽然原计划是一周一次更新,但由于工作繁忙有所延迟。近期在交流群中发现,一些初学者已经能够熟练调用微信接口,但对微信公众平台的消息接收处理机制还不够了解。因此,本次课程将详细介绍如何高效处理微信公众平台的消息接收,并提供详细的视频讲解,帮助大家快速上手。 ... [详细]
  •     参考:微信JS-SDK文档其中包含有分享朋友圈、发送给朋友的js接口方法。(似乎不知道什么时候就会废弃)    文档中有完整的步骤,麻烦的是第三步:通过config接口注入权限验证配置。其 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • 如何在微信公众平台集成新浪云服务应用摘要:新浪云服务平台SinaAppEngine(简称SAE)自2009年启动内部研发,并于同年对外开放。本文详细介绍了如何利用SAE的强大功能,在微信公众平台上构建高效、稳定的云服务应用程序,涵盖从环境配置到应用部署的全流程,为开发者提供详尽的技术指导与实践案例。 ... [详细]
  • 本文初步探讨了PHP中基于JWT(JSON Web Token)的身份验证机制。具体流程包括:1. 客户端通过用户名和密码发起登录请求;2. 服务器接收并验证用户凭证的合法性,若验证通过,则生成并返回一个JWT令牌;3. 客户端接收该令牌,并在后续请求中携带此令牌以完成身份验证。这一机制不仅提高了安全性,还简化了会话管理。 ... [详细]
  • 如何使用企业号实现文本、图片、文件、语音、视频、图文消息等消息的发送操作
    这篇文章主要为大家展示了“如何使用企业号实现文本、图片、文件、语音、视频、图文消息等消息的发送操作”,内容简而易懂,条理清晰,希望能够帮 ... [详细]
  • 微信开发之消息回复--文本消息(三)
    一、消息格式1<xml>2<ToUserName><![CDATA[toUser]]>3<ToUserName ... [详细]
  • 一.案例介绍这里模拟一个实际业务场景,进行介绍微信支付,业务功能包括:登录、注册、充值、查看充值记录。  页面图:  二.概要设计1.数据库设计  这里数 ... [详细]
  • MySQL初级篇——字符串、日期时间、流程控制函数的相关应用
    文章目录:1.字符串函数2.日期时间函数2.1获取日期时间2.2日期与时间戳的转换2.3获取年月日、时分秒、星期数、天数等函数2.4时间和秒钟的转换2. ... [详细]
  • 本文详细介绍了 TypeScript 中函数的多种定义方式,包括命名函数、匿名函数、类型别名和接口。同时,还探讨了函数参数的可选性、默认值、剩余参数以及函数重载等高级特性。 ... [详细]
  • 本文深入探讨了CGLIB BeanCopier在Bean对象复制中的应用及其优化技巧。相较于Spring的BeanUtils和Apache的BeanUtils,CGLIB BeanCopier在性能上具有显著优势。通过详细分析其内部机制和使用场景,本文提供了多种优化方法,帮助开发者在实际项目中更高效地利用这一工具。此外,文章还讨论了CGLIB BeanCopier在复杂对象结构和大规模数据处理中的表现,为读者提供了实用的参考和建议。 ... [详细]
  • 微信setData回调函数的示例分析
    这篇文章将为大家详细讲解有关微信setData回调函数的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收 ... [详细]
  • 微信开发中怎样接收视频消息的接口和参数
    这篇文章主要介绍微信开发中怎样接收视频消息的接口和参数,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!接收普通消息 ... [详细]
  • 微信开发之2048游戏的示例分析
    小编给大家分享一下微信开发之2048游戏的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有 ... [详细]
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社区 版权所有