调用网易云二维码登录API，实现微信小程序登录
首先前往网易云音乐API官网 binaryify.github.io/NeteaseClou…
下载需要的文件链接：github.com/Binaryify/N…
根据官方文档启动好本地的服务器
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)
-
接下来是代码演示：
//封装发送登录数据请求的函数 tools.js
export default (url,data={},method="GET")=>{
return new Promise((resolve,reject)=>{
wx.request({
url:'http://localhost:4000' + url,
data,
method,
success:(res)=>{
//console.log('请求成功',res);
resolve(res.data)
},
fail:(err)=>{
// console.log('请求失败',err);
reject(err)
}
})
})
}
下面我们回到登录页面设置一个button跳转到另外一个页面实现二维码登录，因为在原登录页面登录会比较麻烦（如果你觉得你可以处理好样式也未尝不可），这里我设置了一个qrcode page页面
// qrcode.wxml
<view class="Container">
<button class="confirm-btn" bindtap="qrlogin">获取二维码</button>
<image id="qrimg" src="{{qrimg}}" class="qrimg"></image>
</view>
//qrcode.js
//检测扫码状态接口
async checkStatus(key) {
let result = await tools(`/login/qr/check?key=${key}×tamp=${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×tamp=${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是否有数据。
