Spring Boot 超详细整合实现微信扫码登录(环境配置篇)

小七学习网,助您升职加薪,遇问题可联系:客服微信【1601371900】 备注:来自网站

前一段时间在接入微信扫码登录这块,安排给部门的同事来开发此功能竟然发现久久不能完成。结果发现原来是卡在微信回调接口内网不能访问以及参数配置方面。而且多余的代码很多,后期维护不易。 环境配置还是很重要的…

前一段时间在接入微信扫码登录这块,安排给部门的同事来开发此功能竟然发现久久不能完成。结果发现原来是卡在微信回调接口内网不能访问以及参数配置方面。而且多余的代码很多,后期维护不易。

环境配置还是很重要的,其他博客文章说的点很少不够全对新手不友好,这里我从头梳理一遍整个的流程以及常见的踩坑点。做到能按照此流程顺利完成接口对接,因此此文章内容我尽量做到句句是重点。

本文主要让你学会微信开发前完成所有准备工作,以及常见的踩坑点,能让你按照本文的流程完成环境配置工作,节约因为首次接入而浪费过多的时间。提升工作效率。后续实际代码篇会免费分享给部分订阅此环境配置篇的读者。

本文内容将涉及如下:

  • 微信开发接入前须知
  • 内网击穿工具 natapp 的配置使用(让微信能访问你内网的回调接口)
  • 微信公众号测试号的正确配置
  • 微信公众号(微信认证)的正确配置
  • 解决 redirectUrl 与后台不一致,scope 权限 code 失效,业务域名等问题


微信开发接入前须知

首先,我们先弄明白在开发前我们要准备哪些核心东西:

  • 线上服务器/本地配置内网击穿
  • Nginx/Tomcat 等应用服务器一台
  • 微信公众号(认证)/微信测试号
  • 一台电脑 + 一个程序员

然后,简单解释一下为什么要用公众号扫码授权登录。

  • 一般公司在接入微信相关接口的时候都会使用微信公众号的。
  • 公司未来的运营,产品的推销,宣传推文等等都会用的到。
  • 微信小程序都是可以以微信公众号作为认证主体。这样不需要额外付费。
  • 网站应用扫码登录也是要额外收费 300 的。

最后,建议申请公众号的时候让你们公司技术经理或者其他相关负责人来走整个流程。

因为,之前就遇到一个同事自己申请注册结果不小心把公众号的名称其中的一个字打错了,然后再重新认证的时候自己腰包套了 300 块钱,因为公众号重新认证是需求再次付费的。

内网击穿工具 NATAPP 的配置使用(让微信能访问你内网的回调接口)

首先,内网击穿的工具有很多,比如某生壳、某米球等等,这里不打广告,只是以我个人常用的感觉比较好用免费的一种内网击穿工具介绍和教学。

我们点击进入 NATAPP 官网 完成注册之后,进入我的隧道。

在这里插入图片描述

紧接着,我们进入配置模块中,这里其实很直观的显示各配置项,其实就是类似我们 Nginx 代理功能。

在这里插入图片描述

然后,一般我们开发中都对我们的 Web 服务用 Nginx 做过端口代理的,所以这里我们配置 80 端口就行了。最后我们下载一下 NATAPP 的客户端直接启动,按照新手图文教程里面正常启动 NATAPP。

在这里插入图片描述

最后,当我们启动的时候看到这个界面,那么恭喜你,你的内网击穿已经配置成功了,如果你的 80 端口有服务挂载着,那么你就可以在外网中输入红框中的地址正常访问你本地的项目或者接口了。

在这里插入图片描述

微信公众号测试号的正确配置

首先我们要找到微信公众号测试号地址,如果有公众号的按照下图就可以进入,扫码登录就可以了。

在这里插入图片描述

其次,如果没有公众号的,我们直接点击进入微信公众号测试号地址,拿到我们后面开发要用到的 AppId 和 AppSecrect。

在这里插入图片描述

紧接着,我们需要配置测试号的接口配置信息(与下文正式公众号服务器 Url 配置同理),记住这里的 URL 就是你后端对应的 GET 验签的请求接口(此接口会在后续代码开发篇细说),而且是必须要外网可以访问到的(这也就是为什么上面首先要配置内网击穿 )。

在这里插入图片描述

