如何在自己的網(wǎng)站上實(shí)現(xiàn)QQ授權(quán)登錄？

2015-10-23 18:02:00 來源：51CTO.com 作者：佚名 人氣： 次閱讀 193 條評(píng)論

最近在實(shí)現(xiàn)QQ授權(quán)登錄，現(xiàn)將我的實(shí)現(xiàn)過程以及我的理解整理如下。以下所述如有不對(duì)之處，請(qǐng)指正。...

最近在實(shí)現(xiàn)QQ授權(quán)登錄，現(xiàn)將我的實(shí)現(xiàn)過程以及我的理解整理如下。以下所述如有不對(duì)之處，請(qǐng)指正。

官方提供的SDK有：JS，PHP，Java。我的網(wǎng)站使用Scala+Play搭建的，所以只能用JS SDk。

  • AppID：你的應(yīng)用(網(wǎng)站)的ID。
  • AppKey：對(duì)你的應(yīng)用的驗(yàn)證。
  • Redirect_uri：用戶確認(rèn)授權(quán)后的回調(diào)地址。(需自己設(shè)置，有防止別人盜用你的身份獲取授權(quán)用戶信息的作用)
  • OpenID：用戶身份的唯一標(biāo)識(shí)。建議保存在本地并與本地創(chuàng)建的uid綁定，以便用戶下次登錄時(shí)可對(duì)應(yīng)到其之前的身份信息，不需要重新授權(quán)，使用戶體驗(yàn)一致。(獲取不到用戶的QQ號(hào))
  • AccessToken：表示當(dāng)前用戶在此網(wǎng)站/應(yīng)用的登錄狀態(tài)與授權(quán)信息，建議保存在本地。(相當(dāng)于token，令牌)
  • Scope：你要獲取的信息。

2.準(zhǔn)備

注冊(cè)QQ互聯(lián)開發(fā)者身份

需要去騰訊QQ互聯(lián)注冊(cè)：http://connect.qq.com/。

準(zhǔn)備好網(wǎng)站

網(wǎng)站要基本開發(fā)完成。網(wǎng)站域名，Logo等都有。

創(chuàng)建應(yīng)用

在QQ互聯(lián)管理中心創(chuàng)建應(yīng)用。

QQ授權(quán)登錄 QQ授權(quán)登錄開發(fā) QQ授權(quán)登錄管理

上面的信息，創(chuàng)建好了之后隨時(shí)可以更改。

網(wǎng)站驗(yàn)證

上圖中的網(wǎng)站地址后面的驗(yàn)證，我選擇的是在自己網(wǎng)站首頁HTML代碼的HEAD標(biāo)簽中添加：

<meta property="qc:admins" content="你的驗(yàn)證信息" />

回調(diào)地址可以自己設(shè)置一個(gè)。我網(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 >

<img src="/assets/images/Connect_logo_1.png" alt="QQ授權(quán)登錄 QQ授權(quán)登錄開發(fā) QQ授權(quán)登錄管理">

將client_id換成你的AppID，redirect_uri換成你的回調(diào)地址。 如果你要獲取其他信息或者調(diào)用其它接口，請(qǐng)將scope改成你需要的API名或者直接改成 all 。(API列表可查看http://wiki.connect.qq.com/api%E5%88%97%E8%A1%A8)。

我的登錄入口樣例：

QQ授權(quán)登錄 QQ授權(quán)登錄開發(fā) QQ授權(quán)登錄管理

官方資料：

素材與放置規(guī)范 或者這個(gè)

官方提供的登錄按鈕代碼，可直接將代碼貼到你想要放置入口的位置就行：

<span id="qqLoginBtn"></span><script type="text/javascript">    QC.Login({       btnId:"qqLoginBtn"    //插入按鈕的節(jié)點(diǎn)id});</script>

設(shè)置回調(diào)頁面

  1. 同樣需要引入JS SDK文件，參照上面。
  2. 用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ù)傳輸中，請(qǐng)稍后...</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('/你的后臺(tái)處理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("獲取用戶信息失敗！登錄失??！");                            location.href = "/blog/to/login";                        })                        .complete(function(c){//完成請(qǐng)求回調(diào)                        //alert("獲取用戶信息完成！");                        });                }else{                    alert("請(qǐng)登錄！");                    location.href = "/blog/to/login";                }            }</script>

說明，

- 引入的`JS SDK`文件中的`data-appid` 和 `data-redirecturi` 同樣需要改為你的AppID 和回調(diào)地址。

- 授權(quán)成功后`Openid`和`token`會(huì)緩存在本地。可通過`QC.Login.getMe(function(openId, accessToken){}` 獲取。

- 回調(diào)成功后，我這里把用戶名和openid提交給服務(wù)器，保存在本地，使用戶體驗(yàn)一致。即`$.post(){}`方法，你需要換成你服務(wù)端的Action。

- 服務(wù)器處理成功后重定向到網(wǎng)站首頁。授權(quán)登錄結(jié)束。

為了方便用戶，用戶授權(quán)成功后，我并沒有再繼續(xù)讓用戶輸入郵箱、密碼等。如果再讓用戶輸入一遍，那和直接注冊(cè)有什么區(qū)別？那樣授權(quán)登錄基本就失去了意義。

順便貼一下我后臺(tái)處理步驟：

- //判斷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è)置幾個(gè)賬號(hào)測試，其他賬號(hào)無法授權(quán)登錄。

提交時(shí)需注意，

在顯要位置放置登錄入口。至少在你網(wǎng)站登錄頁面要放置。我第一次提交時(shí)專門做了一個(gè)授權(quán)登錄入口并在應(yīng)用信息設(shè)置里填寫了。結(jié)果騰訊以"未放置登錄入口或放置不規(guī)范"為由拒絕。

網(wǎng)站要基本開發(fā)完成。我第二次提交，因有未實(shí)現(xiàn)的頁面，被騰訊以"網(wǎng)站不完善"為由拒絕。然后我把未實(shí)現(xiàn)頁面入口撤下，審核通過。

    無相關(guān)信息