利用qq官方提供的js_sdk實現qq互聯登錄

最新公司交給我一個實現qq互聯登錄系統的功能,公司其他人也沒有這方面經驗,全靠網上搜索資料實現了該功能,下面總結一下個人實現該功能的一些總結,有一些不對的地方望網友交流指正

  首先講一下我們這邊的需求,主要就是實現一個用qq號綁定系統賬號後實現qq互聯登錄的功能 ,我們的需求裏不需要獲取qq裏的一些信息(我們不需要實現利用qq號註冊的功能),所以我把我使用js_sdk實現qq互聯登錄過程分成幾個模塊來講一下 ,1.我需要準備的參數 2.我需要獲取和存入的的參數3.我需要調用的方法54.我遇到的坑
   **1.我需要準備的參數:**
   appid:這個在qq互聯申請成功後就會有;
   這個是放置qq登錄按鈕頁要加入的代碼
<script type="text/javascript"  charset="utf-8"
    src="http://connect.qq.com/qc_jssdk.js"
    data-appid="APPID"
    data-redirecturi="REDIRECTURI"
></script>
回調地址:這個就是上面代碼裏data-redirecturi需要填入的值[關於回調地址](https://wiki.connect.qq.com/%E5%9B%9E%E8%B0%83%E5%9C%B0%E5%9D%80%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E4%BF%AE%E6%94%B9%E6%96%B9%E6%B3%95)

關於這個回調地址我想強調一下,第一點可以在qq互聯申請的時候配多個回調地址,但是需要你在上面script裏指定具體哪一個(這個你如果在qq互聯申請的時候沒有配置的話是絕對不行的) ;
2.我需要從qq那邊獲取的參數和綁定存入後臺數據庫的參數:
openid,你需要獲取的和存入的僅openid就行,,具體怎麼獲取我在後面的方法調用裏講
3.我調用的方法:
第一個要調用的方法就是寫在包含登錄按鈕的登錄頁面的代碼如下:

    <script type="text/javascript">
    QC.Login({btnId:"qqLoginBtn",showModal:true}, cbLoginFun);//插入按鈕的節點id
    var cbLoginFun = function(oInfo, oOpts){};
 </script>

這裏的qqLoginBtn是登錄按鈕的id 參數showModal決定是否彈出新頁面來點擊已登錄的qq賬號,不建議彈出新頁面,默認不寫該參數就是false爲彈出(注意false是彈出)

第二個方法寫在回調頁面,我設計這個頁面完全是爲了跳轉使用,其實也可以把這個回調地址設成登錄(注意:這個js_sdk在點擊已登陸的qq賬號後不論是不是我們系統內綁定的qq賬號都會先跳轉到你設定好的回調地址頁面,你也只能在這個頁面獲取openid,然後向後臺發送登錄請求)代碼如下

<script type="text/javascript">
if(QC.Login.check()){
QC.Login.getMe(function(openId, accessToken){
    var navus = navigator.userAgent;
    $.ajax({
      *****
});

    window.event.returnValue=false;
});
}
</script>

這裏通過回調函數就可以獲取openid及accessToken 交給ajax帶到後臺請求登錄,
4.我遇到的坑
第一就是回調地址的坑,這個可以在申請qq互聯的時候配好,也可以在後期編輯裏修改,但一定要保證配置成功,如果格式有問題或者ip域名及路徑格式有問題是配置不成功,每次修改一定要保證修改成功了
第二就是跳轉的坑,這個可能不能算是qq互聯的坑,要屬於瀏覽對js頁面調轉代碼兼容性問題,在ajax請求登錄成功後在成功或失敗方法裏我試過的幾種跳轉形式`1.window.location.href=“”(這個基本只有ie支持); 2.window.location.assgin(“”)(這個火狐兼容還行但是還是偶爾有閃退); 3.window.location.repalce(“”); (這個是在替換當前瀏覽器路經,試了幾種瀏覽器兼容性都不錯);4.window.open(”“);(這個瀏覽兼容都很好,而且可以指定窗口名跳轉具體,默認傳一個路徑就是打開新窗口,可以傳第二個參數即指定窗口名稱);
這個我遇到的問題就是跳轉時瀏覽器的閃退問題,目前只選用了3,4兩種跳轉兼容性很好沒有閃退情況

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章