在本身的網站上實現QQ受權登陸

時間 2019-12-09

標籤本身網站實現受權登陸欄目網站開發简体版

原文原文鏈接

最近在實現QQ受權登陸，現將個人實現過程以及個人理解整理以下。如下所述若有不對之處，請指正。javascript

官方提供的SDK有：JS，PHP，Java。個人網站使用Scala+Play搭建的，因此只能用JS SDk。css

1.關鍵詞

AppID：你的應用(網站)的ID。
AppKey：對你的應用的驗證。
Redirect_uri：用戶確認受權後的回調地址。(需本身設置，有防止別人盜用你的身份獲取受權用戶信息的做用)
OpenID：用戶身份的惟一標識。建議保存在本地並與本地建立的uid綁定，以便用戶下次登陸時可對應到其以前的身份信息，不須要從新受權，使用戶體驗一致。(獲取不到用戶的QQ號)
AccessToken：表示當前用戶在此網站/應用的登陸狀態與受權信息，建議保存在本地。(至關於token，令牌)
Scope：你要獲取的信息。

2.準備

註冊QQ互聯開發者身份

須要去騰訊QQ互聯註冊。html

準備好網站

網站要基本開發完成。網站域名，Logo等都有。java

建立應用

在QQ互聯管理中心建立應用。jquery

上面的信息，建立好了以後隨時能夠更改。api

網站驗證

上圖中的網站地址後面的 驗證 ，我選擇的是在本身網站首頁HTML代碼的HEAD標籤中添加：緩存

<meta property="qc:admins" content="你的驗證信息" />

回調地址能夠本身設置一個。我網站首頁是http://xjpz.me,所以設置的是http://xjpz.me/blog/test/qcback。服務器

其餘的按需填寫。cookie

建立了應用可得到AppID與AppKey。app

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換成你本身設置的回調地址。

放置QQ圖標(下面有素材地址)，設置圖標超連接地址：

<a href="https://graph.qq.com/oauth/show?which=ConfirmPage&display=pc&client_id="APPID"&response_type=token&scope=all&redirect_uri="REDIRECTURI"&scope=get_user_info">

將client_id換成你的AppID，redirect_uri換成你的回調地址。
若是你要獲取其餘信息或者調用其它接口，請將scope改爲你須要的API名或者直接改爲 all 。(附API列表)。

個人登陸入口樣例：

官方資料：

這裏是官網文檔
素材與放置規範或者這個

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

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

設置回調頁面

一樣須要引入JS SDK 文件，參照上面。
用JS SDK協助調用OpenAPI的get_user_info方法，獲取用戶頭像、用戶名等基礎信息。

個人回調頁面代碼以下：

<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>數據傳輸中，請稍後...</h3>
        </div>

    </body>
</html>

<script type="text/javascript">
            function getInfo() {
                if(QC.Login.check()){
                    QC.api("get_user_info")
                        .success(function(s){//成功回調
                            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){//失敗回調
                            alert("獲取用戶信息失敗！登陸失敗！");
                            location.href = "/blog/to/login";
                        })
                        .complete(function(c){//完成請求回調
                        //  alert("獲取用戶信息完成！");
                        });
                }else{
                    alert("請登陸！");
                    location.href = "/blog/to/login";
                }
            }
</script>

說明，

- 引入的`JS SDK`文件中的`data-appid` 和 `data-redirecturi` 一樣須要改成你的AppID 和回調地址。

- 受權成功後`Openid`和`token`會緩存在本地。可經過`QC.Login.getMe(function(openId, accessToken){}` 獲取。

- 回調成功後，我這裏把用戶名和openid提交給服務器，保存在本地，使用戶體驗一致。即`$.post(){}`方法，你須要換成你服務端的Action。

- 服務器處理成功後重定向到網站首頁。受權登陸結束。

爲了方便用戶，用戶受權成功後，我並無再繼續讓用戶輸入郵箱、密碼等。若是再讓用戶輸入一遍，那和直接註冊有什麼區別？那樣受權登陸基本就失去了意義。

順便貼一下我後臺處理步驟：

- //判斷openid是否存在。
 
 - // 若是openid存在，則說明此用戶以前登陸過或者已與本地user表中的用戶綁定。寫入cookie，使用戶爲登陸狀態，到此結束。
 
 - //若是用戶openid不存在，則判斷用戶名是否存在。
 
 - //若是用戶名不存在，則直接生成新的本地用戶，並綁定uid與openid。寫入cookie，使用戶爲登陸狀態，到此結束。
   
 - //若是用戶名存在，提醒用戶是否驗證並與之綁定。若是用戶選擇驗證，並驗證經過，則與之綁定。寫入cookie，使用戶爲登陸狀態，到此結束。
   
 - //若是用戶放棄驗證，或者驗證失敗，則生成新的本地用戶，並生成新的用戶名，綁定uid與openid。寫入cookie，使用戶爲登陸狀態，到此結束。

4.提交

以上完成，本身測試經過，就能夠提交騰訊審覈。沒有審覈經過以前只能設置幾個帳號測試，其餘帳號沒法受權登陸。

提交時需注意，

在顯要位置放置登陸入口。至少在你網站登陸頁面要放置。我第一次提交時專門作了一個受權登陸入口並在應用信息設置裏填寫了。結果騰訊以"未放置登陸入口或放置不規範"爲由拒絕。
網站要基本開發完成。我第二次提交，因有未實現的頁面，被騰訊以"網站不完善"爲由拒絕。而後我把未實現頁面入口撤下，審覈經過。