|
QQ第三方登錄的應(yīng)用
現(xiàn)在這種第三方登錄的應(yīng)用很廣泛也很方便。省得用戶進(jìn)行注冊了?，F(xiàn)在把ＱＱ登錄的方法和步驟記錄一下，以備使用時方便。 第一步，到http://connect.qq.com/intro/login/這里去申請ＱＱ登錄，添加自己的信息。按步驟來就行。要說的一點(diǎn)是什么呢，就是回調(diào)地址，這里只要寫域名就行，別的什么都不用，而且你添寫主域名之后，子域名也能用，格式一般是這樣的，www.sohu.com這種格式的，注意一點(diǎn)是前面不要有http://。 申請成功之后，你會得到一個APP ID和一個key了。只有這二個值都在，你才可以進(jìn)行后面的步驟。 第二步，申請完成之后，你就需要在你的網(wǎng)站頁面中加上相應(yīng)的登錄按鈕與回調(diào)頁面參數(shù)了。 這里先說一下回調(diào)頁面，從字面上就很好理解，就是登錄ＱＱ之后，ＱＱ給你返回值的接收頁面，這個頁面可以是一個單獨(dú)的頁面，也可以和登錄頁面是一個。 ?。眩褳槲覀兲峁┝俗詈唵瘟耍剩樱樱模?。我們只要簡單的調(diào)用一下就行了。 ?。保谛枰尤隥Q登錄按鈕的頁面引入JS SDK庫
<script type="text/javascript" src="http://qzonestyle./qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"> </script>上面這代碼，放到<head></head>之間 這里的data-appid就是你申請的appid把它寫進(jìn)去，data-redirecturi這個就是回調(diào)頁面的地址。一般寫法如下http://www.sohu.com/Default.aspx這個default.aspx頁面就是接收ＱＱ登錄之后給的返回值的頁面，當(dāng)然了，你的登錄頁面和返回頁面也可以是一個 2, 請在html頁面需要插入QQ登錄按鈕的位置，粘貼如下示例代碼
<span id="qq_login_btn"></span>
<script type="text/javascript">
QC.Login({//按默認(rèn)樣式插入QQ登錄按鈕
btnId:"qq_login_btn" //插入按鈕的節(jié)點(diǎn)id
});
</script>這里ＱＱ給了一個已經(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這個地址是告訴你如何自定義一個和你網(wǎng)站風(fēng)格一樣的登錄按鈕 到這里，你的登錄頁面，添加的東西就ＯＫ了，下面來看一下你的回調(diào)頁面 第三步，回調(diào)頁面的處理 ?。?， JS SDK的回調(diào)地址頁，在回調(diào)地址頁面插入如下示例代碼
<script type="text/javascript" src="http://qzonestyle./qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>和第二步里的一樣，把這代碼放到<head></head>這間 ?。玻【褪钦{(diào)用相JS SDK相應(yīng)的方法，來取得你要知道的信息了，一般來講，我們想要得到的信息，最多就是用戶昵稱和用戶登錄成功之后，ＱＱ給我們返回的用戶唯一標(biāo)識。我們只要得到這二個值，就一切都好辦了。 得到昵稱
<script type="text/javascript">
//從頁面收集OpenAPI必要的參數(shù)。get_user_info不需要輸入?yún)?shù)，因此paras中沒有參數(shù)
var paras = {};
//用JS SDK調(diào)用OpenAPI
QC.api("get_user_info", paras)
//指定接口訪問成功的接收函數(shù)，s為成功返回Response對象
.success(function(s){
//成功回調(diào)，通過s.data獲取OpenAPI的返回數(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)識，可以保存在本地，以便用戶下次登錄時可對應(yīng)到其之前的身份信息，不需要重新授權(quán)?！ ccessToken是表示當(dāng)前用戶在此網(wǎng)站/應(yīng)用的登錄狀態(tài)與授權(quán)信息，也可以保存在本地。
<script type="text/javascript">
if(QC.Login.check()){//如果已登錄
QC.Login.getMe(function(openId, accessToken){
alert(["當(dāng)前登錄用戶的", "openId為："+openId, "accessToken為："+accessToken].join("\n"));
});
//這里可以調(diào)用自己的保存接口
//...
}
</script>下面是我做測試的一個頁面。代碼 Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WirelessCity_Web.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head runat="server">
<title></title>
<script src="/js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://qzonestyle./qzone/openapi/qc_loader.js" data-appid="100359262" data-redirecturi="http://b./Default.aspx" charset="utf-8"></script>
<script type="text/javascript" src="http://qzonestyle./qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
</head>
<body>
<form id="form1" runat="server">
<span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({
btnId: "qqLoginBtn" //插入按鈕的節(jié)點(diǎn)id
});
</script>
<script type="text/javascript">
//從頁面收集OpenAPI必要的參數(shù)。get_user_info不需要輸入?yún)?shù)，因此paras中沒有參數(shù)
var paras = {};
//用JS SDK調(diào)用OpenAPI
QC.api("get_user_info", paras)
//指定接口訪問成功的接收函數(shù)，s為成功返回Response對象
.success(function(s) {
//成功回調(diào)，通過s.data獲取OpenAPI的返回數(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>
<script type="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)用自己的保存接口
//...
}
function ContAdd() {
var openId = $("#hidopenId").val();
var accessToken = $("#hidaccessToken").val();
$.ajax({
type: "POST",
url: "ajaxbackInfo.aspx",
data: "openId=" + openId + "&accessToken=" + accessToken + "",
success: function(result) {
alert("aa" + result);
}
});
}
</script>
</div>
<asp:HiddenField ID="hidopenId" runat="server" />
<asp:HiddenField ID="hidaccessToken" runat="server" />
<br />
<input type="button" value="提 交" id="btnSubmit" onclick="ContAdd();" />
</form>
</body>
</html>
ajaxbackInfo.aspx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WirelessCity_Web
{
public partial class ajaxbackInfo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string openId = Request.Form["openId"] ?? Request.QueryString["openId"];
string accessToken = Request.Form["accessToken"] ?? Request.QueryString["accessToken"];
Response.Write("openid:" + openId + " accessToken:" + accessToken);
Response.End();
}
}
}
|
|
|
