利用JS_SDK實現QQ第三方登錄


根據項目實際需求,需要QQ第三方登錄,總結教程如下。


  • 准備工作

    在正式接入之前你需要了解以下名詞的含義:

    1. appid :應用的唯一標識。在OAuth2.0認證過程中,appid的值即為oauth_consumer_key的值。

    2. appkey:appid對應的密鑰,訪問用戶資源時用來驗證應用的合法性。在OAuth2.0認證過程中,appkey的值即為oauth_consumer_secret的值。

    3. redirecturl:成功授權后的回調地址,必須是注冊appid時填寫的主域名下的地址,建議設置為網站首頁或網站的用戶中心。注意需要將url進行URLEncode。

    4. access token:用來判斷用戶在本網站上的登錄狀態,具有3個月有效期,用戶再次登錄時自動刷新。

    5. openid:是此網站上唯一對應用戶身份的標識,網站可將此ID進行存儲便於用戶下次登錄時辨識其身份,或將其與用戶在網站上的原有帳號進行綁定。


  • 第一步

    要接入QQ登錄,必不可少的是appid和appkey,通過申請接入QQ登錄,按照相應步驟操作即可輕松獲得,在此不做贅述。


  • 第二步

    在需要放置QQ登錄按鈕的頁面加入下面SCRIPT代碼:

    <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>

    PS:APPID 和 REDIRECTURI 換成第一步申請所得到的對應內容,REDIRECTURI 就是登錄之后返回的回調地址,在申請頁面自己填寫,一般寫網站主域名即可。注意:回調地址必須以http或https開頭。


  • 第三步

    在頁面放置一個元素節點用來展現登錄按鈕,並且指定其ID,如:

    <div id="qq"></div>

    然后在頁面加入如下SCRIPT:

    <script type="text/javascript">

        QC.Login({

           btnId:"qq"    //插入按鈕的節點id

    });

    </script>

    這時你就可以在頁面看到如下效果:

    如何你對這個展示效果不滿意,也可以自定義登錄按鈕。



  • 第四步

    在  REDIRECTURI 即回調地址頁面加入如下SCRIPT:

    <script type="text/javascript"

    src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>

    PS:官方說法如果回調地址頁與加入QQ登錄按鈕是同一個頁面,則只需要引用一次腳本文件。如果你理解不了這種官方說法,可以在第一步的腳本中加入data-callback="true"屬性,而忽略第四步,前提是回調地址頁與加入QQ登錄按鈕的頁面是同一個頁面。


  • 第五步

    因為JS SDK封裝了獲取Access Token以及OpenID的方法,因此開發者不需要用開發代碼進行獲取,直接調用QQ登錄OpenAPI即可。

    調用OpenAPI時,請統一遵循下述調用方式:

    QC.api(api, paras, fmt, method)

    參數說明:



  • 最后

    提供一種代碼接入思路,僅供參考:

    QC.api("get_user_info", {}) //get_user_info是API參數

    //指定接口訪問成功的接收函數,s為成功返回Response對象

           .success(function (s) {

               //成功回調,通過s.data獲取OpenAPI的返回數據

               nick = s.data.nickname; //獲得昵稱

               headurl = s.data.figureurl_qq_1; //獲得頭像

               if (QC.Login.check()) {//判斷是否登錄

                   QC.Login.getMe(function (openId, accessToken) { //這里可以得到openId和accessToken

                       //下面可以調用自己的保存方法

                       ……

                   });

               }

           })

    //指定接口訪問失敗的接收函數,f為失敗返回Response對象

           .error(function (f) {

               //失敗回調

               alert("獲取用戶信息失敗!");

           });

       ////指定接口完成請求后的接收函數,c為完成請求返回Response對象

       //.complete(function (c) {

       //    //完成請求回調

       //    alert("獲取用戶信息完成!");

       //});

    如果沒有效果,刷新試一下,這是因為你在本地測試和你在申請時填的回調地址不匹配造成的,真正上線之后就沒有問題了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM