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

需求

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

微信授权登录好处:

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

可能有的人会问,为何不用微信公众号授权登录?原因很简单,因为一年要300元,小公司得省钱啊!

实现步骤说明

所有的步骤里包含四个对象,分别是本地后台本地微信小程序本地网页、以及第三方微信后台

  1. 本地后台调用微信后台https://api.weixin.qq.com/cgi-bin/token接口,get请求,拿到返回的access_token
  2. 本地后台根据拿到的access_token,调用微信后台https://api.weixin.qq.com/wxa/getwxacodeunlimit接口,得到二维码图片文件,将其输出传递给本地网页显示
  3. 本地微信小程序本地网页的二维码图片,跳转至小程序登录页面,通过wx.login方法,在success回调函数内得到code值,并将该值传递给本地后台
  4. 本地后台拿到code值后,调用微信后台https://api.weixin.qq.com/sns/jscode2session接口,get请求,得到用户登录的openid即可。

注意点:

  1. 上面三个微信接口/cgi-bin/token/getwxacodeunlimit/jscode2session必须由本地后台调用,微信小程序那边做了前端限制;
  2. 本地网页如何得知本地微信小程序已扫码呢?

本地微信小程序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

(0)
上一篇 2024年3月30日 下午5:00
下一篇 2024年3月30日 下午5:10

相关推荐

发表回复

登录后才能评论