如何在自己的網(wǎng)站上實(shí)現(xiàn)QQ授權(quán)登錄
最近在實(shí)現(xiàn)QQ授權(quán)登錄，現(xiàn)將我的實(shí)現(xiàn)過程以及我的理解整理如下。以下所述如有不對之處，請指正。
官方提供的SDK有：JS，PHP，Java。我的網(wǎng)站使用Scala+Play搭建的，所以只能用JS SDk。
1.關(guān)鍵詞
- AppID：你的應(yīng)用(網(wǎng)站)的ID。
- AppKey：對你的應(yīng)用的驗(yàn)證。
- Redirect_uri：用戶確認(rèn)授權(quán)后的回調(diào)地址。(需自己設(shè)置，有防止別人盜用你的身份獲取授權(quán)用戶信息的作用)
- OpenID：用戶身份的唯一標(biāo)識。建議保存在本地并與本地創(chuàng)建的uid綁定，以便用戶下次登錄時可對應(yīng)到其之前的身份信息，不需要重新授權(quán)，使用戶體驗(yàn)一致。(獲取不到用戶的QQ號)
- AccessToken：表示當(dāng)前用戶在此網(wǎng)站/應(yīng)用的登錄狀態(tài)與授權(quán)信息，建議保存在本地。(相當(dāng)于token，令牌)
- Scope：你要獲取的信息。
2.準(zhǔn)備
注冊QQ互聯(lián)開發(fā)者身份
需要去騰訊QQ互聯(lián)注冊。
準(zhǔn)備好網(wǎng)站
網(wǎng)站要基本開發(fā)完成。網(wǎng)站域名，Logo等都有。
創(chuàng)建應(yīng)用
在QQ互聯(lián)管理中心創(chuàng)建應(yīng)用。
上面的信息，創(chuàng)建好了之后隨時可以更改。
網(wǎng)站驗(yàn)證
上圖中的網(wǎng)站地址后面的 驗(yàn)證 ，我選擇的是在自己網(wǎng)站首頁HTML代碼的HEAD標(biāo)簽中添加：
<meta property="qc:admins" content="你的驗(yàn)證信息" />
回調(diào)地址可以自己設(shè)置一個。我網(wǎng)站首頁是http://xjpz.me,因此設(shè)置的是http://xjpz.me/blog/test/qcback。
其他的按需填寫。
創(chuàng)建了應(yīng)用可獲得AppID與AppKey。
3.部署測試
添加登錄入口
引入JS SDK 文件：
在登錄頁面<head></head>中引入：
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>
將APPID 換成你自己的APPID，REDIRECTURI換成你自己設(shè)置的回調(diào)地址。
放置QQ圖標(biāo)(下面有素材地址)，設(shè)置圖標(biāo)超鏈接地址：
<a href="http://openapi.qzone.qq.com/oauth/show?which=ConfirmPage&display=pc&response_type=token&client_id=xxxxxxx&redirect_uri=http://xxxx.com&scope=get_user_info"><img src="/assets/images/Connect_logo_1.png"></a>
- 將client_id換成你的AppID，redirect_uri換成你的回調(diào)地址。
- 如果你要獲取其他信息或者調(diào)用其它接口，請將scope改成你需要的API名或者直接改成 all 。(附API列表)。
我的登錄入口樣例：
官方資料：
- 這里是官網(wǎng)文檔
- 素材與放置規(guī)范 或者 這個
-
官方提供的登錄按鈕代碼，可直接將代碼貼到你想要放置入口的位置就行：
<span id="qqLoginBtn"></span> <script type="text/javascript"> QC.Login({ btnId:"qqLoginBtn" //插入按鈕的節(jié)點(diǎn)id }); </script>
設(shè)置回調(diào)頁面
- 同樣需要引入JS SDK 文件，參照上面。
- 用JS SDK協(xié)助調(diào)用OpenAPI的get_user_info方法，獲取用戶頭像、用戶名等基礎(chǔ)信息。
我的回調(diào)頁面代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> QQConnect JSDK - redirectURI </title>
<script src="/assets/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="xxxxxxx" data-redirecturi="http://xxxx.com/xxxxx" charset="utf-8"></script>
<style type="text/css">
html, body{font-size:14px; line-height:180%;}
</style>
</head>
<body onload="getInfo()">
<div>
<h3>數(shù)據(jù)傳輸中，請稍后...</h3>
</div>
</body>
</html>
<script type="text/javascript">
function getInfo() {
if(QC.Login.check()){
QC.api("get_user_info")
.success(function(s){//成功回調(diào)
QC.Login.getMe(function(openId, accessToken){
$.post('/你的后臺處理Action',{name:s.data.nickname,openid:openId,otype:1,token:accessToken},function(data,status){
if(status=="success"){
alert(s.data.nickname+"恭喜你,登錄成功!");
location.href = "/";
}else{
alert("獲取用戶信息成功！登錄失敗！");
location.href = "/blog/to/login";
}
})
})
})
.error(function(f){//失敗回調(diào)
alert("獲取用戶信息失??！登錄失?。?quot;);
location.href = "/blog/to/login";
})
.complete(function(c){//完成請求回調(diào)
// alert("獲取用戶信息完成！");
});
}else{
alert("請登錄！");
location.href = "/blog/to/login";
}
}
</script>
說明，
- 引入的`JS SDK`文件中的`data-appid` 和 `data-redirecturi` 同樣需要改為你的AppID 和回調(diào)地址。
- 授權(quán)成功后`Openid`和`token`會緩存在本地?？赏ㄟ^`QC.Login.getMe(function(openId, accessToken){}` 獲取。
- 回調(diào)成功后，我這里把用戶名和openid提交給服務(wù)器，保存在本地，使用戶體驗(yàn)一致。即`$.post(){}`方法，你需要換成你服務(wù)端的Action。
- 服務(wù)器處理成功后重定向到網(wǎng)站首頁。授權(quán)登錄結(jié)束。
為了方便用戶，用戶授權(quán)成功后，我并沒有再繼續(xù)讓用戶輸入郵箱、密碼等。如果再讓用戶輸入一遍，那和直接注冊有什么區(qū)別？那樣授權(quán)登錄基本就失去了意義。
順便貼一下我后臺處理步驟：
- //判斷openid是否存在。 - // 如果openid存在，則說明此用戶之前登錄過或者已與本地user表中的用戶綁定。寫入cookie，使用戶為登錄狀態(tài)，到此結(jié)束。 - //如果用戶openid不存在，則判斷用戶名是否存在。 - //如果用戶名不存在，則直接生成新的本地用戶，并綁定uid與openid。寫入cookie，使用戶為登錄狀態(tài)，到此結(jié)束。 - //如果用戶名存在，提醒用戶是否驗(yàn)證并與之綁定。如果用戶選擇驗(yàn)證，并驗(yàn)證通過，則與之綁定。寫入cookie，使用戶為登錄狀態(tài)，到此結(jié)束。 - //如果用戶放棄驗(yàn)證，或者驗(yàn)證失敗，則生成新的本地用戶，并生成新的用戶名，綁定uid與openid。寫入cookie，使用戶為登錄狀態(tài)，到此結(jié)束。
4.提交
以上完成，自己測試通過，就可以提交騰訊審核。沒有審核通過之前只能設(shè)置幾個賬號測試，其他賬號無法授權(quán)登錄。
提交時需注意，
-
在顯要位置放置登錄入口。至少在你網(wǎng)站登錄頁面要放置。我***次提交時專門做了一個授權(quán)登錄入口并在應(yīng)用信息設(shè)置里填寫了。結(jié)果騰訊以"未放置登錄入口或放置不規(guī)范"為由拒絕。
-
網(wǎng)站要基本開發(fā)完成。我第二次提交，因有未實(shí)現(xiàn)的頁面，被騰訊以"網(wǎng)站不完善"為由拒絕。然后我把未實(shí)現(xiàn)頁面入口撤下，審核通過。
