網站使用QQ登陸功能

時間 2019-12-11

原文原文鏈接

通常網站要先作個用戶註冊的功能頁面，但個人網站名氣不大，不須要要求用戶註冊，因此直接使用騰訊QQ登陸的API接口。javascript

如何使用JS_SDK讓網站擁有QQ登陸的功能，官網的這篇文章寫得還算完整：http://connect.qq.com/intro/login/jssdk-demo 可是，裏面有些地方並無填寫「實例」，只是說那個地方須要填寫什麼東西，但有時這樣說是不夠的，我就是試了挺多遍才知道填寫的格式。html

因此我從新整理下過程。java

一：準備工做jquery

域名註冊，空間購買，網站接入申請這些我就不說了。使用API要求有個「回調地址」，因此本地調試就別想了。api

我所用的域名是：http://bbs.yirenge.net/ 填寫網站基本信息就是這樣的：瀏覽器

二：製做一個回調網頁緩存

當訪客點擊「QQ登陸」時，網頁就跳轉到「QQ某數據中心登陸頁面」，正確登陸以後，就會返回到「咱們製做的回調網頁」，而後再跳到「訪客剛剛點擊登陸的地方」。app

[html] view plain copy print ?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伊人閣 </title>
</head>
<body>
<h3>
數據傳輸中，請稍後...</h3>
</body>
</html>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
charset="utf-8" data-callback="true"></script>

命名爲：qc_back.htm 保存在根目錄下。dom

三：首頁進行QQ登陸xss

1：默認形式

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>伊人閣代購服務購物分享售後服務</title>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"
charset="utf-8"></script>
</head>
<body>
<span id="qq_login_btn" data-role="none"></span>
<script type="text/javascript">
QC.Login({//按默認樣式插入QQ登陸按鈕
btnId: "qq_login_btn" //插入按鈕的節點id
});
</script>
</body>
</html>

實現效果：

2：自定義效果

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>伊人閣代購服務購物分享售後服務</title>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"
charset="utf-8"></script>
</head>
<body>
<span id="qqLoginBtn"></span>
<script type="text/javascript">
//調用QC.Login方法，指定btnId參數將按鈕綁定在容器節點中
QC.Login({
//btnId：插入按鈕的節點id，必選
btnId: "qqLoginBtn",
//用戶須要確認的scope受權項，可選，默認all
scope: "all",
//按鈕尺寸，可用值[A_XL| A_L| A_M| A_S| B_M| B_S| C_S]，可選，默認B_S
size: "A_XL"
}, function (reqData, opts) {//登陸成功
//根據返回數據，更換按鈕顯示狀態方法
var dom = document.getElementById(opts['btnId']),
_logoutTemplate = [
//頭像
'<span><img src="{figureurl}" class="{size_key}"/></span>',
//暱稱
'<span>{nickname}</span>',
//退出
'<span><a href="javascript:QC.Login.signOut();">退出</a></span>'
].join("");
dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
nickname: QC.String.escHTML(reqData.nickname), //作xss過濾
figureurl: reqData.figureurl
}));
}, function (opts) {//註銷成功
alert('QQ登陸註銷成功');
}
);
</script>
</body>
</html>

獲取用戶信息的文檔：http://wiki.connect.qq.com/get_user_info 修改一些參數能夠改變登錄後顯示的頭像大小等信息，但我這邊暫時顯示不出其它頭像，不知道是否是測試階段（還沒經過審覈）的限制。

PS：如今我只能用本身的QQ進行登陸。每次作了修改的話，須要清理瀏覽器緩存。

四：判斷是否登陸

我新建一個目錄Mine，裏面放一個Index.htm頁面，代碼以下：

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>個人領地</title>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"
charset="utf-8"></script>
<script src="../Resource/JQueryMobile/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
if (QC.Login.check()) {//若是已登陸
//向「後臺」請求數據
alert("歡迎登陸");
QC.Login.getMe(function (openId, accessToken) {
//向「後臺」請求當前「用戶openId」的數據
$("#message").html("當前登陸用戶的openId爲：" + openId + "\n accessToken爲：" + accessToken);
});
}
</script>
</head>
<body>
<div id="message"></div>
</body>
</html>