使用PHP对微信服务号JSSDK签名授权的开发实录

100人浏览 2024-08-26 08:48:25

准备工作

1. 配置微信公众平台域名白名单

2. 前端引入JSSDK

PHP服务器端配置

使用PHP脚本获取token及签名的代码如下：

<?php
// curl获取数据
function curl_get_contents($url, $timeout = 8)
{
 $curlHandle = curl_init();
 curl_setopt($curlHandle, CURLOPT_URL, $url);
 curl_setopt($curlHandle, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($curlHandle, CURLOPT_TIMEOUT, $timeout);
 $result = curl_exec($curlHandle);
 curl_close($curlHandle);
 return $result;
}
// 获取token
function getToken () {
 $appid = 'wx************';;
 $appsecret = '************';
 return curl_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret);
}
// 获取ticket
function getTicket ($token) {
 return curl_get_contents('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$token.'&type=jsapi');
}
// 生成无序字符串
function genNonceStr ($length = 16) {
 $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 $str = "";
 for ($i = 0; $i < $length; $i++) {
 $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
 }
 return $str;
}
// 生成配置
function genConfig () {
// 获取 access_token
 $access_token = json_decode(getToken(), true)['access_token'];
 // 获取 ticket
 $ticket = json_decode(getTicket($access_token), true)['ticket'];
 // 生成签名
 $nonstr = genNonceStr();
 $url = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';
 $time = time();
 $query = [
 'jsapi_ticket' => $ticket,
 'noncestr' => $nonstr,
 'timestamp' => $time,
 'url' => $url
 ];
 $signStr = "jsapi_ticket=$ticket&noncestr=$nonstr&timestamp=$time&url=$url";
 $signature = sha1($signStr);
 $appid = 'wx************';
 return json_encode([
 'code' => 1,
 'data' => [
 'query' => $query,
 'signStr' => $signStr,
 'appId' => $appid,
 'timestamp' => $time,
 'nonceStr' => $nonstr,
 'signature' => $signature,
 'url' => $url
 ]
 ]);
}
echo genConfig();

获取签名的方法：先获取ticket，然后使用ticket换取token，最后使用获取到的token计算出签名（signature）。

客户端配置

1. 获取服务器端签名

2. 配置wx.config参数

3. 配置权限列表

weixinInit () {
 const time = new Date().getTime()
 axiosBase.get(`/wechat/genConfig?t=${time}`).then(function (response) {
 if (response.data.code !== 1) {
 return
 }
 let parm = response.data.data
 wx.config({
 debug: false,
 appId: parm.appId,
 timestamp: parm.timestamp,
 nonceStr: parm.nonceStr,
 signature: parm.signature,
 jsApiList: [
 'getLocation',
 'checkJsApi',
 'chooseWXPay',
 'closeWindow',
 'openLocation',
 'onMenuShareTimeline',
 'onMenuShareAppMessage',
 'onMenuShareQQ',
 'onMenuShareWeibo',
 'onMenuShareQZone',
 'hideMenuItems',
 'scanQRCode'
 ]
 })
 })
}
// 封装微信各种分享
weixinShare (title, link, imgUrl, desc) {
 this.weixinInit()
 wx.ready(() => {
 wx.hideMenuItems({
 menuList: [
 'menuItem:copyUrl',
 'menuItem:openWithQQBrowser',
 'menuItem:openWithSafari',
 'menuItem:share:email',
 'menuItem:share:brand'
 ]
 })
 // 分享到朋友圈
 wx.onMenuShareTimeline({
 title: title, // 分享标题
 link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 imgUrl: imgUrl, // 分享图标
 success: function () {},
 cancel: function () {}
 })
 // 分享给朋友
 wx.onMenuShareAppMessage({
 title: title, // 分享标题
 desc: desc, // 分享描述
 link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 imgUrl: imgUrl, // 分享图标
 type: '', // 分享类型,music、video或link，不填默认为link
 dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
 success: function () {},
 cancel: function () {}
 })
 // 分享到QQ
 wx.onMenuShareQQ({
 title: title, // 分享标题
 desc: desc, // 分享描述
 link: link, // 分享链接
 imgUrl: imgUrl, // 分享图标
 success: function () {},
 cancel: function () {}
 })
 // 分享到腾讯微博
 wx.onMenuShareWeibo({
 title: title, // 分享标题
 desc: desc, // 分享描述
 link: link, // 分享链接
 imgUrl: imgUrl, // 分享图标
 success: function () {},
 cancel: function () {}
 })
 // 分享到QQ空间
 wx.onMenuShareQZone({
 title: title, // 分享标题
 desc: desc, // 分享描述
 link: link, // 分享链接
 imgUrl: imgUrl, // 分享图标
 success: function () {},
 cancel: function () {}
 })
 })
}