浅析微信支付：微信公众号网页授权

1、开发前的准备

首先，如果没有看过本系列 浅析微信支付：开发前的准备 的朋友需要看一下这篇文章，链接在上方；本文需要用到开发前准备中的几个知识点：设置安全、设置白名单、得到公众号一系列信息（appid\apiKey等）；如果需要在本地开发测试，还需要下载 微信开发者工具和 微信公众平台接口测试帐号 。

下面我们开始进入开发阶段。

2、设置测试号相关信息

因为项目在开发阶段的时候，需要本地调试，所以需要使用测试号来验证代码是否正确，所以下面会讲如何设置测试号相关配置；

首先我们进入 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 页面，点击登录即可使用微信账号登录（一个微信号只有一个测试号）。

登录后可以进入测试号管理界面，如下：


按要求设置上方图片中的配置，即可减少80%的问题，如果调用时还有其他问题，请到文末添加作为微信，可进入讨论群和大家一起交流。

3、获取微信网页授权

使用以下代码获取微信网页授权：

微信官方js文件

封装的微信工具文件 weixin_util.js

调用微信config方法并获取网页授权

如果访问页面路径，得到以下显示，就已经成功获取网页授权，其他均为失败： 

如果出现其他错误，需要检查一下第一步时设置的路径安全接口、域名是否正确，开启weixinConfig中的debug模式，看是否为没有正确设置功能模块；如果还不能解决，请到文末看楼主上一篇文章或者添加作者进群即可。

4、获取微信用户信息

这里说一下上面获取用户授权的具体参数：

第一步，获取config需要的基础参数

第二部分：获取用户授权的基础信息

具体可见微信官方文档，文档如下：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

以上为js页面处理，下面我们来具体讲解 redirect_uri 这个接口中需要处理的逻辑；

WXAuthController

WXUtils

使用以上方法就可以得到微信用户的基础咯～，上面是作者已经封装好的sdk方法，具体的源码请见文末源码地址。

如果用户已经授权，第二次进入网页，这时候不需要再次授权，作者也提供了另一种获取用户信息的方法，通过access_token和openid请求获取用户信息，代码

结语

根据以上步骤实现，就可以完成微信授权-用户信息获取等操作

下载说明