利用JS_SDK實現QQ第三方登陸

前言

現現在，第三方登陸已成爲大部分網站必備的一項基礎技能，引入時髦的第三方登陸不只能幫你吸引更多的用戶，也讓你的網站能夠充分利用其餘大型網站的用戶資源。本次教程將讓你的網站最快捷便利地引入QQ登陸。

QQ第三方登陸目前提供了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)

參數說明：

參數名稱	是否必須	描述
api	必須	指定要調用的OpenAPI名稱。例如：調用add_t時，OpenAPI名稱爲「add_t」。  各OpenAPI的名稱具體請參見API列表。
paras	必須	指定要調用的OpenAPI對應的參數。各參數使用JSON的鍵值對格式列出。  OpenAPI對應的參數具體請參見API列表中各OpenAPI的參數說明。 注意：此處參數不須要自行傳遞access_token與openid
fmt	可選	指定OpenAPI的返回格式，可用值爲「json」或「xml」。默認爲「json」。  注意：json、xml爲小寫，不然將不識別。
method	可選	指定OpenAPI調用請求的發起方式，可用值爲「GET」或「POST」。根據配置，默認發送數據爲「POST」，獲取數據爲「GET」。

最後

提供一種代碼接入思路，僅供參考：

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("獲取用戶信息完成！");

   //});

結束語

若是按照上述步驟操做後得不到你須要的用戶信息，別擔憂，刷新下頁面可能會有意想不到的驚喜哦。這是由於你在本地測試和你在申請時填的回調地址不匹配形成的，真正上線以後就沒有問題了。

最後但願本次教程對你們有點幫助和啓發。

 

本文原創自我愛學框架，歡迎轉載，請保留原文連接！

原文連接：http://www.itframe.top/Detail/Index/article/eed968bd-a64a-47d3-b9cf-40291bdcc7be.html