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