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

zwf193071

已于 2024-04-01 15:13:59 修改

阅读量726

点赞数 5

文章标签：微信小程序 notepad++ 小程序

于 2024-03-31 14:55:24 首次发布

本文链接：https://blog.csdn.net/zwf193071/article/details/137200577

版权

需求

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

微信授权登录好处：

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

可能有的人会问，为何不用微信公众号授权登录？原因很简单，因为一年要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>