PHP+TP框架生成使用微信JS-SDK所需的配置信息,并验证
我在前几篇博客中写到了获取调用JS-SDK需要使用的access_token,网页授权获取用户基本信息,获取JS-SDK使用签名算法需要使用的jsapi_ticket,现在我们使用微信JS-SDK,注入配置,并验证是否正确.我用的是微信测试号
一.绑定域名(填写JS接口安全域名).
二.引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
三:通过config接口注入权限验证配置
使用wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});验证配置是否正确.
四.生成签名.
1.签名需要的字段:noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分)
2.在公共方法中定义函数nonceStr()用于获取随机字符串.
//生成随机字符串 function nonceStr(){ //定义一个字符串 $chars='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz'; //当前的时间戳 $time = time(); //从该字符串中获取随机字符串 $chars = $chars.$time; //打乱字符串 $chars = str_shuffle($chars); return substr($chars,0,16); }
3.生成签名.
在公共方法中定义signature()函数,用于生成签名
//生成签名函数,参数$time(生成签名的时间),$url(网页的url),$nonceStr(随机字符串) //因为我们注入网页的配置信息中,生成签名的时间和随机字符串必须和注入的一样, //所以我生成签名的时候传递一个参数,以达到相同的时间戳,和随机字符串。 function signature($time,$url,$nonceStr){ //拼接字符串 $string = 'jsapi_ticket='.getJsapiTicket().'&noncestr='.$nonceStr.'×tamp='.$time.'&url='.$url; //生成签名 $string = sha1($string); return $string; }
五.生成调用微信JS-SDK接口所需要的配置信息
在公共方法中定义getConfig()函数,用于生成配置信息
//生成使用微信JS-SDK需要注入的配置信息,参数$url(当前网址的url) function getConfig($url){ $array = []; $array['debug'] = true; $array['appId'] = C('appID'); //生成签名的时间戳 $time = time(); $array['timestamp'] = $time; //签名使用的随机字符串 $nonceStr = nonceStr(); $array['nonceStr'] = $nonceStr; $array['signature'] = signature($time,$url,$nonceStr); //设置需要使用的js接口 $array['jsApiList'] = ['chooseImage']; //返回配置信息 return json_encode($array); }
六.获取配置信息并注入到网页,通过微信开发者工具查看配置是否正确.
class IndexController extends BaseController { public function index(){ //当前的网址 // 注意 URL 一定要动态获取,不能 hardcode. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; //获取配置信息 $config = getConfig($url); //传入配置信息到网页中 $this->assign('config',$config); $this->display(); } }
在网页中获取配置信息并通过
wx.config({$config});验证
我们在微信开发者工具中打开该网页,会发现配置正确.
以上是生成配置信息并验证的流程,有问题请大家指出,谢谢