微信扫码登录1. 使用背景

如今开发业务系统,已不是一个单独的系统。往往需要同多个不同系统相互调用,甚至有时还需要跟微信,钉钉,飞书这样平台对接。目前我开发的部分业务系统,已经完成微信公众平台对接。作为知识总结,接下来,我们探讨下对接微信公众平台的一小部分功能,微信扫码登录。其中的关键点是获取openid。我仔细查找了微信提供的开发文档,主要有以下三个方式可实现。

通过微信公众平台生成带参数的二维通过微信公众平台微信网页授权登录通过微信开发平台微信登录功能2. 开发环境搭建2.1 内网穿透

微信所有的接口访问,都要求使用域名。但多数开发者是没有域名,给很多开发者测试带来了麻烦。不过有以下两种方案可以尝试:

使用公司域名,让公司管理员配置一个子域名指向你公司公网的一个ip的80端口。然后通过Nginx或者通过nat命令,将改域名定位到您的开发环境使用内网穿透工具,目前市面有很多都可以使用免费的隧道。不过就是不稳定,不支持指定固定子域名或者已经被微信限制访问。经过我大量收集资料,发现钉钉开发平台提供的内网穿透工具,比较不错。用阿里的东西来对接微信东西,想想都为微信感到耻辱。你微信不为开发者提供便利,就让对手来实现。

那钉钉的内网穿透工具具体怎么使用用的呢?

首先使用git下载钉钉内网穿透工具,下载好后找到windows_64目录,在这里新建一个start.bat文件,内容为

ding -config=ding.cfg -subdomain=pro 8080

其中-subdomain 是用来生成子域名8080表示隐射本地8080端口双击start.bat文件,最终启动成功界面如下

经过我测试,这个相当稳定,并且可以指定静态子域名。简直就是业界良心

2.2 公众号测试环境

访问公众平台测试账号系统,可以通过微信登录,可快速得到一个测试账号。然后我们需要以下两个配置

接口配置信息

在点击提交按钮时,微信服务器会验证我们配置的这个URL是否有效。这个URL有两个用途

通过签名验证地址是否有效接收微信推送的信息,比如用户扫码后通知

签名生成逻辑是用配置的token结合微信回传的timestamp,nonce,通过字符串数组排序形成新的字符串,做SHA签名,再将签名后的二进制数组转换成十六进制字符串。最终的内容就是具体的签名信息。对应的java代码如下

// author: herbert 公众号:小院不小 20230424public static String getSignature(String token, String timestamp, String nonce) {String[] array = new String[] { token, timestamp, nonce };Arrays.sort(array);StringBuffer sb = new StringBuffer();for (String str : array) {sb.append(str);}try {MessageDigest md = MessageDigest.getInstance("SHA-1");md.update(sb.toString().getBytes());byte[] digest = md.digest();StringBuffer hexStr = new StringBuffer();String shaHex = "";for (int i = 0; i < digest.length; i++) {shaHex = Integer.toHexString(digest[i] & 0xFF);if (shaHex.length() < 2) {hexStr.append(0);}hexStr.append(shaHex);}return hexStr.toString();} catch (NoSuchAlgorithmException e) {logger.error("获取签名信息失败", e.getCause());}return "";}

对应GET请求代码如下

// author: herbert 公众号:小院不小 20230424protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {logger.info("微信在配置服务器传递验证参数");Map reqParam = request.getParameterMap();for (String key : reqParam.keySet()) {logger.info(" {} = {}", key, reqParam.get(key));}String signature = request.getParameter("signature");String echostr = request.getParameter("echostr");String timestamp = request.getParameter("timestamp");String nonce = request.getParameter("nonce");String buildSign = WeixinUtils.getSignature(TOKEN, timestamp, nonce);logger.info("服务器生成签名信息:{}", buildSign);if (buildSign.equals(signature)) {response.getWriter().write(echostr);logger.info("服务生成签名与微信服务器生成签名相等,验证成功");return;}}

微信服务器验证规则是原样返回echostr,如果觉得签名麻烦,直接返回echostr也是可以的。

JS接口安全域名

这个配置主要用途是解决H5与微信JSSDK集成。微信必须要求指定的域名下,才能调用JSSDK

3. 测试项目搭建

为了测试扫码登录效果,我们需要搭建一个简单的maven工程。工程中具体文件目录如下

用户扫描二维码得到对应的openid,然后在userdata.json文件中,根据openid查找对应的用户。找到了,就把用户信息写入缓存。没找到,就提醒用户绑定业务账号信息。前端通过定时轮询,从服务缓存中查找对应扫码的用户信息

userdata.json文件中的内容如下

[{"userName": "张三","password":"1234","userId": "000001","note": "扫码登录","openId": ""}]

从代码可以知道,后端提供了5个Servlet,其作用分别是

WeixinMsgEventServlet 完成微信服务器验证,接收微信推送消息。WeixinQrCodeServlet 完成带参数二维码生成,以及完成登录轮询接口WeixinBindServlet 完成业务信息与用户openid绑定操作WeixinWebQrCodeServlet 完成网页授权登录的二维码生成WeixinRedirectServlet 完成网页授权接收微信重定向回传参数

需要调用微信接口信息如下

// author: herbert 公众号小院不小 20230424private static final String ACCESS_TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}";private static final String QRCODE_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token={0}";private static final String QRCODE_SRC_URL = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket={0}";private static final String STENDTEMPLATE_URL = "https://api.weixin.qq.com/cgi-bin/message/template/send?access_token={0}";private static final String WEB_AUTH_URL = "https://open.weixin.qq.com/connect/oauth2/authorize?appid={0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect";private static final String WEB_AUTH_TOKEN_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={0}&secret={1}&code={2}&grant_type=authorization_code";

前端对应的三个页面分别是

login.html 用于展现登录的二维码,以及实现轮询逻辑index.html 用于登录成功后,显示用户信息weixinbind.html 用于用户绑定业务信息

最终实现的效果如下

已绑定openid直接跳转到首页

未绑定用户,在手机到会收到邀请微信绑定


比丘资源网 » 微信扫码登录

发表回复

提供最优质的资源集合

立即查看 了解详情