目录
前言
操作流程
1、注册微信小程序
2、通过后台获取小程序码
注意事项
时序图理解
方案实现步骤
前言
很多业务场景之下我们需要实现微信扫码登录检测登录状态的需求,或需要同步网站与小程序的用户信息。
如:小程序上的用户收藏内容与网站收藏相同。或登录网站后也查看自己的订单信息。
我们知道微信创建的每一个有 appId 的程序,注册之后,每个微信用户在这个小程序里会有一个唯一用户标识 openid,对于用户相关的业务可以基于这点展开。
整体认证流及获取小程序码的过程对于第一次接触的人来说有点小复杂,可以看我的开源项目,已经对这些过程进行了封装
github地址:
https://github.com/Durancer/wx-login-based-on-miniapp.git
gitee地址:
Wx-login-based-on-miniapp: 基于 springboot 实现微信扫描小程序码登录,获取用户微信信息
下面展示操作流程
1、注册微信小程序
此方案是基于小程序获取用户信息的方案,因此之前你需要注册一个小程序。
如何注册微信小程序
2、通过后台获取小程序码
这里先简单介绍 小程序码 和 小程序二维码 的区别。
小程序二维码就是我们平时扫描的,进入小程序的二维码。
而小程序码是我们通过接口生成的 扫描后 可以进入指定页面(这里就是我们的认证界面),并能携带一个参数(scene值),在认证界面进行接收。我们的业务逻辑也将根据这个值展开
可以查看微信开放文档的相关api
获取小程序码 | 微信开放文档
主要几点就是:
首先需要获取 access_token 获取access_token
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
在通过 access_token 获取到小程序码,这里在 postman直接发送请求可以直接获取到图片,发送获取小程序码的请求是需要传入一个scene值的(此套扫码登录方案就是在成功创建小程序码后添加一条数据库信息来检测此码的扫描和认证状态),如果是在java后台发送,我们需要以 InputStream流 的形式来接收。然后通过流的形式来保存图片到本地或者服务器(开源项目里已经都做过封装处理了,欢迎大家star)
获取不限制的小程序码 | 微信开放文档
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
注意事项
- 如果调用成功,会直接返回图片二进制内容,如果请求失败,会返回 JSON 格式的数据。
- POST 参数需要转成 JSON 字符串,不支持 form 表单提交。
- 接口只能生成已发布的小程序码
- 调用分钟频率受限(5000次/分钟),如需大量小程序码,建议预生成
因此,我们就是通过scene 值来区分和标记用户扫的码是哪一张的
3、前端处理
PC端扫码
到了这里说明我们已经保存了刚才请求接口所生成的小程序码到服务器的某个文件夹下,那么我们只需要通过某种方式将此图片映射到前端上显示即可。可以通过配置 springMVC 静态资源映射(tomcat映射) 或者 nginx 映射 即可。本开源项目使用tomcat映射。ps:当然图片都保存了,怎么显示要做修改也就简单了
移动端
扫描小程序码将进入我们编写的指定页面,我们只要拿到scene值,就可以开始进行业务逻辑处理了。
获取 scene 值
- scene 字段的值会作为 query 参数传递给小程序/小游戏。用户扫描该码进入小程序/小游戏后,开发者可以获取到二维码中的 scene 值,再做处理逻辑。
- 调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟,开发工具模拟时的 scene 的参数值需要进行 encodeURIComponent
也就是说,每一张生成的小程序码是不一样的,它除了能够进行扫码进到指定的页面,还会携带一个 scene 参数,让我们进行需要的业务逻辑。同时scene值也保证了小程序码的唯一性
我们需要在小程序中写一个,类似这样的界面,扫描二维码,将进入这个界面
在页面的js文件中,我们可以这样获取到这个 scene值
Page({onLoad (query) {// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 sceneconst scene = decodeURIComponent(query.scene)}
})
接下来就可以进行我们需要的业务逻辑了,本文主要描述登录的需求。在文首文末的开源项目里有完整认证逻辑参考的 js 文件
时序图理解
为了更好的理解登陆逻辑我们可以先来看看登录的 时序图
方案实现步骤
准备工作。我们需要准备两个表 一个是用户信息表,一个是 小程序码状态表 也就是存放 scene值 的表,当然,这个表在认证成功之后需要关联用户id,来告知前端认证用户的信息。
小程序码状态表为 status 扫码状态、scene场景值
1、获取小程序码时,在后台数据库创建一条数据,并返回scene值。
2、之后网站端根据 scene值 轮询 该条数据的认证状态。用扫码状态作为是否继续轮询的依据
3、扫码进入后更新扫码状态为 正在扫码
4、用户点击认证或者取消认证,更改扫码状态为对应的内容。当web端获取到的 状态为 取消认证或已认证时,即可结束轮询。已认证将在修改状态之前先插入用户信息。
5、如果是已认证,该项数据将会携带userid,web端可以根据userid查询到认证用户的信息。
6、为了避免造成资源的浪费和数据库垃圾信息。在已认证或取消认证后应该删除有关信息
这些操作的接口我都已经在
github:
https://github.com/Durancer/wx-login-based-on-miniapp.git
gitee:
Wx-login-based-on-miniapp: 基于 springboot 实现微信扫描小程序码登录,获取用户微信信息
做好了封装,有不理解的地方可以到 github、gitee 上提 issue,
如果觉得本文和项目项目有帮助的话,欢迎大家star项目。
最后可以看看我的开源项目: i集大校园
开源地址:GitHub – Durancer/JMU-Campus: i集大校园软件服务端,基于SpringCloud Alibaba 微服务组件及部分分布式技术实现服务之间关联及协作进行前后端分离项目实现。计划实现微信小程序和app两端同步。
使用技术栈为:Spring Boot、Spring Cloud Alibaba、rabbitMQ、JWT、minIO、mysql、redis、ES、docker
前端使用 微信小程序编写。
欢迎一起参加贡献和star项目哈!