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功能參考地址：http://www.javashuo.com/article/p-smozxboe-gq.html