原理

流程圖

1. 點(diǎn)擊掃碼登錄時(shí)，向服務(wù)器發(fā)送請(qǐng)求，生成qrid和image地址。并開啟輪詢

   第一步

2. 向服務(wù)持續(xù)請(qǐng)求，大概2s一次，返回二維碼狀態(tài)

   第二步
   • 未使用。
   • 二維碼已掃描，請(qǐng)客戶端確定。
   • 二維碼已失效。 會(huì)調(diào)用第一步重新生成二維碼圖片

3. 如果二維碼圖片關(guān)閉，輪詢也會(huì)關(guān)閉。減少服務(wù)器請(qǐng)求

實(shí)現(xiàn)

大概也只有三步，因?yàn)閍jax禁止了跨域請(qǐng)求，只能在java后端實(shí)現(xiàn)。

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. 校驗(yàn)二維碼狀態(tài)。

    @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"))) {
            //執(zhí)行登錄操作
        }
        return jsonObject.getString("retcode");
    }

3. 前端ajax調(diào)用。

   $("#login").click(function () {
        $.get("/getimg", function (data) {
            $("#login_image").attr("src", data);
        });
        $(".ui.page.dimmer").dimmer('show');
        var timer1 = setInterval(checkScan, 2500);//每隔3s執(zhí)行一次checkScan
        function checkScan() {
            $(".ui.page.dimmer").dimmer({
                onHide: function () {
                    clearInterval(timer1);
                }
            });
            $.get("/check", function (data) {
                if (data == "50114001") {
                }
                if (data == "50114002") {
                    $('#login_msg').html("已經(jīng)掃描，請(qǐng)?jiān)诳蛻舳舜_認(rèn)");//將二維碼取消，防止其他人再掃
                }
                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 = "/";
                }
            });
        }
    });

效果

演示地址