微信中控网页授权的实现

╰半橙微兮° 2022-06-13 04:25 104阅读 0赞

大家都知道，微信公众号不同于企业微信（原企业号），一个公众号只有一个应用，只能配一个服务器地址。另一个不同就是，在刷新access\_token时，公众号的access\_token会更新，旧的会失效。因此，微信平台建议使用一个中控服务器来定时刷新access\_token，可以使用内存存储或持久化到数据库中。保证在有效时间内，所调用的token相同。

我做了一个微信中控的小应用，将所有公众号的消息及事件请求接收后，根据消息转发功能，转发到不同的业务系统中。由它定时获取access\_token，其它业务系统只有读取的接口，没有刷新的功能，这样保证各个系统在同一时间的access\_token都是有效的。

但对于微信网页授权时，一时找不到思路。后来从网上看了别人的解决思路，试着弄成功了（抱歉时间久远，已经不知道文章来源是哪了）。这里把我自己的实现方法分享给大家，大家如果有更好的思路，欢迎交流。

所谓网页授权，其实就是用户在微信浏览器中打开页面时，获取到当前登录微信的用户信息。

对于公众号而言，每个用户对应唯一的openId，这是根据某种算法生成的字符串，即便用户是否关注。

除了openId这最基本的信息以外，还包括昵称、性别、地区、头像等信息。

获取用户的信息，有这么几种方式：

• 用户关注某个公众号后，根据 API 获取用户 openId 列表，根据 openId 获取其它基本信息。

• 用户给公众号发送消息或触发事件，后台解析发送者的 openId ，根据 API 获取用户信息

• 网页授权只获取用户的 openId 或包括 openId 在内的基本信息

下面介绍微信中控如何接入网页授权的功能，比如我的中控地址为：http://dulinan.cn/wechatserver(真实的没有给提供)

1.接入网页授权

微信服务号平台地址：[https://mp.weixin.qq.com/][https_mp.weixin.qq.com]

登入后在 公众号设置->功能设置中，将中控地址填入

![Center][]

上面设置业务域名，可使得不出现安全提示（输入账号密码之类的）

上面设置JS接口安全域名，可在该域名下调用微信开放的JS接口

上面设置网页授权域名，防止与服务器地址不一致时出现redirect\_url错误

前两个可同时设置三个，每月修改三次，最后一个最多只能设置一个。三个要保证和服务器域名相同，通过ICP的备案验证，并.txt文件放根目录下

2.微信网页授权时序图（具体的代码将在后面介绍，方便大家理解）

在公众号直接接入业务系统时，时序图是这样的：

![Center 1][]

在公众号接入中控时，时序图是这样的：

![Center 2][]

时序图中的1、4、6需要开发者自行开发，2、3、5在中控中已处理好。

比如有个扫码获取门票的场景：

1）用户在填写预约信息后，点击预约，后台对预约信息进行保存，同时生成二维码并与此预约信息绑定作为门票进行。

2）用户扫码后，公众号对此用户发送预约成功的模版消息。

3）用户点击模版消息，跳转到验票页面。

其中第3步对应网页授权的点击链接那个环节。

实现步骤：

1.填写预约信息进行预约

![Center 3][]

2.生成二维码

![Center 4][]

3.用户扫码获取预约信息

![Center 5][]

4.点击链接进入验票页面

![Center 6][]

代码说明：

1.用户在点击场景3中的模版消息时，模版消息带着一个链接，链接地址为中控的地址的一个方法（这个地址是自平台生成《时序图那块》，直接由自平台发的模版消息），中控根据获取的appid,重定向地址（肯定是业务系统的地址），以及业务系统中的参数（比如这个例子是二维码的ticket），获取code值，并重定向到中控的另一个方法中。

2.另一个方法接收到code值、重定向地址，以及业务系统中的参数。带着code及业务系统中的参数，重定向到重定向地址中（比如叫a地址的b方法）

3.进入到业务系统的a地址的b方法后，它需要根据code获取网页授友的access\_token，这样带着code，进入到中控中，通过code获取网页授权的access\_token，获取到access\_token，就可以处理相应的业务了

[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[Center]: /images/20220613/7d1262d5eb4b4a0abf9a6414c4efe45a.png
[Center 1]: /images/20220613/27bc6a641f90427eba7134a46c301cb9.png
[Center 2]: /images/20220613/15528ff4c2fd47d592eafe462b7b0192.png
[Center 3]: /images/20220613/d785226a81f14d71a95edc32d26645f9.png
[Center 4]: /images/20220613/8de4631718384637b831b4f53671f1e3.png
[Center 5]: /images/20220613/568863a6849f4124952781fc1bc5a29a.png
[Center 6]: /images/20220613/32b3b16e12b3439999552c6ff758ee8e.png