api-enhanced/public/qrlogin.html

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>二维码登录</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-height: 100vh;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .container {
      background: white;
      border-radius: 12px;
      padding: 48px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      max-width: 450px;
      width: 100%;
      text-align: center;
    }

    h1 {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 32px;
    }

    .qr-wrapper {
      display: inline-block;
      padding: 16px;
      background: #f9f9f9;
      border-radius: 8px;
      margin-bottom: 24px;
    }

    #qrImg {
      width: 200px;
      height: 200px;
      display: block;
    }

    .info {
      text-align: left;
      padding: 16px;
      background: #f9f9f9;
      border-radius: 6px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: #666;
      white-space: pre-wrap;
      word-break: break-all;
      max-height: 200px;
      overflow-y: auto;
    }

    .status {
      margin-top: 16px;
      padding: 12px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
    }

    .status.waiting {
      background: #fef3c7;
      color: #92400e;
    }

    .status.success {
      background: #d1fae5;
      color: #065f46;
    }

    .status.error {
      background: #fee2e2;
      color: #991b1b;
    }

    .hint {
      margin-top: 16px;
      font-size: 13px;
      color: #999;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>二维码登录</h1>
    <p class="subtitle">使用网易云音乐App扫描二维码登录</p>

    <div class="qr-wrapper">
      <img id="qrImg" src="" alt="二维码加载中..." />
    </div>

    <div id="status" class="status waiting">等待扫描...</div>

    <div id="info" class="info"></div>

    <p class="hint">请打开网易云音乐App，扫描上方二维码完成登录</p>
  </div>

  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
  <script>
    async function login() {
      let timer
      const statusDiv = document.getElementById('status')
      const cookie = localStorage.getItem('cookie')

      updateStatus('加载二维码...', 'waiting')
      getLoginStatus(cookie)

      try {
        const res = await axios({
          url: `/login/qr/key?timestamp=${Date.now()}`,
        })
        const key = res.data.data.unikey

        const res2 = await axios({
          url: `/login/qr/create?key=${key}&platform=web&qrimg=true&timestamp=${Date.now()}&ua=pc`,
        })
        document.querySelector('#qrImg').src = res2.data.data.qrimg
        updateStatus('请扫描二维码', 'waiting')

        timer = setInterval(async () => {
          const statusRes = await checkStatus(key)
          if (statusRes.code === 800) {
            updateStatus('二维码已过期，请刷新页面', 'error')
            clearInterval(timer)
          } else if (statusRes.code === 801) {
            updateStatus('二维码已扫描，请在手机上确认', 'waiting')
          } else if (statusRes.code === 802) {
            updateStatus('登录成功，正在保存信息...', 'waiting')
          } else if (statusRes.code === 803) {
            clearInterval(timer)
            updateStatus('授权登录成功！', 'success')
            await getLoginStatus(statusRes.cookie)
            localStorage.setItem('cookie', statusRes.cookie)
          }
        }, 3000)
      } catch (error) {
        console.error('登录失败:', error)
        updateStatus('二维码加载失败，请刷新页面重试', 'error')
      }
    }

    async function checkStatus(key) {
      const res = await axios({
        url: `/login/qr/check?key=${key}&timestamp=${Date.now()}&ua=pc`,
      })
      return res.data
    }

    async function getLoginStatus(cookie = '') {
      try {
        const res = await axios({
          url: `/login/status?timestamp=${Date.now()}&ua=pc`,
          method: 'post',
          data: {
            cookie,
          },
        })
        document.querySelector('#info').textContent = JSON.stringify(res.data, null, 2)
      } catch (error) {
        console.error('获取登录状态失败:', error)
      }
    }

    function updateStatus(message, type) {
      const statusDiv = document.getElementById('status')
      statusDiv.textContent = message
      statusDiv.className = 'status ' + type
    }

    login()
  </script>
</body>

</html>