还在担心网页扫码请求登录吗

好好学java

发布于 2019-05-06 11:33:49

8990

发布于 2019-05-06 11:33:49

文章被收录于专栏：好好学java的技术栈好好学java的技术栈好好学java的技术栈

点击图片，查看资源

优秀学习资源、干货第一时间送达！

作者：YukunWen
链接：https://www.jianshu.com/p/c62b314f80e4

引言

现实中经常会需要我们需要扫码授权登陆，有的时候是借助微信授权登陆，有的时候商户需要登陆某个特定的app，在该app中扫码登陆。那么我们今天就来分析一下扫码登陆，这背后究竟发生了怎么样的请求交互，以及是怎么实现的。下面我们以微信为例，调了微信商户登陆平台这个页面进行分析： https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F

针对微信网页进行分析

首先如图1，一进入页面之后会请求生成一个二维码。

image

针对一个请求，前台会多次有间隔地轮询，如图2，如图3。

image

image

请求的响应结果有 "wait scan" 和 “二维码过期” 两种情况，如图4，图5所示。

image

image

在二维码过期后，点击刷新二维码，之后便会重新请求获取到二维码，再次的轮询请求后台结果，如图6所示。

image

仿照设计与实现

设计

考虑的点：

二维码生成与展示。

这里我们采用前端生成随机串，以便前端后期不断的轮询。具体随机串藏在二维码中生成接口可以参考我之前的博文——java生成QR二维码。

轮询间隔，后端对应的过期与超时等返回。

这里新版的微信登陆采用的是前端sleep，频繁请求后端。在之前没改版的时候采用的是长连接，一次请求由后端自行轮询。本文采用后端轮询的形式。

APP扫码登陆。

APP扫码识别出了二维码中的随机串，应该告诉服务器验证成功，待web下一次轮询服务器的时候要返回相应的token和登陆成功等其他信息。

将这几个点结合在一起就有了图7。

image

那么经过分析，我们得知后端至少要3个接口。分别生成二维码，给WEB轮询，和给APP请求。生成二维码的参考博主之前的博文，目前就不在这里重复。下面给出其他两个接口的实现。

实现

给WEB轮询接口采用递归的形式实现轮询。利用redis存储了前端生成的随机串，设置0为默认值

CONNECT_TIME_OUT("连接超时",2001),
  private static String DEAFULT_ID = "0";
 /**
     * 获取token
     *
     * @param webLoginDTO
     * @return
     */
    @PostMapping(value = "webLoginCode/ask")
    @ResponseBody
    public RestResponse<Map<String, Object>> askWebLoginCode(@JsonParam WebLoginDTO webLoginDTO) {
        String webLoginCode = webLoginDTO.getWebLoginCode();
        Assert.notNull(webLoginCode, "传入的随机串为空");
        return RestResponse.ok(askWebLoginCodePolling(webLoginCode, MAX_RETRY));
    }

    /**
     * 轮询获取token
     *
     * @param webLoginCode
     * @param retry
     * @return
     */
    @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)
    public Map<String, Object> askWebLoginCodePolling(String webLoginCode, int retry) {
        if (retry == 0) {
            throw new FantuanRuntimeException(FantuanErrors.CONNECT_TIME_OUT.getMessage(),
                    FantuanErrors.CONNECT_TIME_OUT.getCode());
        }
        Map<String, Object> resultMaps = new HashMap<>();
        String varR = varPool.getVar(getWebLoginVarPool(webLoginCode));
        if (StringUtils.isBlank(varR)) {
            throw new FantuanRuntimeException("已经过期,请重新刷新二维码");
        }

        if (!DEAFULT_ID.equals(varR)) {
            Map<String, Object> maps = JsonUtil.stringToMap(varR);
            String varResult = MapUtils.getString(maps, "uid");
            User user = userService.selectById(Long.valueOf(varResult));
            String webAuthKey = user.getWebAuthKey();
            if (StringUtils.isBlank(webAuthKey)) {
                webAuthKey = RandomNumberUtil.creatUUID32();
                user.setWebAuthKey(webAuthKey);
                userService.updateById(user);
            }
            resultMaps.put("userName", user.getUsername());
            resultMaps.put("uid", varResult);
            resultMaps.put("token", webAuthKey);
            resultMaps.put("extraInfo", MapUtils.getObject(maps, "extraInfo"));
            return resultMaps;
        } else {
            //这里需要hold住链接
            try {
                Thread.sleep(1000);
                return askWebLoginCodePolling(webLoginCode, retry - 1);
            } catch (InterruptedException e) {
                log.error("", e);
            }
        }
        return resultMaps;
    }

