QQ開放平臺網頁應用接口測試

閒來無事，近日對QQ應用開發有了興趣。

想法：

　　在本身的pc上搭建一個服務器，能夠是Tomcat，運用Eclipse建立一個web項目，框架爲Spring MVC

　　申請一個免費域名，映射到個人本地，這樣就能夠在外網看到我正在開發的項目了，而且我本身還便於維護。

　　將這個項目地址投放到QQ申請的應用上調試接口便可:)

開放平臺地址：

　　http://open.qq.com/

建立一個屬於本身的應用，類型：網頁。非託管方式。保存後TX將分配一個appid、appkey

　　這裏爲何要選擇非託管方式呢？由於選擇非託管的話，就意味着應用平臺地址能夠填寫本身本地部署的應用於外網的項目。而託管的話，就必須將項目放到TX雲服務器上，由於只是學習，並無要去真正的開發項目，因此暫時如此，雖然會隨着本身本地Tomcat斷開就看不到效果了。。

開始：

本地tomcat端口改成8080

1.申請域名：

　　

　　http://my.dot.tk/cgi-bin/login01.taloha

　　外網關聯內網：下載nat123 from nat123.com，建立一個端口映射

　　dot tk申請的域名manage dns CNAME設置:

　　　　　　name:www

　　　　　　target:nat123自主域名

2.下載JAVA SDK OPENV3

　　咱們發現調用接口時須要openid，經過了解openid、openkey、pf等參數的獲取都是在調試的時候轉入的。

　　參考地址：http://open.qq.com/tools

　　咱們須要在Controller端將這些參數獲取，固然appid、appkey是從properties裏獲取

　　

@RequestMapping(value ={"/index.htm"," /"},method =RequestMethod.GET)
        public String toHome(Model model,HttpServletRequest request,
                HttpServletResponse response){
            model.addAttribute("appid", QQConfig.getValue("app_ID"));
            model.addAttribute("appkey", QQConfig.getValue("app_KEY"));
            model.addAttribute("openid", request.getParameter("openid"));
            model.addAttribute("openkey", request.getParameter("openkey"));
            model.addAttribute("pf", request.getParameter("pf"));
            return "index";
        }

這時，在js端就能夠經過ajax訪問調用接口了

    var appid =$j("#appid").val();
    var appkey =$j("#appkey").val();
    var openid =$j("#openid").val();
    var openkey =$j("#openkey").val();
    var pf =$j("#pf").val();
    //用戶信息
    $j.ajax(
            {
                type: "get",
                async: false,
                url: getUserInfo,
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                data: {
                        'appid':appid,
                        'appkey':appkey,
                        'openid':openid,
                        'openkey':openkey,
                        'pf':pf
                    },
                dataType: "json",
                cache: false,
                success: function (data) {
                    if(data.ret=='1002'){
                        //登錄失效，需從新登錄
                        fusion2.dialog.relogin();
                    }else{
                        $j("#userinfo").html("用戶信息:<br>"+data);
                    }
                },
                error: function (err) {
                    alert(err);
                }
            }
            
            
            );

前端jsp代碼以下：

<center>
      <div id ="hidden_area">
      
          <input type="hidden" id="appid" value="${appid}" />
          <input type="hidden" id="appkey" value="${appkey}" />
          <input type="hidden" id="openid" value="${openid}" />
          <input type="hidden" id="openkey" value="${openkey}" />
          <input type="hidden" id="pf" value="${pf}" />
      </div>
          Just for test~
          <br>
          <span id="userinfo"></span>
          <div>
              <input type="button" value="加入應用羣" id="joinAppGroup" />
          </div>
          
          <div>
              <span>發送一條微博:</span>
              <input type="text" id="weiboContent" /><br>
              <span id="sync">是否同步?</span><input type="checkbox" id ="syncflag" value="0" checked="checked"/>
              <span id="error_msg" style="color:red ;display :none" >不能爲空</span>
              <input type="button" value="發送" id="sendWeibo" />
          </div>
          <input type="text" name="app" value="sss">
          <input type="text" name="app" value="ttt">
          
    </center>

調試效果：