最后,我们把网页授权获取用户基本信息的域名(此域名就可以填写上文配置的内网击穿的域名地址)即可。到此为止我们的测试公众号环境就配置好了,可以安心用测试号的 AppId 和 AppSecrect 去进入代码编写环节了。

微信公众号(微信认证)的正确配置

首先,我们的微信公众号必须是完成了微信认证的,我们先拿到基本的 AppId 和 AppSecrect,而 AppSecret 在显示的时候我们就要复制保存好,不然就看不到了只能再让管理员扫码重置 AppSecret 。

在这里插入图片描述

紧接着,我们看下面这张截图就是微信公众号开发者设置模块,与上文测试公众号类似,然后我们还需要配置下方的服务器配置,配置这块的作用也就是让我们对微信的访问正常验签响应,记得这里的 URL 就是你后端对应的 GET 验签的请求接口,而且是必须要外网可以访问到的(这也就是为什么上面首先要配置内网击穿),不然服务器配置这块就一直通不过的。令牌(Token)的作用就是跟你自己后端配置的 Token 保持一直就可以了,这里后续代码篇会具体说明如何去使用此 Token 的。

在这里插入图片描述

然后我们配置一下 IP 白名单这里,很多小伙伴这块配置的时候 添加了自己内网的什么 192.168.1.xxx 之类的,这个是不正确的,那只是交换机路由器给我们局域网电脑自动分配的 P,我们在在线 P 查询的网站查到正确的 P 添加即可。

在这里插入图片描述

在这里插入图片描述

最后,就是配置我们正式公众号的网页授权获取用户基本信息的域名地址(此域名就可以填写上文配置的内网击穿的域名地址)了,与上面测试账号不同的是,测试号的域名不会进行安全效验,而正式的域名微信服务器会做安全验证。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

最后,我们在填写域名的时候看到下面红色的提示信息,不要慌,我们只需要把上面的 txt 文件下载下来,放到我们本地或者线上的 Nginx/Tomcat 代理 80 端口项目的文件夹下就可以了,确保我们在地址栏输入:

http: 内网击穿的地址/MP_verify_ZwZTGfGB5cL1vjkQ.txt

然后可以正常下载这个文件那就成功了。至此我们的正式公众号的环境配置就完成了。

解决 redirectUrl 与后台不一致,scope 权限 code 失效,业务域名等问题

redirectUrl 与后台不一致原因剖析:

  • 一般可能是后台代码中配置的 redirectUrl 中的域名,与正式/测试公众号网页授权获取用户基本信息配置的域名不一致。
  • 有可能开发的时候,内网击穿的域名发生了变化导致与配置的 redirectUrl 不一致。
  • 可能是测试公众号,授权地址填写的域名加了 http 前戳导致的。
  • code 失效可能是因为二次使用,或者过期了。

scope 权限 code 失效,业务域名问题原因剖析:

  • scope 权限问题,可能是正式微信公众号没有认证,
  • 我们后续扫码登录 scope 权限设置为 snsapi_userinfo 即可。
  • 业务域名其实上文也提到了,就是在我们内网击穿代理的本地或者是线上服务器的 Nginx/Tomcat 80 端口文件夹下放入微信让下载的 txt 文件,并且我们能够 域名/文件全称 能够正常 GET 请求能下载到该文件就可以了。

补充说明

其实整个的一个环境配置就是这样一个过程,为了照顾部分小白,所以文章基本没有跳过任何必要环节,这里很多读者或许有疑问授权接口到底是怎么样的,那个接口该如何写如何接入如何验签和响应微信请求,Token 如何去在代码里配置和使用,回调接口在哪里配置,回调接口的作用是什么,怎么保证授权获取 code 的一次有效性和过期时间,系统怎么获取微信用户扫码成功授权的状态,如果微信用户没有绑定平台用户过怎么在注册和登陆的时候绑定等等问题。后续实际代码篇会详细说明。

小七学习网,助您升职加薪,遇问题可联系:客服微信【1601371900】 备注:来自网站

免责声明: 1、本站信息来自网络,版权争议与本站无关 2、本站所有主题由该帖子作者发表,该帖子作者与本站享有帖子相关版权 3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和本站的同意 4、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责 5、用户所发布的一切软件的解密分析文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 6、您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 7、请支持正版软件、得到更好的正版服务。 8、如有侵权请立即告知本站(邮箱:1099252741@qq.com,备用微信:1099252741),本站将及时予与删除 9、本站所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章和视频仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。