2.给APP请求接口 APP扫码登陆后，会把一些有用的信息给传递过来。这里后端做成了一个map extraInfo去接收，到时候整个extraInfo会返回给WEB端。这样子的好处，后端就是成了一个验证平台而已，需要的信息只要由APP和WEB端定义好即可。

 /**
     * app扫码登陆
     *
     * @param webLoginDTO
     */
    @PostMapping(value = "webLoginCode/check")
    @ResponseBody
    public RestResponse<String> checkWebLoginCode(@JsonParam WebLoginDTO webLoginDTO) {
        Long uid = SecurityUtils.getLoginAccountId();
        if (uid <= 0) {
            throw new FantuanRuntimeException("请登陆");
        }

        Assert.notNull(webLoginDTO, "传入的对象不能为空");
        String webLoginCode = webLoginDTO.getWebLoginCode();
        Assert.notNull(webLoginCode, "传入的二维串随机码不能为空");
        Map<String, String> result = new HashMap<>();
        if (StringUtils.isBlank(varPool.getVar(getWebLoginVarPool(webLoginCode)))){
            throw new FantuanRuntimeException("该二维码已经过期");
        }
        Map<String, Object> maps = new HashMap<>();
        maps.put("uid", uid);
        maps.put("extraInfo", webLoginDTO.getExtraInfo());
        varPool.setVar(getWebLoginVarPool(webLoginCode), JsonUtil.mapToJson(maps), 60, TimeUnit.SECONDS);
        return RestResponse.ok("执行完成了");
    }

另外给出部分的WEB端代码

<template>
  <div class="page">
    <top-nav :buttons="false" />
    <div class="page-main">
      <div class="qr-code">
        <img class="qr-code-image" v-if="qrcode" :src="$apiDomain + '/jv/anonymous/login/webLoginCode/' + qrcode" alt="登录二维码" @load="imageLoaded" />
        <div v-if="expired" class="qr-code-expired" @click.stop="refresh">
          <i class="iconfont icon-shuaxin"></i>
          <div class="expired-tip">二维码已失效，请点击刷新</div>
        </div>
      </div>
      <div class="scan-tip">扫描二维码</div>
      <div class="scan-sub-tip">在电脑端进行活动编辑</div>
    </div>
    <us :onlyCopyright="true" />
  </div>
</template>

<script>
import TopNav from '@/components/TopNav'
import Us from '@/components/Us'
export default {
  data () {
    return {
      qrcode: '',
      expired: false
    }
  },
  components: { TopNav, Us },
  methods: {
    getQrcode (length) {
      this.expired = false
      let rString = ''
      let timeStr = new Date().getTime().toString()
      timeStr = timeStr.substring(timeStr.length - length)
      let rendomStr = this.getRandom(length)
      for (let i = 0; i < length; i++) {
        rString += (rendomStr[i] + timeStr[i])
      }
      return rString
    },
    getRandom (length) {
      if (length > 0) {
        let data = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
        let nums = ''
        for (let i = 0; i < length; i++) {
          let r = parseInt(Math.random() * 61)
          nums += data[r]
        }
        return nums
      } else {
        return false
      }
    },
    getUserInfo (qrcode) {
      if (!qrcode) {
        return false
      }
      sessionStorage.clear()
      let rData = {
        webLoginCode: qrcode
      }
      this.$ajax('/webLoginCode/ask', {data: rData, dontToast: true}).then(res => {
        console.log('userInfo_res', res)
        if (res && res.data && !res.error) { // 获取用户信息成功
          sessionStorage.setItem('token', res.data.token)
          sessionStorage.setItem('userId', res.data.uid)
          sessionStorage.setItem('userName', res.data.userName)
          this.$router.replace({name: 'ActivityEdit'})
        }
      }).catch(err => {
        if (err && err.data && err.data.error) {
          console.log('userInfo_err', err)
          if (err.data.error.toString() === '2001') {
            // 重新获取
            console.log('链接超时')
            this.getUserInfo(qrcode)
          } else {
            console.log('获取信息出错')
            this.expired = true
          }
        }
      })
    },
    refresh () {
      this.qrcode = this.getQrcode(8)
    },
    imageLoaded () {
      console.log('imageLoaded')
      this.getUserInfo(this.qrcode)
    }
  },
  mounted () {
    this.refresh()
  }
}
</script>

最终web端的页面如图8所示。这里采用的是后端长连接的形式，所以不像是新版微信那样请求是断续的。当然要做成那样，只要后端的轮询上限改成1，前端加上一个短暂的sleep即可。

image

总结：

其实无论是扫码登陆，还是网页的扫码支付，其实本质上都是藏着一个长连接/长轮询去监听服务器的状态变化。毕竟回call或者扫码识别等都是通过服务器来校验的。

置顶或星标公众号，第一时间接收小海热文

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-01-10，如有侵权请联系 cloudcommunity@tencent.com 删除

微信

网站

本文分享自好好学java 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

微信

网站

登录后参与评论

0 条评论

热度