调用网易云二维码登录API，实现微信小程序登录

调用网易云二维码登录API，实现微信小程序登录

首先前往网易云音乐API官网 binaryify.github.io/NeteaseClou…

首先根据文档的链接下载好配置文件，再根据官方文档启动好本地的服务器

1. 因为服务器启动的端口号默认为3000，我们需要将端口号改为4000去启动，避免与原来的3000端口号的服务器发生冲突。启动方式：在上面链接下载好的文件里面，输入cmd，进入小黑框 输入 ：set PORT=4000 && node app.js

二维码登录

说明: 二维码登录涉及到 3 个接口,调用务必带上时间戳,防止缓存

[1. 二维码 key 生成接口]

说明: 调用此接口可生成一个 key

接口地址 :  /login/qr/key

[2. 二维码生成接口]

说明: 调用此接口传入上一个接口生成的 key 可生成二维码图片的 base64 和二维码信息,可使用 base64 展示图片,或者使用二维码信息内容自行使用第三方二维码生成库渲染二维码

必选参数: key,由第一个接口生成

可选参数: qrimg 传入后会额外返回二维码图片 base64 编码

接口地址 :  /login/qr/create

调用例子 :  /login/qr/create?key=xxx

[3. 二维码检测扫码状态接口]

说明: 轮询此接口可获取二维码扫码状态,800 为二维码过期,801 为等待扫码,802 为待确认,803 为授权登录成功(803 状态码下会返回 cookies)

必选参数: key,由第一个接口生成

接口地址 :  /login/qr/check

调用例子 :  /login/qr/check?key=xxx

调用可参考项目文件例子/public/qrlogin.html (访问地址:http://localhost:3000/qrlogin.html)

1. 接下来是代码演示：

   //封装发送登录数据请求的函数 tools.js  。这里的url的 config.host1 部分（前面视频有讲到另外在config.js中配置），如果你没有配置好，请改为 url:http://localhost:4000，

export default (url,data={},method="GET")=>{
    return new Promise((resolve,reject)=>{
        wx.request({
            url:config.host1 + url,
            data,
            method,
            success:(res)=>{
                //console.log('请求成功',res);
                resolve(res.data)
            },
            fail:(err)=>{
               // console.log('请求失败',err);
                reject(err)
            }
          })
    })
}

下面我们回到登录页面（login）设置一个button跳转到另外一个页面（qrcode）实现二维码登录，因为在原登录页面登录会比较麻烦（如果你觉得你可以处理好样式也未尝不可），这里我设置了一个qrcode page页面

    // qrcode.wxml
 <view class="Container">
    <button class="confirm-btn" bindtap="qrlogin">获取二维码</button>
    <image id="qrimg" src="{{qrimg}}" class="qrimg"></image>
</view> 

 //引入上面封装好的请求函数
import tools from '../../utills/tools'

 data: {
    qrimg: '', //存放二维码
  },

//qrcode.js
      //检测扫码状态接口
  async checkStatus(key) {
    let result = await tools(`/login/qr/check?key=${key}&timestamp=${Date.now()}`,)
    console.log(result, 'checkStatus');
    return result
  },
    
    //获取登录状态的函数 需要的参数（cooike（由上一个函数请求返回），请求方式：post）
    //本人在这个函数里头没有调用上面自己封装好的请求函数，因为自己也不会，尝试了一晚上也不能返回到用户信息，如果有大佬能发现问题，请务必告诉！！！
  async getLoginStatus(cookie = ''){
    console.log(cookie,'cookie');
    return new Promise((resolve,reject)=>{
      wx.request({
          url:`http://localhost:4000/login/status?timestamp=${Date.now()}`,
          method: 'post',
          data: {
            cookie,
          },
          success:(res)=>{
              console.log('请求成功',res.data.data.profile);
              resolve(res.data)
    //data里面的profile就是用户信息存储的信息。
              wx.setStorageSync('userInfo', JSON.stringify(res.data.data.profile))
          },
          fail:(err)=>{
              console.log('请求失败',err);
              reject(err)
          }
        })
  })
  },
    
    //这里你也可以用其他生命函数钩子去触发，本人比较希望通过绑定点击事件
      async qrlogin() {
    //获取key
    let reskey = await tools(`/login/qr/key?timestamp=${Date.now()}`)
    //console.log(this.data.unikey,'unikey');

    //获取二维码
    let result2 = await tools(`/login/qr/create?key=${reskey.data.unikey}&qrimg=true&timestamp=${Date.now()}`)
    //console.log(result2,'qrlogin');
    //存下二维码
    this.setData({
      qrimg: result2.data.qrimg
    })

    let timer
    let timestamp = Date.now()
    //定时器查看
    timer = setInterval(async () => {
      //调用检测扫码状态接口
      const result3 = await this.checkStatus(reskey.data.unikey)
      console.log(result3, '3');

      if (result3.code === 800) {
        wx.showToast({
          title: '二维码已过期,请重新获取',
        })
        clearInterval(timer)
      }
      if (result3.code === 803) {
        // 这一步会返回cookie
        wx.showToast({
          title: '授权登录成功',
        })
        clearInterval(timer)
      //成功获取到cooike，回到前面的函数请求获取用户信息。
        await this.getLoginStatus(result3.cookie)
        
        //登录成功跳转到个人页面
        wx.reLaunch({
          url:'/pages/personal/personal'
        })
      }
    }, 3000)

  },

完成这些步骤，最后应该可以成功的进行微信二维码登录了，在微信开发工具的Stroge可查看userInfo是否有数据。（注意：扫二维码登录是用网易云App扫的，不是用微信扫码！！！）

本人也是处于微信小程序开发学习当中，如有问题请在评论区进行交流，如果能帮助到你的话，请点赞吧！！！。