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