后台管理使用微信扫码登录(小程序登录)

  1. 后台管理登录页添加一个微信登录按钮,点击弹窗二维码
    在这里插入图片描述
    在这里插入图片描述

代码实现:

/**
 * 该页面原本是用户协议页(产线页面),目前接入微信授权登录功能
 * 原因:微信扫码登录,后端生成的二维码仅能跳转当前 生产环境小程序 存在的页面,而此功能开发时,当前生产环境不存在授权页,因此只能用现有的页面进行开发
 * 后续:1.此版本提交一个空白页,下个版本将此页面转移到新提交的空白页
 *      2.另加一页空白页,以备今后版本不时之需
 *      3.由于有“打包时过滤无依赖文件”的设定,新家的备用页需要在某个恒为false的条件下进行引用,以跳过此过滤
 */
async handlewxLogin () {
      console.log('点击按钮')
      // 1、请求后端接口,获取一个唯一的标识flagId
      const flagId = await this.$service.wxpc.getflagId()
      // 2、生成小程序码(需传入小程序已经发布版本的页面)
      const res = await this.$service.wxpc.getloginQr({ page: 'pages/login/user-agreement', scene: flagId })
      this.qrData = config.API_BASE_URL + res.replace('api', '')
      this.wxVisible = true
      // 3、轮训判断是否已登录
      let time = ''
      time = setInterval(async () => {
        const userInfo = await this.$service.wxpc.getqueryFlag({ flagId })
        if (userInfo && userInfo.token) {
          // 保存token
          await this.$store.dispatch('user/setToken', userInfo.token)
          // 跳转首页
          this.$router.push('/')
          // 登录有token 清除定时器
          clearInterval(time)
        }
      }, 1500)
    }
  1. 小程序中在已经发布的旧页面中写微信登录页面(之后发布新版可以移到登录页),点击按钮登录后,pc的轮询接口能通过flagId同步得到token登录。
    代码实现:
onLoad(options => {
  const scene = options?.scene || '' // 跟主要登录无关,用于判断旧页面其他功能
  if (!scene) return
  if (scene) {
    // 微信扫码登录
    uni.setNavigationBarTitle({ title: '授权登录' })
    flagId.value = scene
    pageType.value = 'login' // 判断登录模块功能
    // getCode()
  }
})
// 1、点击登录按钮
const submitLogin = async function (event: any) {
  console.log('点击按钮', event)

  const { encryptedData, iv } = event.detail
  if (encryptedData == null || iv == null) return uni.showToast({ icon: 'none', title: '需要允许获取用户手机号授权' })
  requestLogin(event)
}
// 2、执行登录
async function requestLogin (event: any) {
  if (!flagId.value) return
  const { encryptedData, iv } = event.detail
// 3、授权登录
  const userInfo = await service.app.loginByPcWeixin({
    flagId: flagId.value,
    encryptedData,
    iv
  })
  console.log({ userInfo })
  // 4、登录的逻辑 比如存储token、跳转路由
  logicFuntion(userInfo)
}

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Spring Boot是一种基于Spring框架的快速开发框架,它使Web应用程序开发过程变得更加简单。同时,jQuery是一种常用的JavaScript库,它可以使开发人员编写更少的代码来实现更好的用户体验。微信扫码登录是一种便捷的用户登录方式,它使用户可以通过扫描二维码的方式来登录系统,大大提高了用户的体验与使用方便性。将这三个技术库结合起来,可以实现一个简单易用的登录系统。 具体来说,可以使用Spring Boot框架开发后端接口,用jQuery库进行前端页面开发,实现微信扫码登录的集成。首先,后端应用需要将微信扫码API集成进来,实现用户信息的获取。通过在前端页面调用这些API,用户可以扫描二维码进行登录。在用户提交登录信息以后,后端可以将这些信息进行验证,并在验证成功后完成用户的授权操作,使其可以使用系统的相关功能。 总之,Spring Boot,jQuery,和微信扫码登录三者的融合可以实现一个简单而又好用的登录系统。通过它,用户可以享受高效、快速和安全的登录体验。同时,这种解决方案也可以为开发人员提供更加简便的开发体验,加速开发过程,节约开发成本。 ### 回答2: Spring Boot是一个开源的Java框架,简化了Spring框架的配置和开发,使Java应用程序的构建和部署变得更加简单。Spring Boot集成了Spring框架和大量的其他开源框架和工具,提供了全面的基础设施支持,可以快速构建高效的Java应用程序。 jQuery是一种广泛使用JavaScript库,使开发人员可以更轻松地处理HTML文档、处理事件、创建动画效果、处理AJAX请求等。jQuery具有快速、简单、小巧的特点,广泛应用于Web前端开发。 微信扫码登录是一种流行的身份验证方式,用户可以通过扫描微信二维码来登录网站或应用程序。开发人员可以使用Spring Boot和jQuery来实现微信扫码登录功能。具体来说,可以使用Spring Boot实现身份验证和用户管理功能,使用jQuery实现前端界面和动态效果。 在实现微信扫码登录功能时,需要通过微信开放平台注册账号并获取应用ID和应用密钥。然后,可以使用Spring Boot创建RESTful API接口,处理微信服务器发送的请求,并将认证结果返回给前端。在前端界面上,可以使用jQuery生成并显示二维码,并轮询后台接口确定用户是否已经扫描了二维码,从而实现微信扫码登录功能。 总之,使用Spring Boot和jQuery可以快速、简单地实现微信扫码登录功能,提高了Web应用程序的安全性和用户体验。 ### 回答3: 在现代的web应用中,微信扫码登录已经成为普遍的登录方式。为了实现这种方式,我们需要在后端实现微信登录接口并且生成二维码,在前端使用jquery实现扫码功能。springboot可以作为后端框架来实现微信登录接口。 首先,需要到微信公众平台或开放平台中获取网站应用的appid和appsecret。然后,使用springboot中的restful风格接口实现微信登录功能。接口需要返回二维码图片和对应的token,用于后续的验证和获取用户信息。 在前端,使用jquery实现扫码功能,需要引用jquery-QRcode插件来生成二维码,并且使用ajax定时轮询token接口,来获取用户信息。用户扫码后,微信会把用户信息返回给后端,后端会生成一个token和过期时间,并将token返回给前端。前端每隔一段时间轮询token接口,直到token未过期且获取到用户信息。 总的来说,使用springboot和jquery实现微信扫码登录并不困难,但需要一定的微信开发经验和相关技术的掌握。在实际使用中,要注意安全性和认证授权等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值