web端微信扫码登录——通过扫小程序码登录

Web端通过微信扫码登录,可以使用微信官方方案,但它属于付费方案。本篇中,我们总结了一种非付费方案,通过扫码微信小程序二维码进行登录。两者对比如下:

  • 微信官方登录:
    • 最简单、最舒服的实现方式
    • 需要收费
  • 小程序登录:
    • 专门针对没有获得微信官方付费接口的情况,组合多端实现的一套登录方案
    • 不收费,但是实现难度大
    • 当没有微信官方的付费接口权限时,可以使用该方案。能登录成功的前提是,拥有一个已上线部署的小程序。

小程序扫码

小程序登录需要具备的条件:

  • 一个已经上线发布的小程序(该方法的局限性就是这里,主要针对不适用微信开放平台付费接口的情况)
    • 在没有付费开通微信开放平台接口的情况下,可以上线一个小程序,通过这种方式登录
    • 在已有微信开放平台接口权限的情况下,建议采用第一种方式
  • 已经上线发布的小程序,需要准备一个登录页面,专门用来执行web端的登录
  • 后端服务需要对微信开放平台的进口进行各种调用

登录方案为:
在这里插入图片描述

具体登录过程

小程序涉及三个端:

  • web前端
  • 后台服务端
  • 小程序端

Web端

Web端的工作主要包括:

  1. 调用后端接口,获取扫描二维码
  2. 展示小程序二维码,并轮询二维码状态(调用后端接口)
  3. 根据扫码结果,改变二维码的状态
  4. 根据扫码结果,进行页面跳转、执行登录成功等功能

Web端的功能比较简单也比较复杂,我们在此处不做代码列举。

后台服务

在登录这一环节,后台主要做两件事情:

  • 一是获取小程序二维码
  • 二是执行小程序登录

获取二维码

第一步:获取access_token

// 获取小程序access_token
    async queryAccessToken() {
        try {
            return new Promise(async(resolve, reject) => {
                let requestParams = {
                    grant_type: 'client_credential', // 指定值
                    appid: '', // 请填写自己小程序的appid
                    secret: '' // 请填写自己小程序的appsecret
                }
                let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=${requestParams.grant_type}&appid=${requestParams.appid}&secret=${requestParams.secret}`
                request.get(url, async function(err, response, body) {
                    resolve(JSON.parse(body))
                })
            })
        } catch(e) {
            console.log(e)
        }
    }

第二步:获取小程序二维码

// 获取小程序二维码
async queryQRCode(access_token: string) {
    try {
        return new Promise(async (resolve, reject) => {
            const params = {
                path: 'pages/card/index', // 小程序登录功能的页面
            }
            const url = `https://api.weixin.qq.com/wxa/getwxacode?access_token=${access_token}`
            request({
                url: `https://api.weixin.qq.com/wxa/getwxacode?access_token=${access_token}`,
                method: 'post',
                body: JSON.stringify(params),
                encoding: null,
            }, async function(error, response, body) {
                let data = body
                var base64Img = "data:image/png;base64," + data.toString('base64');  // base64图片编码字符串
                resolve(base64Img)
            })
        })
    } catch(e) {
        console.log(e)
    }
}

说明:

  • access_token来自第一步中获取的code

执行登录

微信小程序登录的流程为:
在这里插入图片描述

我们只需要在后台:

  • 调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
  • 调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台账号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台账号) 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

将上述微信官方平台的接口封装成服务,供小程序端调用即可。

小程序端

小程序端开发一个微信小程序登录的页面,在Web端扫码成功后,就可在手机端弹出该登录页面,并在手机上确认登录。

<!--index.wxml-->
<view class="container">
  <view>
    <button bindtap="getUserLogin">点击登录</button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

getUserLogin方法中,调用后端服务登录接口。登录成功后,Web端会携带用户信息一起,返回给客户端。

示例效果

在这里插入图片描述

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot框架是一种轻量级、开箱即用的Java开发框架,它大大简化了企业级应用的开发过程。要实现微信扫码登录,可以使用Spring Boot框架结合微信开放平台的API来实现。以下是实现微信扫码登录的步骤: 1. 注册微信开放平台账号并创建应用,获取AppID和AppSecret。 2. 创建Spring Boot项目并导入相关依赖,如web、httpclient等。 3. 在配置文件application.properties中配置微信开放平台的AppID和AppSecret。 4. 创建一个控制器,用于处理登录相关的请求。 5. 定义一个生成微信扫码登录链接的方法,该方法使用AppID、重定向URI和state等参数生成微信登录链接。 6. 在控制器中定义一个登录请求的接口,该接口返回生成的微信扫码登录链接。 7. 创建一个回调接口,用于处理微信登录成功后的回调请求。 8. 在回调接口中获取微信的授权code,通过code和AppID、AppSecret等参数向微信服务器发送请求,获取用户的唯一标识openid。 9. 将获取到的openid存储到数据库或Session中,表示用户已登录。 10. 在需要验证用户登录状态的接口中,通过openid验证用户是否已登录。 以上是使用Spring Boot实现微信扫码登录的基本步骤,通过控制器处理登录和回调接口,以及与微信服务器的交互,可以实现用户使用微信扫码登录系统的功能。当然,具体实现中还需要考虑安全性、数据持久化等问题,以及前端页面的设计和展示等方面的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值