微信网页授权

简介

近来，尝试进行微信方面的开发，做一些简单的小应用，比如：使用SpringBoot + MySQL + Nginx + Redis开发微信点餐系统——类似于CoCo店面内，用微信扫码下单的功能！

 

0、何为网页授权

 

网页授权可以让开发者获取用户的基本信息，然后开发者根据这些信息来标记特定用户。当用户使用微信扫码下单系统时，微信提交用户信息到开发者的数据库中，开发者根据微信提交的用户信息进行特定的数据处理，而后返回给用户微信的操作界面。

网页授权中，开发者需要获取的最重要的用户信息为：Openid，这是一个用户的唯一标识，不会重复。

 

实际开发中可以使用微信公众号来开发点餐系统——主要是使用公众号的网页授权功能、认证服务、支付功能。
 

在开发之前，一定要完整的阅读微信开放文档，了解完整的开发过程，否则.......无法使用微信提供的API，出现错误代码时，会完全找不到头绪。因为JAVA和C语言不太一样。

• C语言在Debug时，可以获取每一步所执行的代码；

• JAVA在Debug时，有些代码是不会出现在Debug界面。特别是使用JAVA进行Web开发时，这点表现得尤为明显；

因此，对于开发者来说，必须学会先阅读技术文档，再着手开始项目。微信开发文档链接：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

 

1、网页授权步骤

由于这仅是个人开发的项目，在没有服务号的情况下，只能够使用测试号开发——订阅号无法获取用户信息，即：无法完成网页授权功能。

切记！！！切记！！！

当初在这里踩坑，耗时1d才走出这个坑。说难也不难，唯一需要注意的就是：需要使用网络工具，让本机获取一个公网IP，否则无法调试本地的工程。可参考我使用的工具：natapp

（其中，NatApp资费12元/月，这对于学生党来说应该可以接受）

这就来说说网页授权的具体步骤：

1、公众号部分：

1.1、使用微信公众账号测试号：

因为只有已经认证的服务号才拥有网页授权（获取用户信息）的权限，订阅号是没有该权限的。微信提供了测试账号，可以进行网页授权。

测试号申请链接：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

 

1.2、配置测试账号：

1.2.1、接口配置信息：

配置完后，先别提交，因为SpringBoot工程中还没有进行Token验证，微信公众号需要通过“提交”按钮验证所填写外网服务器的正确性

（1）URL：外网的IP + 测试Token的URL

eg：http://xxx.natapp1.cc/sell/wechat/wx.do

（2）Token：可以随意填写，只要保证在SpringBoot工程中，测试代码使用的Token为此处填写的数值即可。

eg：chris

 

1.2.2、JS接口安全域名：

只填写外网服务器的域名即可，不需要填写http://、Https://

eg：xxx.natapp1.cc

 

1.2.3、测试号二维码：

直接使用微信扫描测试号的二维码，关注该测试号，用于查看自己微信的Openid。用于验证SpringBoot工程所获取的Openid是否正确。

 

1.2.4、网页服务->网页账号：

网页授权获取用户的基本信息。填写外网服务器的域名，不需要填写http://、Https://。

作用：

（1）当用户通过外网服务器访问微信公众号的web应用时，用户先访问到web应用。

（2）再由web应用到微信公众号进行授权，获取用户的Openid。

（3）其次，微信公众号需要有一个回调页面，把获取到的Openid等数据传回该回调页面，而这里填写的外网服务器域名就是该回调页面所在的服务器。

（4）最后，需要手工将用户请求中的redirect_uri参数和获取到的Openid拼接，然后微信公众平台会将页面跳转到指定的redirect_uri页面。
 

eg：跳转之后的页面URL：redirect_uri + Openid

http://sell.com/#/?openid=olGbLwMfCOJHBB-NYAfBMn6UqXXc

 

2、本机的SpringBoot工程:

2.1、进行Token验证：

（1）将附录一中的代码添加到SpringBoot工程中；

（2）直接运行SpringBoot工程；

（3）在微信公众号的接口信息配置界面（填写Token的地方），点击提交按钮，就可以通过验证。此时公众号配置已经完成。

 

2.2、获取Openid：

2.2.1、 配置Nginx：

位置：nginx/conf/nginx.conf

修改内容：修改server中的

（1）server_name: 之后微信公众号要跳转的域名。

（2）location/sell/：本地代码调试时，使用的链接。

proxy_pass http://SpringBoot工程所在机器的IP:端口/web应用的context_path

 

2.2.2、配置前端项目：

（1）修改前端源码的配置文件：

        修改build下的Url的sellUrl、OpenidUrl。

（2）重新编译：

        返回/opt/code/sell_fe_buyer/，使用npm run build编译

（3）将编译后的文件复制到原来的Nginx前端的根目录下：

        命令：cp -rdist/*

（Nginx不需要重启）

 

2.2.3、 SpringBoot工程添加获取Openid的代码：

将附录二的代码直接加入SpringBoot工程中即可。然后运行SpringBoot工程。

 

2.2.4、用户访问链接：

作用：测试是否能够实现页面跳转，并获取到Openid。

路径（URL）：外网服务器域名 + web应用中获取Openid的controller路径 +returnUrl。

可以将百度替换成自己的外网服务器中的web应用地址，就可以实现从微信客户端访问web应用。

eg：微信客户端访问链接，跳转到百度

（1）外网服务器域名：

http://xxx.natapp1.cc

（2）web应用中获取Openid的controller路径：

/自己的url路径

（3）returnUrl：

需要跳转到的路径

（4）拼接结果：

最终，用户在微信上点击的链接：http://公网IP/自己的url路径?returnUrl=跳转路径

（5）用户最终的访问页面为：百度

（6）该页面的URL：

跳转路径/?openid=用户的OpenID

 

 

附录：

附录一，提取码：oeea

附录二，提取码：a38s