扫码登录

调用二维码

方法一：内嵌式 调用二维码

生成code

   const s = document.createElement('script')
        s.type = 'text/javascript'
        s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
        const wxElement = document.body.appendChild(s)
        wxElement.onload = function () {
          var obj = new WxLogin({
            id:"sharePicBox",
            appid: "****",
            scope: 'snsapi_login', // 网页默认即可
            redirect_uri: encodeURIComponent(''), // 授权成功后回调的url
            state: 'WX' ,// 可设置为简单的随机数加session用来校验
            style: 'black', // 提供"black"、"white"可选。二维码的样式
            href: '' // 外部css文件url，需要https
          })
        }

同页面监听

 const params = this.$route.query
      const state = params.state
      const code = params.code
      if (!validatenull(state)){
        const loading = this.$loading({
          lock: true,
          text: `${
            state === "WX" ? "微信" : "QQ"
            }登录中,请稍后。。。`,
          spinner: "el-icon-loading"
        });
        if (code) {
          axios({
            url:'/system/api/blade-auth/authredirect?code='+code,
            method: 'get'
          }).then(respanse=>{
            if (respanse.data.data){
              let user = respanse.data.data
              this.loginForm.username = user.account;
              this.loginForm.password = user.account;
              this.loginForm.code =  user.code;
              this.loginForm.key =  user.key;
              //验证码的索引
              this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
                this.$router.push({path: this.tagWel.value});
                loading.close();
              })
            }
          })
        }
        setTimeout(() => {
          loading.close();
        }, 2000);

方法二：弹出式  调用二维码

    let appid, client_id, redirect_uri, url;
      redirect_uri = encodeURIComponent(
        window.location.origin + "/system/#/authredirect"
      );
      // let javaUrl = 'mzh.free.idcfengye.com/blade-auth/oauth/wx/login'
      if (thirdpart === "wechat") {
        appid = "***";
        url =
          "https://open.weixin.qq.com/connect/qrconnect?appid=" +
          appid +
          "&redirect_uri=" +
          redirect_uri +
          "&state=WX&response_type=code&scope=snsapi_login#wechat_redirect";
      } else if (thirdpart === "tencent") {
        client_id = "xxxx";
        url =
          "https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ&client_id=" +
          client_id +
          "&redirect_uri=" +
          redirect_uri;
      }
      openWindow(url, thirdpart, 540, 540);

扫码后跳转的页面

  window.close()
    const params = this.$route.query
    const state = params.state
    const code = params.code
    window.location.href = `${window.location.origin}/system/#/login?state=${state}&code=${code}`

回到登录的页面 拿到code

      const params = this.$route.query
      const state = params.state
      const code = params.code
      if (!validatenull(state)){
        const loading = this.$loading({
          lock: true,
          text: `${
            state === "WX" ? "微信" : "QQ"
            }登录中,请稍后。。。`,
          spinner: "el-icon-loading"
        });
        if (code) {
          axios({
            url:'/system/api/blade-auth/authredirect?code='+code,
            method: 'get'
          }).then(respanse=>{
            if (respanse.data.data){
              let user = respanse.data.data
              this.loginForm.username = user.account;
              this.loginForm.password = user.account;
              this.loginForm.code =  user.code;
              this.loginForm.key =  user.key;
              //验证码的索引
              this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
                this.$router.push({path: this.tagWel.value});
                loading.close();
              })
            }
          })
        }

后台解析code 创建或更新数据库 把账号信息返回前台 前台再调用登录

    JSONObject weixinUserOpenID = WxCodeOpenId.getWeixinUserOpenID(WX_TokenUtil.wxAppId, WX_TokenUtil.wXappSecret, code);
        R<UserInfo> openid = userClient.userInfo("000000", weixinUserOpenID.get("unionid").toString());
        User user = openid.getData().getUser();
        R<AppUserInfo> unionid = competitionClient.get(weixinUserOpenID.get("unionid").toString());
        if (Strings.isBlank(user.getWxUnionid())) {
            user = new User();
        }
        user.setAccount(weixinUserOpenID.get("unionid").toString());
        user.setPassword(weixinUserOpenID.get("unionid").toString());
        if (unionid.getData().getId()!=null){
            AppUserInfo data = unionid.getData();
            user.setName(data.getNickName());
            user.setRealName(data.getRealName());
            user.setAvatar(data.getAvatarUrl());
            user.setEmail(data.getEmail());
            user.setPhone(data.getTel());
            user.setSex(data.getSex()=="男"?0:1);
        }else {
            user.setName("昵称");
            user.setRealName("真名");
            user.setAvatar("头像");
            user.setEmail("邮箱");
            user.setPhone("手机");
            user.setBirthday(new Date());
            user.setSex(0);
        }
        user.setRoleId("1253370403732258818");
        user.setDeptId("1123598813738675201");
        user.setWxUnionid(weixinUserOpenID.get("unionid").toString());
        if (user.getId()==null) {
            userClient.saveUser(user);
        }else {
            user.setPassword(DigestUtil.encrypt(user.getPassword()));
            userClient.updateUser(user);
        }
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
        String verCode = specCaptcha.text().toLowerCase();
        String key = StringUtil.randomUUID();
        redisCache.setEx(CacheNames.CAPTCHA_KEY + key, verCode, Duration.ofMinutes(30));
        user.setKey(key);
        user.setCode(verCode);
        return R.data(user);

const params = this.$route.query
const state = params.state
const code = params.code
if (!validatenull(state)){
  const loading = this.$loading({
    lock: true,
text: `${
      state === "WX" ? "微信" : "QQ"
}登录中,请稍后。。。`,
spinner: "el-icon-loading"
});
  if (code) {
    axios({
      url:'/system/api/blade-auth/authredirect?code='+code,
method: 'get'
}).then(respanse=>{
      if (respanse.data.data){
        let user = respanse.data.data
this.loginForm.username = user.account;
        this.loginForm.password = user.account;
        this.loginForm.code =  user.code;
        this.loginForm.key =  user.key;
//验证码的索引
this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
          this.$router.push({path: this.tagWel.value});
loading.close();
})
      }
    })
  }