QQ登錄最簡單的接入方式 JS SDK使用説明

QQ登錄最簡單的接入方式面世！使用QQ互聯最新提供的JS SDK，可以完全不用瞭解複雜的協議，不用後台交互，直接將對應代碼粘貼到網頁hTMl代碼裏即可使用，開發成本減少到半天！

JS SDK基於QQ互聯OAuth2.0協議的client-side模式，封裝了登錄流程與【QQ登錄】API列表中的所有OpenAPI調用方法。開發者不需瞭解協議，只需要前台交互，以及將相關的參數修改成自身對應的參數即可使用。同時，QQ互聯又提供了可供第三方高級需求進行自行配置的可選參數與相關函數，使開發者可以根據自身需求靈活使用。

JS SDK同時支持多瀏覽器，跨平台，多系統，不僅簡單便捷，同時為高級開發者提供了豐富的參數與自定義函數模板，使開發者可以根據自身情況進行適配或進行二次開發。使用JS SDK是網站開發者接入QQ互聯最好的選擇，目前除詳細的使用文檔之外，還提供了豐富詳細的demo展示，使開發成本減少到最低。

JS_SDK使用説明

1. 實現QQ登錄功能開發者只需要按以下三個步驟粘貼代碼到網頁，即可實現QQ登錄功能，過程非常簡單快速。現在就去體驗。


1.1 引用JS SDK的JavaScript文件1. 首先需要申請接入QQ登錄，併成功獲取到appid和appkey。
2. 在html頁面適當的位置引入JS腳本包（將下面代碼中的“APPID”替換為申請接入QQ登錄時獲得的appid）：


<script type="text/javascript"
src="=APPID"
charset="UTF-8">
</script>
1.2. 放置QQ登錄按鈕在html頁面需要插入QQ登錄按鈕的位置，粘貼如下代碼：

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

</script>

上述代碼中放置了一個html元素節點，並給該節點指定全頁面唯一的id，例如上面例子中的<span id=”qqLoginBtn”></span>；開發者也可將其改成自定義的按鈕名稱。
上述步驟正確執行後，頁面粘貼上述代碼處會出現如下按鈕：

點擊該按鈕，即可發起登錄請求。



若需要對登錄按鈕進行設置，請自定義登錄按鈕。將修改後的代碼粘貼到頁面中放置登錄按鈕處。



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

1.3. 調用QQ登錄OpenAPI（1）調用方式説明
QQ互聯在JS SDK中封裝了所有的OpenAPI接口，開發者只需要傳遞OpenAPI名稱，以及OpenAPI需要的相關參數，就可以調用OpenAPI。
調用OpenAPI時，請統一遵循下述調用方式：


(api, paras, fmt, method):Request



函數説明：
用JS SDK協助調用OpenAPI。



參數説明：


參數名稱 是否必須 描述
api 必須 指定要調用的OpenAPI名稱。例如：調用【QQ登錄】add_share時，OpenAPI名稱為“add_share”。

各OpenAPI的名稱具體請參見【QQ登錄】API列表。

paras 必須 指定要調用的OpenAPI對應的參數。各參數使用JSON的鍵值對格式列出。

OpenAPI對應的參數具體請參見【QQ登錄】API列表中各OpenAPI的參數説明。

fmt 可選 指定OpenAPI的返回格式，可用值為“JSON”或“XML”。默認為“JSON”。
method 可選 指定OpenAPI調用請求的發起方式，可用值為“GET”或“POST”。根據配置，默認發送數據為“POST”，獲取數據為“GET”。


返回值説明：
每個OpenAPI調用時均指定了一個Request對象，開發者可根據OpenAPI請求完成情況指定不同的處理函數。
每次調用的異步響應都會返回一個Response對象，用於接收OpenAPI的返回值，包括返回格式、返回數據、OpenAPI請求錯誤碼等。



（2）調用OpenAPI示例
OpenAPI的調用示例，請參見JS SDK的體驗頁面。



2. JS SDK的其他公開方法2.1. 直接打開QQ登錄彈窗Popup(oOpts):Window

參數説明：
oOpts：需要指定appId，回調地址redirect_URI。
返回值説明：
返回瀏覽器彈窗對象。



2.2. 註銷當前登錄用户Out():void




2.3. 獲取當前登錄用户的Access Token以及e():Object

返回值説明：
openId：用户身份的唯一標識。請保存在本地，以便用户下次登錄時可對應到其之前的身份信息，不需要重新授權。
accessToken：表示當前用户在此網站/應用的登錄狀態與授權信息，也請保存在本地。



2.4. 檢測當前登錄狀態k():Boolean

返回值説明：
true：説明登錄成功。
false：説明登錄失敗。


3. 自定義登錄按鈕開發者可以根據自己的需要，自定義登錄按鈕，示例如下：


<span id="qqLoginBtn"></span>
<script type="text/javascript">
//調用n方法，指定btnId參數將按鈕綁定在容器節點中
n({
//btnId：插入按鈕的節點id，必選
btnId:"qqLoginBtn",
//用户需要確認的scope授權項，可選，默認all
scope:"all",
//按鈕尺寸，可用值[A_XL| A_L| A_M| A_S| B_M| B_S| C_S]，可選，默認B_S
size: "A_XL"
}, function(dt, opts){//登錄成功
//根據返回數據，更換按鈕顯示狀態方法
var dom = lementById(opts['btnId']),
_logoutTemplate=[
//頭像
'<span><img src="{figureurl}" class="{size_key}"/></span>',
//暱稱
'<span>{nickname}</span>',
//退出
'<span><a href="javascript:Out();">退出</a></span>'
]("");
dom && (rHTML = at(_logoutTemplate, {
nickname : TML(name),
figureurl : reurl
}));
}, function(opts){//註銷成功
alert('QQ登錄 註銷成功');

}
);
</script>



開發者也可以使用下列函數作為登錄成功的回調接收函數：
① 登錄成功的回調函數：


cbLoginFun(oInfo, oOpts)

參數説明：
oInfo：當前登錄用户的基本信息，即OpenAPI中get_user_info返回的數據。
oOpts：回傳初始化參數，多個按鈕時可用來區分來源，用來區分一個頁面多個登錄按鈕的情況。
② 註銷成功的回調函數：


cbLogoutFun()







4. Request與Response內置對象説明4.1 RequestJS SDK在初始化時會根據瀏覽器環境創建不同的請求代理，的每次調用都是一個Request對象。

Request對象的公開方法如下：
ess(resp): Request：請求完成並且返回碼為0的回調。
r(resp): Request：請求完成並且返回碼不為0的回調。
lete(resp): Request：請求完成後的回調。



調用時序為success/error -> complete，每個方法都可以調用多次，每次調用返回Request本身，支持鏈式調用。
resp參數為回調函數，回調函數參數為Response對象。


4.2. ResponseResponse為Request對象綁定的回調函數的返回參數，每次調用的異步響應都會返回一個Response對象，該對象在Request對象的success/error -> complete調用流程中傳遞。

Response的公開方法如下：
.stringifyData：返回該Response對象包含的數據體的文本串。

Response的公開屬性如下：
us：響應狀態，-1：代表未知；404：響應錯誤；200：響應成功。
：響應數據格式，json/xml。
：響應返回碼，0為成功，其他為失敗。
：響應數據實體，json對象/xml對象。
：響應序號，從1000開始編號。


取自“_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E”