网易云音乐二维码登录官方版

青稞儿

已于 2023-05-17 15:07:26 修改

阅读量432

点赞数

文章标签： javascript 前端 json html

于 2023-05-17 11:55:42 首次发布

本文链接：https://blog.csdn.net/m0_61698324/article/details/130722465

版权

二维码登录

官网链接(https://binaryify.github.io/NeteaseCloudMusicApi))
下载官方API到本地，打开NeteaseCloudMusicApi文件夹，在此目录下cmd,运行node app.js即可在本地开启服务器
在这里插入图片描述
这样你就可以在浏览器打开二维码文件了
http://localhost:3000/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>
</head>

<body>
  <!-- 二维码 -->
  <img id="qrImg" />
  <div id="info" class="info"></div>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
  <script>
    //二维码登录涉及到 3 个接口,调用务必带上时间戳,防止缓存

    //3.二维码检测扫码状态接口
    async function checkStatus(key) {
      const res = await axios({
        url: `/login/qr/check?key=${key}&timestamp=${Date.now()}`,
      })
      return res.data
    }
    
    //4.登录状态接口
    async function getLoginStatus(cookie = '') {
      const res = await axios({
        url: `/login/status?timestamp=${Date.now()}`,
        method: 'post',
        data: {
          cookie,
        },
      })
      // 获取文档中的第一个id=info的元素 把返回值res.data转为文本放在id位info的div里
      document.querySelector('#info').innerText = JSON.stringify(res.data, null, 2)
    }

      //1.生成 key 接口
    async function login() {
      let timer
      let timestamp = Date.now()
      const cookie = localStorage.getItem('cookie')
      this.getLoginStatus(cookie)
      const res = await axios({
        url: `/login/qr/key?timestamp=${Date.now()}`,
      })
      const key = res.data.data.unikey
      //2. 二维码生成接口  传入上一个接口生成的 key， 可生成二维码图片的 base64 和二维码信息
      const res2 = await axios({
        url: `/login/qr/create?key=${key}&qrimg=true&timestamp=${Date.now()}`, //传入三个参数
      })
      //将生成的二维码图片放入id为qrImg的标签处
      document.querySelector('#qrImg').src = res2.data.data.qrimg

      timer = setInterval(async () => {
        const statusRes = await this.checkStatus(key)
        if (statusRes.code === 800) {
          alert('二维码已过期,请重新获取')
          clearInterval(timer)
        }
        if (statusRes.code === 803) {
          // 这一步会返回cookie
          clearInterval(timer)
          alert('授权登录成功')
          await this.getLoginStatus(statusRes.cookie)
          localStorage.setItem('cookie', statusRes.cookie)
        }
      }, 3000)
    }
    login()
  </script>
  <style>
    .info {
      white-space: pre;
    }
  </style>
</body>

</html>