需求
个人或个体户，如何免费使用微信小程序授权，快速登录进系统内部？
微信授权登录好处：
- 不用自己开发一个登录模块，节省开发和维护成本
- 安全性得到了保障，安全验证完全交由腾讯验证，超级可靠哇
可能有的人会问，为何不用微信公众号授权登录？原因很简单，因为一年要300元，小公司得省钱啊！
实现步骤说明
所有的步骤里包含四个对象，分别是本地后台、本地微信小程序、本地网页、以及第三方微信后台
本地后台调用微信后台的https://api.weixin.qq.com/cgi-bin/token接口，get请求，拿到返回的access_token；本地后台根据拿到的access_token，调用微信后台的https://api.weixin.qq.com/wxa/getwxacodeunlimit接口，得到二维码图片文件，将其输出传递给本地网页显示本地微信小程序扫本地网页的二维码图片，跳转至小程序登录页面，通过wx.login方法，在success回调函数内得到code值，并将该值传递给本地后台本地后台拿到code值后，调用微信后台的https://api.weixin.qq.com/sns/jscode2session接口，get请求，得到用户登录的openid即可。
注意点：
- 上面三个微信接口
/cgi-bin/token、/getwxacodeunlimit、/jscode2session必须由本地后台调用，微信小程序那边做了前端限制；本地网页如何得知本地微信小程序已扫码呢？
本地微信小程序将code，通过A接口，将值传给后台，后台拿到openid后，再将成功结果返回给本地微信小程序；同时，本地网页不断地轮询A接口，等待后台拿到openid后，便显示登录成功页面。
微信小程序核心代码
Page({
data: {
theme: wx.getSystemInfoSync().theme,
scene: "",
jsCode: "",
isLogin: false,
loginSuccess: false,
isChecked: false,
},
onLoad(options) {
const that = this;
wx.onThemeChange((result) => {
that.setData({
theme: result.theme,
});
});
if (options !== undefined) {
if (options.scene) {
wx.login({
success(res) {
if (res.code) {
that.setData({
scene: decodeURIComponent(options.scene),
jsCode: res.code,
});
}
},
});
}
}
},
handleChange(e) {
this.setData({
isChecked: Boolean(e.detail.value[0]),
});
},
formitForm() {
const that = this;
if (!this.data.jsCode) {
wx.showToast({
icon: "none",
title: "尚未微信登录",
});
return;
}
if (!this.data.isChecked) {
wx.showToast({
icon: "none",
title: "请先勾选同意用户协议",
});
return;
}
wx.showLoading({
title: "正在加载",
});
let currentTimestamp = Date.now();
let nonce = randomString();
wx.request({
url: `A接口?scene=${that.data.scene}&js_code=${that.data.jsCode}`,
header: {},
method: "POST",
success(res) {
wx.hideLoading();
that.setData({
isLogin: true,
});
if (res.statusCode == 200) {
that.setData({
loginSuccess: true,
});
} else {
if (res.statusCode == 400) {
wx.showToast({
icon: "none",
title: "无效请求",
});
} else if (res.statusCode == 500) {
wx.showToast({
icon: "none",
title: "服务内部错误",
});
}
that.setData({
loginSuccess: false,
});
}
},
fail: function (e) {
wx.hideLoading();
wx.showToast({
icon: "none",
title: e,
});
},
});
},
});
scene为随机生成的8位数字
本地网页核心代码
let isInit = true
function loginWx() {
isInit = false
refreshQrcode()
}
function refreshQrcode() {
showQrLoading = true
showInfo = false
api.get('/qrcode').then(qRes => {
if (qRes.status == 200) {
imgSrc = `${BASE_URL}${qRes.data}`
pollingCount = 0
startPolling()
} else {
showToast = true
toastMsg = '二维码获取失败，请点击刷新重试'
showInfo = true
}
}).finally(() => {
showQrLoading = false
})
}
// 开始轮询
// 1000毫秒轮询一次
function startPolling() {
pollingInterval = setInterval(function () {
pollDatabase()
}, 1000)
}
function pollDatabase() {
if (pollingCount >= maxPollingCount) {
clearInterval(pollingInterval)
showToast = true
toastMsg = '二维码已失效，请刷新'
showInfo = true
return
}
pollingCount++
api.get('/result').then(res => {
if (res.status == 200) {
clearInterval(pollingInterval)
navigate('/os', { replace: true })
} else if (res.status == 408) {
clearInterval(pollingInterval)
showToast = true
toastMsg = '二维码已失效，请刷新'
showInfo = true
}
})
}
html的部分代码如下所示
<button class="btn" on:click={loginWx}>微信登录</button>
<div id="qrcode" class="relative mt-10">
{#if imgSrc}
<img src={imgSrc} alt="二维码图片"/>
{/if}
{#if showQrLoading}
<div class="mask absolute top-0 left-0 w-full h-full z-10">
<Loading height="12" width="12"/>
</div>
{/if}
</div>
尾声
若需要完整代码，或想知道如何申请微信小程序，欢迎大家关注或私信我哦~~
原文链接：https://juejin.cn/post/7351649413401493556 作者：zwf193071
