公衆號配置
登錄微信公衆平臺進入–>“公衆號設置”–>“功能設置”–>填寫“JS接口安全域名”,具體進入官網查看與配置。
引入js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
通過jssdk配置接口注入權限驗證配置
wx.config({
debug: false,
appId: "", // 公衆號唯一標識
timestamp: "", // 生成簽名的時間戳
nonceStr: "", // 生成簽名的隨機串
signature: "", // 加密的簽名
jsApiList: [] // 需要使用的JS接口列表
});
封裝一個jssdk配置類
- 先獲取access_token
- 再獲取jsapi_ticket
- 最後獲取jssdk配置
<?php
namespace wx;
class JSSDK
{
private $appid ='';
private $appsecret ='';
public function __construct($appid, $appsecret)
{
$this->appid = $appid;
$this->appsecret = $appsecret;
}
// 1.獲取access token
// 2.獲取jsapi_ticket
// 3.獲取jssdk配置
// 請求方式,通過curl獲取
}
先封裝一個curl請求方法
private function httpPostRequest($url, $data = null, $json = false)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
if (!empty($data)) {
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
if ($json) {
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt(
$curl,
CURLOPT_HTTPHEADER,
array(
'Content-Type: application/json; charset=utf-8',
'Content-Length: ' . strlen($data)
)
);
}
}
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec($curl);
curl_close($curl);
return $output;
}
獲取access_token
-
請求地址
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET -
步驟
– 判斷緩存中是否存在access_token
– 如果有緩存則直接返回access_token
– 如果沒有緩存則通過curl請求地址,並返回access_token -
代碼
private function getAccess_token()
{
$cache = cache('access_token');
if($cache){
return $cache;
} else {
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appid&secret=$this->appsecret";
$output = $this->httpPostRequest($url);
$json = json_decode($output);
if(isset($json->access_token)) {
cache('access_token',$json->access_token,7000);
return $json->access_token;
} else {
return false;
}
}
}
獲取jsapi_ticket
拿到access_token後,就可以獲取jsapi_ticket,jsapi_ticket是公衆號用於調用微信JS接口的臨時票據
- 請求方式
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
private function getJsapi_ticket()
{
$cache = cache('jsapi_ticket');
if($cache) { //判斷是否緩存
return $cache; // 有緩存則直接返回jsapi_ticket
} else {a
$access = $this->getAccess_token(); // 獲取access_token
if ($access) {
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access&type=jsapi";
$output = $this->httpPostRequest($url);
$json = json_decode($output);
if(isset($json->ticket)) {
cache('jsapi_ticket',$json->ticket,7000); // 緩存jsapi_ticket
return $json->ticket;
} else {
return false;
}
} else {
return false;
}
}
}
獲取jssdk配置:
- 獲取appid(公衆號唯一標識)
- 生成簽名的一個隨機字符串(noncestr)
- 生成簽名的時間戳(timestamp)
- 加密的簽名(signature)
public function getJSSDKconfig()
{
$strs="QWERTYUIOPASDFGHJKLZXCVBNM1234567890qwertyuiopasdfghjklzxcvbnm";
$noncestr=substr(str_shuffle($strs),mt_rand(0,strlen($strs)-11),10); //隨機字符串
$jsapi_ticket = $this->getJsapi_ticket(); //獲取jsapi_ticket
$timestamp = time(); //時間戳
$url = request()->url(true); //獲取當前url
//生成簽名
$str = 'jsapi_ticket='.$jsapi_ticket.'&noncestr='.$noncestr.'×tamp='.$timestamp.'&url='.$url;
// 生成簽名 -> jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
$signature = sha1($str); //sha1加密,生成JS-SDK權限驗證的簽名
// 返回配置參數
return [
'appId'=> $this->appid,
'timestamp'=> $timestamp,
'nonceStr'=> $noncestr,
'signature' => $signature
];
}
例子
實現微信掃一掃:
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
wx.config({
debug: false,
appId: "{$jssdkconfig['appId']}",
timestamp: "{$jssdkconfig['timestamp']}",
nonceStr: "{$jssdkconfig['nonceStr']}",
signature: "{$jssdkconfig['signature']}",
jsApiList: ['scanQRCode']
});
$('#scanButton').click(function () {
wx.scanQRCode({
needResult: 0,
scanType: ["qrCode", "barCode"],
success: function (res) {
var result = res.resultStr;
}
})
});
</script>