Create qr-login.html

Author: zkitefly

qr-login.html

@@ -0,0 +1,55 @@
+---
+permalink: /qr-login.html
+layout: default
+---
+
+<style>
+    .selectable {
+        -webkit-user-select: all;
+        user-select: all;
+        cursor: pointer;
+        padding: 5px;
+        background-color: #b2b2b2;
+        border-radius: 5px;
+        display: inline-block;
+        margin-top: 10px;
+    }
+</style>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/qrcode.min.js"></script>
+<script>
+    function generateQRCode() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const verificationUri = urlParams.get('verificationUri');
+        const userCode = urlParams.get('userCode');
+        const login = urlParams.get('login');
+        if (!verificationUri || !userCode) {
+            return; // 不显示任何内容
+        }
+        const qrcodeContainer = document.getElementById('qrcode');
+        if (login === '1') {
+            const userPrompt = document.createElement('p');
+            userPrompt.innerHTML = `请复制代码 <span class="selectable" id="userCode">${userCode}</span> <br>并前往 <a href="${verificationUri}">${verificationUri}</a>，输入代码允许访问并登录微软账户。`;
+            qrcodeContainer.appendChild(userPrompt);
+        } else {
+            const currentUrl = window.location.href + '?login=1';
+            console.log("currentUrl: ", currentUrl);
+            const canvas = document.createElement('canvas');
+            QRCode.toCanvas(canvas, currentUrl, function (error) {
+                if (error) console.error(error);
+            });
+            qrcodeContainer.appendChild(canvas);
+            const promptMessage = document.createElement('p');
+            promptMessage.innerHTML = `请扫描二维码。`;
+            qrcodeContainer.appendChild(promptMessage);
+        }
+    }
+    window.onload = function() {
+        generateQRCode();
+    }
+</script>
+
+<div id="qrcode"></div>
+
+<noscript>
+    <p>请开启 JavaScript 以查看二维码生成内容。</p>
+</noscript>