vue中QQ jssdk登錄

接入流程：http://wiki.open.qq.com/wiki/website/%E7%BD%91%E7%AB%99%E6%8E%A5%E5%85%A5%E6%B5%81%E7%A8%8B 

1 https://connect.qq.com/申請

申請后會得到

APP ID APP Key

 

在public目錄 index.html 添加腳本

<script type="text/javascript"

src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="申請的appid" data-redirecturi="網站回調域" charset="utf-8"></script>

 

給寫好的qq圖標上添加 點擊事件

@click="useqqlogin"

useqqlogin(){//點擊QQ登錄
      let redirect = this.common.GetParam(location.href,'redirect');
      QC.Login.showPopup({//打開QQ授權登錄界面，授權成功后會重定向
        appId:"申請的appid",
        redirectURI:"http://網站回調域/dist/index.html#/qq_login?redirect="+redirect//登錄成功后會自動跳往該地址
     });
    },

　　授權成功后，跳往了qq_login.vue（該文件用來處理登錄成功后的邏輯）

if (QC.Login.check()) {//檢查是否登錄
        console.log("已經登錄");
        QC.Login.getMe(function(openId, accessToken) {//該處的openId，accessToken就是后台需要的參數了，后台通過這些參數拿取臨時登錄憑證，然后就是自己的邏輯了
          console.log("登錄回調");

          that.openId = openId;
          that.accessToken = accessToken;
          that.loginByQQ();
        });
      } else {
        console.log("登錄失敗");
      }

　　

公司原來是用的下面的方式實現登錄

1.通過點擊該鏈接跳轉

https://graph.qq.com/oauth2.0/show?
which=Login&display=pc&client_id=&response_type=token&scope=all&redirect_uri

2.https://graph.qq.com/oauth2.0/authorize頁面獲取access_token ，access_token會以#access_token=BB1D84AE14354096AE98F203E11FC419&expires_in=7776000添加在網站回調域里

3通過https://graph.qq.com/oauth2.0/me jsonp的形式調用本地方法返回openid

4通過openid 和 access_token 獲取臨時登錄憑證

5通過臨時登錄憑證獲取l公司登錄cookie

sdk功能參考地址：https://www.cnblogs.com/dearxinli/p/5633595.html