爱华网第一步，到http://connect.qq.com/intro/login/这里去申请ＱＱ登录，添加自己的信息。按步骤来就行。要说的一点是什么呢，就是回调地址，这里只要写域名就行，别的什么都不用，而且你添写主域名之后，子域名也能用，格式一般是这样的，www.sohu.com这种格式的，注意一点是前面不要有http://。
申请成功之后，你会得到一个APP ID和一个key了。只有这二个值都在，你才可以进行后面的步骤。
第二步，申请完成之后，你就需要在你的网站页面中加上相应的登录按钮与回调页面参数了。
这里先说一下回调页面，从字面上就很好理解，就是登录ＱＱ之后，ＱＱ给你返回值的接收页面，这个页面可以是一个单独的页面，也可以和登录页面是一个。
ＱＱ为我们提供了最简单了ＪＳＳＤＫ。我们只要简单的调用一下就行了。
１，在需要加入QQ登录按钮的页面引入JS SDK库
[javascript] view plaincopy?
<scripttype="text/javascript"src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID"data-redirecturi="REDIRECTURI"charset="utf-8"> </script>
上面这代码，放到<head></head>之间
这里的data-appid就是你申请的appid把它写进去，data-redirecturi这个就是回调页面的地址。一般写法如下http://www.sohu.com/Default.aspx这个default.aspx页面就是接收ＱＱ登录之后给的返回值的页面，当然了，你的登录页面和返回页面也可以是一个
2, 请在html页面需要插入QQ登录按钮的位置，粘贴如下示例代码
[javascript] view plaincopy?
<spanid="qq_login_btn"></span> <scripttype="text/javascript"> QC.Login({//按默认样式插入QQ登录按钮 btnId:"qq_login_btn"//插入按钮的节点id }); </script>
这里ＱＱ给了一个已经定义好的ＱＱ登录按钮，当然了，你也可以自己去定义http://wiki.opensns.qq.com/wiki/%E3%80%90QQ%E7%99%BB%E5%BD%95%E3%80%91JS_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E#3._.E8.87.AA.E5.AE.9A.E4.B9.89.E7.99.BB.E5.BD.95.E6.8C.89.E9.92.AE这个地址是告诉你如何自定义一个和你网站风格一样的登录按钮
到这里，你的登录页面，添加的东西就ＯＫ了，下面来看一下你的回调页面
第三步，回调页面的处理
１， JS SDK的回调地址页，在回调地址页面插入如下示例代码
[javascript] view plaincopy?
<scripttype="text/javascript"src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"charset="utf-8"data-callback="true"></script>
和第二步里的一样，把这代码放到<head></head>这间
２， 就是调用相JS SDK相应的方法，来取得你要知道的信息了，一般来讲，我们想要得到的信息，最多就是用户昵称和用户登录成功之后，ＱＱ给我们返回的用户唯一标识。我们只要得到这二个值，就一切都好办了。
得到昵称
[html] view plaincopy?
<scripttype="text/javascript"> //从页面收集OpenAPI必要的参数。get_user_info不需要输入参数，因此paras中没有参数 varparas={}; //用JSSDK调用OpenAPI QC.api("get_user_info",paras) //指定接口访问成功的接收函数，s为成功返回Response对象 .success(function(s){ //成功回调，通过s.data获取OpenAPI的返回数据 alert("获取用户信息成功！当前用户昵称为："+s.data.nickname); }) //指定接口访问失败的接收函数，f为失败返回Response对象 .error(function(f){ //失败回调 alert("获取用户信息失败！"); }) //指定接口完成请求后的接收函数，c为完成请求返回Response对象 .complete(function(c){ //完成请求回调 alert("获取用户信息完成！"); }); </script>
获取openId 与 accessToken：
用户通过“QQ登录”登录成功后，可以调用示例代码取到openId与accessToken
openId是用户身份的唯一标识，可以保存在本地，以便用户下次登录时可对应到其之前的身份信息，不需要重新授权。 accessToken是表示当前用户在此网站/应用的登录状态与授权信息，也可以保存在本地。
[javascript] view plaincopy?
<scripttype="text/javascript"> if(QC.Login.check()){//如果已登录 QC.Login.getMe(function(openId,accessToken){ alert(["当前登录用户的","openId为："+openId,"accessToken为："+accessToken].join("n")); }); //这里可以调用自己的保存接口 //... } </script>
下面是我做测试的一个页面。代码
Default.aspx
[html] view plaincopy?
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="WirelessCity_Web.Default"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title></title> <scriptsrc="http://www.360doc.com/js/jquery-1.4.2.js"type="text/javascript"></script> <scripttype="text/javascript"src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"data-appid="100359262"data-redirecturi="http://b.am89.com/Default.aspx"charset="utf-8"></script> <scripttype="text/javascript"src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"charset="utf-8"data-callback="true"></script> </head> <body> <formid="form1"runat="server"> <spanid="qqLoginBtn"></span> <scripttype="text/javascript"> QC.Login({ btnId:"qqLoginBtn"//插入按钮的节点id }); </script> <scripttype="text/javascript"> //从页面收集OpenAPI必要的参数。get_user_info不需要输入参数，因此paras中没有参数 varparas={}; //用JSSDK调用OpenAPI QC.api("get_user_info",paras) //指定接口访问成功的接收函数，s为成功返回Response对象 .success(function(s){ //成功回调，通过s.data获取OpenAPI的返回数据 alert("获取用户信息成功！当前用户昵称为："+s.data.nickname); }) //指定接口访问失败的接收函数，f为失败返回Response对象 .error(function(f){ //失败回调 alert("获取用户信息失败！"); }) //指定接口完成请求后的接收函数，c为完成请求返回Response对象 .complete(function(c){ //完成请求回调 alert("获取用户信息完成！"); }); </script> <scripttype="text/javascript"> if(QC.Login.check()){//如果已登录 QC.Login.getMe(function(openId,accessToken){ alert(["当前登录用户的","openId为："+openId,"accessToken为："+accessToken].join("n")); $("#hidopenId").attr("value",openId); $("#hidaccessToken").attr("value",accessToken); }); //这里可以调用自己的保存接口 //... } functionContAdd(){ varopenId=$("#hidopenId").val(); varaccessToken=$("#hidaccessToken").val(); $.ajax({ type:"POST", url:"ajaxbackInfo.aspx", data:"openId="+openId+"&accessToken="+accessToken+"", success:function(result){ alert("aa"+result); } }); } </script> </div> <asp:HiddenFieldID="hidopenId"runat="server"/> <asp:HiddenFieldID="hidaccessToken"runat="server"/> <br/> <inputtype="button"value="提交"id="btnSubmit"onclick="ContAdd();"/> </form> </body> </html>
ajaxbackInfo.aspx
[csharp] view plaincopy?
usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Web; usingSystem.Web.UI; usingSystem.Web.UI.WebControls; namespaceWirelessCity_Web { publicpartialclassajaxbackInfo:System.Web.UI.Page { protectedvoidPage_Load(objectsender,EventArgse) { stringopenId=Request.Form["openId"]??Request.QueryString["openId"]; stringaccessToken=Request.Form["accessToken"]??Request.QueryString["accessToken"]; Response.Write("openid:"+openId+"accessToken:"+accessToken); Response.End(); } } }
