个人或个体户，如何免费使用微信小程序授权登录

本文主要是介绍个人或个体户，如何免费使用微信小程序授权登录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

个人或个体户，如何免费使用微信小程序授权，快速登录进系统内部？

微信授权登录好处：

不用自己开发一个登录模块，节省开发和维护成本
安全性得到了保障，安全验证完全交由腾讯验证，超级可靠哇

可能有的人会问，为何不用微信公众号授权登录？原因很简单，因为一年要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 = truefunction loginWx() {isInit = falserefreshQrcode()}function refreshQrcode() {showQrLoading = trueshowInfo = falseapi.get('/qrcode').then(qRes => {if (qRes.status == 200) {imgSrc = `${BASE_URL}${qRes.data}`pollingCount = 0startPolling()} else {showToast = truetoastMsg = '二维码获取失败，请点击刷新重试'showInfo = true}}).finally(() => {showQrLoading = false})}// 开始轮询// 1000毫秒轮询一次function startPolling() {pollingInterval = setInterval(function () {pollDatabase()}, 1000)}function pollDatabase() {if (pollingCount >= maxPollingCount) {clearInterval(pollingInterval)showToast = truetoastMsg = '二维码已失效，请刷新'showInfo = truereturn}pollingCount++api.get('/result').then(res => {if (res.status == 200) {clearInterval(pollingInterval)navigate('/os', { replace: true })} else if (res.status == 408) {clearInterval(pollingInterval)showToast = truetoastMsg = '二维码已失效，请刷新'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>