微博扫码登录原理及实现

原理

流程图

1. 点击扫码登录时，向服务器发送请求，生成qrid和image地址。并开启轮询

   

   第一步

2. 向服务持续请求，大概2s一次，返回二维码状态

   

   第二步
   • 未使用。
   • 二维码已扫描，请客户端确定。
   • 二维码已失效。 会调用第一步重新生成二维码图片

3. 如果二维码图片关闭，轮询也会关闭。减少服务器请求

实现

大概也只有三步，因为ajax禁止了跨域请求，只能在java后端实现。

1. 获取图片地址，并返回前端，用于页面展示。

    @GetMapping("/getimg")
    @ResponseBody
    public String getimg() throws IOException {

        String url = "https://login.sina.com.cn/sso/qrcode/image?entry=weibo&size=180&callback=STK_" + System.currentTimeMillis();
        String body = Jsoup.connect(url).ignoreContentType(true).execute().body();
        JSONObject jsonObject = JSONObject.parseObject(StringUtils.substringBetween(body, "(", ")"));

        imageurl = jsonObject.getJSONObject("data").getString("image");
        qrid = jsonObject.getJSONObject("data").getString("qrid");
        String data = "https://v2." + imageurl.substring(2, imageurl.length());
        System.out.println(data);
        return data;
    }

2. 校验二维码状态。

    @GetMapping("/check")
    @ResponseBody
    public String check(HttpSession session) throws IOException, InterruptedException {

        String url = "https://login.sina.com.cn/sso/qrcode/check?entry=weibo&qrid=" + qrid + "&callback=STK_" + System.currentTimeMillis();
        String body = Jsoup.connect(url).ignoreContentType(true).execute().body();
        System.out.println(body);
        JSONObject jsonObject = JSONObject.parseObject(StringUtils.substringBetween(body, "(", ")"));
        if ("20000000".equals(jsonObject.getString("retcode"))) {
            //执行登录操作
        }
        return jsonObject.getString("retcode");
    }

3. 前端ajax调用。

   $("#login").click(function () {
        $.get("/getimg", function (data) {
            $("#login_image").attr("src", data);
        });
        $(".ui.page.dimmer").dimmer('show');
        var timer1 = setInterval(checkScan, 2500);//每隔3s执行一次checkScan
        function checkScan() {
            $(".ui.page.dimmer").dimmer({
                onHide: function () {
                    clearInterval(timer1);
                }
            });
            $.get("/check", function (data) {
                if (data == "50114001") {
                }
                if (data == "50114002") {
                    $('#login_msg').html("已经扫描，请在客户端确认");//将二维码取消，防止其他人再扫
                }
                if (data == "50114015") {
                    $.get("/getimg", function (data) {
                        $("#login_image").attr("src", data);
                    });
                }
                if (data == "50114003") {
                    $.get("/getimg", function (data) {
                        $("#login_image").attr("src", data);
                    });
                }
                if (data == "20000000") {
                    clearInterval(timer1);
                    window.location.href = "/";
                }
            });
        }
    });

效果

演示地址