PbootCMS是一套開源且成熟的PHP建站系統(tǒng)，標(biāo)簽簡單使用方便，利于它是相當(dāng)省事的。近期需要用到VUE項(xiàng)目，結(jié)合PbootCMS的API接口調(diào)用數(shù)據(jù)，使用還是相當(dāng)簡單的。今天主要講一下API強(qiáng)制認(rèn)證方式下的實(shí)現(xiàn)步驟，希望對API接口感興趣的朋友能有所幫助。

基于安全考慮，建議調(diào)用接口的網(wǎng)站都開啟“API強(qiáng)制認(rèn)證”，即有Appid，Appsecret，Timestamp，Signature組合的安全通道。功能調(diào)試的時候可以不啟用，基礎(chǔ)功能實(shí)現(xiàn)后網(wǎng)站后端開“API強(qiáng)制認(rèn)證”，數(shù)據(jù)調(diào)取方在請求地址中加入相關(guān)token參數(shù)。

第一種：Ajax方式下實(shí)現(xiàn)(網(wǎng)站本地環(huán)境下實(shí)現(xiàn))

<script>
//document.write(hex_md5("admin"));
$(document).ready(function (e) {

    var appid     = 'test';    //后臺WebAPI中設(shè)置的AppID
    var appsecret = 'WxwHJOLSiowf123456';    //后臺WebAPI中設(shè)置的API認(rèn)證密鑰
    var timestamp = Date.parse(new Date());
        timestamp = timestamp / 1000;  //獲取當(dāng)前時間戳
    var signature = hex_md5(hex_md5(appid + appsecret + timestamp));    //構(gòu)建signature

  var url='/api.php/cms/site';
  $.ajax({
    type: 'POST',
    url: url,
    dataType: 'json',
    data: {
      appid: appid,//{pboot:appid}
      timestamp: timestamp,//{pboot:timestamp}
      signature: signature//{pboot:signature}
     },

    success: function (response, status) {
      if(response.code){
        //獲取數(shù)據(jù)成功
        alert(response.data.title);
      }else{
        //返回錯誤數(shù)據(jù)
        alert(response.data);
      }
    },

    error:function(xhr,status,error){
      //返回?cái)?shù)據(jù)異常
      alert('返回?cái)?shù)據(jù)異常！');
    }
  });
});

</script>

第二種：Axios方式下實(shí)現(xiàn)

<script type="text/javascript">
        var appid     = 'test';    //后臺WebAPI中設(shè)置的AppID
        var appsecret = 'WxwHJOLSiowf123456';    //后臺WebAPI中設(shè)置的API認(rèn)證密鑰
        var timestamp = Date.parse(new Date());
            timestamp = timestamp / 1000;
            //獲取當(dāng)前時間戳
        var signature = hex_md5(hex_md5(appid + appsecret + timestamp));    //構(gòu)建signature
        
    new Vue({
        el:'#app',
        data () {
            return{
                info: null
            }
        },
        mounted(){
            axios
            //alert(signature)
            .get("https://www.371jianzhan.com/api.php/cms/sort/scode/2", {params : {'appid':appid,'timestamp':timestamp,'signature':signature}})
            .then(response => (this.info=response))
            .catch(function(error){
                //console.log(error);
            });
        }
    })
</script>

注意事項(xiàng)：請一定要在網(wǎng)頁頭部引用MD5文件，<script src="md5.js"></script>，否則會出錯，系統(tǒng)要求對Signature進(jìn)行二次MD5加密，所以要先包含這個加密文件。

特殊問題：當(dāng)調(diào)試的時候發(fā)現(xiàn)提示“接口時間戳驗(yàn)證失敗！”，一般是由于調(diào)試方與服務(wù)器時間不同步或差距較大造成的，請同步一下調(diào)試方電腦的日期和時間就可以解決這個問題。