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

qq登入最簡單的接入方式面世!使用QQ互聯最新提供的JS SDK,可以完全不用瞭解複雜的協議,不用後臺互動,直接將對應程式碼貼上到網頁html程式碼裡即可使用,開發成本減少到半天!

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

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”