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.'&timestamp='.$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});驗證

我們在微信開發者工具中打開該網頁，會發現配置正確.

以上是生成配置信息並驗證的流程，有問題請大家指出，謝謝