QQ Open platform Web application interface test

Idle to Nothing, recently QQ application development has interest.

Idea:

Build a server on your PC to enable Tomcat to use Eclipse to build a Web project with the framework of spring MVC

Apply for a free domain name, map it to my local, so I can see the project I am developing on the outside, and I am also easy to maintain.

Put this project address to the application of QQ applications on the Debug interface can:)

Open platform Address:

http://open.qq.com/

Create an app of your own, type: Web page. unmanaged mode. After saving TX will be assigned a appid, Appkey

Why do you choose unmanaged mode here? Because choosing unmanaged means that the Application platform address can fill out the locally deployed projects that are applied to the extranet. and hosting, you have to put the project on the TX cloud server, because it is only learning, and not to go to a real development project, so for the time being, although it will be disconnected with their local tomcat will not see the effect.

Begin:

Local tomcat port changed to 8080

1. Application domain Name:

　　

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

Extranet associated intranet: Download nat123 from nat123.com, create a port map

Dot tk applies the domain name manage DNS CNAME setting:

Name:www

Target:nat123 Autonomous Domain name

2. Download the Java SDK OPENV3

We found that OpenID was required to invoke the interface, and the parameters such as OpenID, Openkey, pf, and so on were all transferred at debug time.

Reference Address: Http://open.qq.com/tools

We need to get these parameters on the controller side, of course AppID and Appkey are obtained from the 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";        }

At this point, you can access the calling interface via Ajax on the JS side.

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 (); //User Information$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 ':p F}, DataType:"JSON", Cache:false, Success:function (data) {if(data.ret== ' 1002 '){                        //login invalid, need to re-loginFusion2.dialog.relogin (); }Else{$j ("#userinfo"). HTML ("User information:<br>" +data);                }}, Error:function (err) {alert (ERR); }            }                                    );

The front-end JSP code is as follows:

<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 "I D= "PF" value= "${PF}"/> </div>Just fortest~ <br> <span id= "userinfo" ></span> <div> <input Typ E= "button" value= "Join application Group" id= "Joinappgroup"/> </div> <div> <spa n> send a Weibo:</span> <input type= "text" id= "weibocontent"/><br> <span id= "s Ync "> is sync? </span><input type=" checkbox "id =" Syncflag "value=" 0 "checked=" checked "/> <span Id= "error_msg" style= "color:red;d isplay:none" > cannot be empty </span> <input type= "button" value= "Send" id= " Sendweibo "/> </div> <input type=" text "name=" app "value=" SSS "> <input type=" Text "name=" app "value=" TTT "> </center>

Debug Effect:

QQ Open platform Web application interface test