愛華網(wǎng)第一步，到http://connect.qq.com/intro/login/這里去申請ＱＱ登錄，添加自己的信息。按步驟來就行。要說的一點(diǎn)是什么呢，就是回調(diào)地址，這里只要寫域名就行，別的什么都不用，而且你添寫主域名之后，子域名也能用，格式一般是這樣的，www.sohu.com這種格式的，注意一點(diǎn)是前面不要有http://。
申請成功之后，你會(huì)得到一個(gè)APP ID和一個(gè)key了。只有這二個(gè)值都在，你才可以進(jìn)行后面的步驟。
第二步，申請完成之后，你就需要在你的網(wǎng)站頁面中加上相應(yīng)的登錄按鈕與回調(diào)頁面參數(shù)了。
這里先說一下回調(diào)頁面，從字面上就很好理解，就是登錄ＱＱ之后，ＱＱ給你返回值的接收頁面，這個(gè)頁面可以是一個(gè)單獨(dú)的頁面，也可以和登錄頁面是一個(gè)。
ＱＱ為我們提供了最簡單了ＪＳＳＤＫ。我們只要簡單的調(diào)用一下就行了。
１，在需要加入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把它寫進(jìn)去，data-redirecturi這個(gè)就是回調(diào)頁面的地址。一般寫法如下http://www.sohu.com/Default.aspx這個(gè)default.aspx頁面就是接收ＱＱ登錄之后給的返回值的頁面，當(dāng)然了，你的登錄頁面和返回頁面也可以是一個(gè)
2, 請?jiān)趆tml頁面需要插入QQ登錄按鈕的位置，粘貼如下示例代碼
[javascript] view plaincopy?
<spanid="qq_login_btn"></span> <scripttype="text/javascript"> QC.Login({//按默認(rèn)樣式插入QQ登錄按鈕 btnId:"qq_login_btn"http://插入按鈕的節(jié)點(diǎn)id }); </script>
這里ＱＱ給了一個(gè)已經(jīng)定義好的ＱＱ登錄按鈕，當(dāng)然了，你也可以自己去定義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這個(gè)地址是告訴你如何自定義一個(gè)和你網(wǎng)站風(fēng)格一樣的登錄按鈕
到這里，你的登錄頁面，添加的東西就ＯＫ了，下面來看一下你的回調(diào)頁面
第三步，回調(diào)頁面的處理
１， JS SDK的回調(diào)地址頁，在回調(diào)地址頁面插入如下示例代碼
[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>這間
２， 就是調(diào)用相JS SDK相應(yīng)的方法，來取得你要知道的信息了，一般來講，我們想要得到的信息，最多就是用戶昵稱和用戶登錄成功之后，ＱＱ給我們返回的用戶唯一標(biāo)識。我們只要得到這二個(gè)值，就一切都好辦了。
得到昵稱
[html] view plaincopy?
<scripttype="text/javascript"> //從頁面收集OpenAPI必要的參數(shù)。get_user_info不需要輸入?yún)?shù)，因此paras中沒有參數(shù) varparas={}; //用JSSDK調(diào)用OpenAPI QC.api("get_user_info",paras) //指定接口訪問成功的接收函數(shù)，s為成功返回Response對象 .success(function(s){ //成功回調(diào)，通過s.data獲取OpenAPI的返回?cái)?shù)據(jù) alert("獲取用戶信息成功！當(dāng)前用戶昵稱為："+s.data.nickname); }) //指定接口訪問失敗的接收函數(shù)，f為失敗返回Response對象 .error(function(f){ //失敗回調(diào) alert("獲取用戶信息失敗！"); }) //指定接口完成請求后的接收函數(shù)，c為完成請求返回Response對象 .complete(function(c){ //完成請求回調(diào) alert("獲取用戶信息完成！"); }); </script>
獲取openId 與 accessToken：
用戶通過“QQ登錄”登錄成功后，可以調(diào)用示例代碼取到openId與accessToken
openId是用戶身份的唯一標(biāo)識，可以保存在本地，以便用戶下次登錄時(shí)可對應(yīng)到其之前的身份信息，不需要重新授權(quán)?！ ccessToken是表示當(dāng)前用戶在此網(wǎng)站/應(yīng)用的登錄狀態(tài)與授權(quán)信息，也可以保存在本地。
[javascript] view plaincopy?
<scripttype="text/javascript"> if(QC.Login.check()){//如果已登錄 QC.Login.getMe(function(openId,accessToken){ alert(["當(dāng)前登錄用戶的","openId為："+openId,"accessToken為："+accessToken].join("n")); }); //這里可以調(diào)用自己的保存接口 //... } </script>
下面是我做測試的一個(gè)頁面。代碼
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"http://插入按鈕的節(jié)點(diǎn)id }); </script> <scripttype="text/javascript"> //從頁面收集OpenAPI必要的參數(shù)。get_user_info不需要輸入?yún)?shù)，因此paras中沒有參數(shù) varparas={}; //用JSSDK調(diào)用OpenAPI QC.api("get_user_info",paras) //指定接口訪問成功的接收函數(shù)，s為成功返回Response對象 .success(function(s){ //成功回調(diào)，通過s.data獲取OpenAPI的返回?cái)?shù)據(jù) alert("獲取用戶信息成功！當(dāng)前用戶昵稱為："+s.data.nickname); }) //指定接口訪問失敗的接收函數(shù)，f為失敗返回Response對象 .error(function(f){ //失敗回調(diào) alert("獲取用戶信息失敗！"); }) //指定接口完成請求后的接收函數(shù)，c為完成請求返回Response對象 .complete(function(c){ //完成請求回調(diào) alert("獲取用戶信息完成！"); }); </script> <scripttype="text/javascript"> if(QC.Login.check()){//如果已登錄 QC.Login.getMe(function(openId,accessToken){ alert(["當(dāng)前登錄用戶的","openId為："+openId,"accessToken為："+accessToken].join("n")); $("#hidopenId").attr("value",openId); $("#hidaccessToken").attr("value",accessToken); }); //這里可以調(diào)用自己的保存接口 //... } 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(); } } }
