前言
前段时间，项目对旧版的微信公众号进行改版，需要对部分页面进行微信授权，我们的网页授权通过前后端进行，前端负责发起请求和调用后台接口，后台负责获取微信端的回调以及提供前端所需的接口。整个微信授权完成了，期间磕磕碰碰，踩了不少的坑，因此总结和梳理一下整个微信授权流程的前端工作。
1. 微信授权的整体流程
2. 微信授权开发过程
2.1 获取微信公众号的AppID和AppSecret
每个公众号都有对应的AppID和AppSecret，可以登录微信公众平台 -> 基本配置中的开发者ID可以查看到。当然，这对应的是生产环境，对于那些关注的人数较多的公众号来说，是不会用这个ID来进行测试的。因此，微信公众平台还提供了相应的测试账号。可以通过开发者工具 -> 公众平台测试账号进入（根据不同微信号可以在同一个公众号中建立不同的测试账号）。
如上图所示，在个人测试号中同样具有appID和appSecret，因此可以使用这个测试号信息进行开发和测试。以下的过程都是针对测试号，生产号的配置基本相同。
2.2 配置授权回调的页面
在JS接口安全域名中，点击修改来设置网页的域名。安全域名只需要填写域名或IP地址即可，不需要添加http，如www.xxxx.com或127.0.0.1，则在该域名下的页面都能够得到授权，而相关的二级或三级域名（aaa.xxxx.com）则无法获得授权。
注 若填写时增加了协议，如 http://www.xxxx.com 或 http://127.0.0.1，页面同样可以获得授权，但是会带来一些未知的状况，如用户请求微信二次分享时，分享出来的描述和图片无法正确显示。
当填写的网址通过了微信公众平台的安全监测时，即说明该域名已经配置成功了。
2.3 用户授权并获取code
想要对用户进行授权，其实就是让用户进入下面的授权链接：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect微信的授权链接有几部分组成，appid、rediect_uri、response_type、scope、state和wechat_redirect，这几个参数的传值，在微信的开发文档上都有，现在附上，并添加一些需要注意的地方：
通过以上参数可以拼接出需要授权访问的页面链接，如下测试链接：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1234567890&redirect_uri=http://www.xxxx.com&response_type=code&scope=snsapi_userinfo
&state=abcd#wechat_redirect当用户点击该链接的时候，微信会弹出授权页面，当用户确认授权后，微信会回调一个http://www.xxxx.com?code=12334566778&state=abcd的页面，在该页面中code是微信返回的一串字符串，且使用一次后即失效。
2.4 使用code换取access_token
access_token是调用微信用户信息的凭证，微信回调的URL地址中带有code参数，通过code可以换取access_token。处于安全的考虑，前端使用code请求access_token容易被窃取，因此前端可以通过截取URL中的code参数值转发给后台，从后台发起请求来获取需要的信息，此处不再赘述请求access_token的过程，相关的步骤可以查看微信的开发文档。
此处附上微信测试号获取access_token的过程：
微信公众平台开发者文档 -> 接口在线调试，如图所示：
接口调试页面如图所示：
填写自己的测试号appid和secret就可以获取access_token，通过access_token可以配置公众号的菜单等，当然，这个是用于测试号的调试和配置，与正式环境的公众号菜单的配置方式不同，正式环境的图形化界面更加简洁方便。
至此，前端获取微信授权后的用户信息的过程就基本完成，当后台获取到了用户的基本信息后，传值返回前端，用来作信息的展示；也可以通过获取的用户openid与自己公众号的粉丝ID进行绑定，来实现更多的功能。