本篇博客讲解的网页授权只需要前端传递一个backUrl(回调地址) 到后台接口，后台接口会完成整个授权流程，无需前端做更多工作；
一. 前言
微信公众号开发，需要用到网页授权获取用户信息,通过OAuth2.0网页授权机制，来获取用户基本信息，进而实现自己的业务逻辑。（前提条件：公众号为服务号，且通过认证）,我的项目开发就是已认证的服务号，写这篇文章的目的是因为刚接触微信开发的小白对微信授权的文档说明很模糊，但是你只要认真阅读我写的这篇文章，按照我下面提供的授权接口完整走一遍，你就明白了授权实现的4个步骤。以及如何实现微信公众号网页授权获取用户信息。
微信网页授权api接口说明参考：https://mp./wiki/4/9ac2e7b1f1d22e9e57260f6553822520.html
注意：“获取用户基本信息接口是在用户和公众号产生消息交互时才能根据用户OpenId获取用户基本信息；而网页授权的方式获取用户基本信息，无需消息交互，只是用户进入到公众号的网页，就可弹出请求用户授权的界面，用户授权后，就可获得其基本信息（此过程甚至不需要用户已经关注公众号。）”；
二. 网页授权前基本配置
2.1 项目架构
项目基础架构： Spring+SpringMVC+Mybatis（SSM架构）
2.2 内网穿透
做微信开发的应该都知道，微信开发调试需要把本地127.0.0.1通过内网穿透，映射到外网中去，这样才可以正常的通过外网与腾讯的微信服务器进行通讯，开发调试；关于内网穿透的工具有很多，详细可以查看：可以实现内网穿透的几款工具，我个人比较推荐Natapp，我使用的是Natapp，Natapp官网地址：/，Natapp开启成功如下图所示：
2.3 设置授权网页回调域名
在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发——接口权限——网页服务——网页授权——点击修改——功能设置——网页授权域名——点击设置按钮”，填写授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；
2.4 关于填写域名规范
授权回调域名配置规范为全域名，比如需要网页授权的域名为：，配置回调域名以后，此域名下面的页面/music.html 、 /login.html 都可以进行OAuth2.0鉴权。但是像这些域名： 、 、 等等是无法进行OAuth2.0鉴权。
2.5 设置授权文件到web服务器根目录
在上一步填写完域名后，注意很重要的一步：将以下文件上传至填写域名或路径指向的web服务器（或虚拟主机）的目录（若填写域名，将文件放置在域名根目录下，例如/MP_verify_x6qyHYovfWrZHcfo.txt；若填写路径，将文件放置在路径目录下，例如/mp/MP_verify_x6qyHYovfWrZHcfo.txt），并确保可以访问。这里我放置所部属项目的Tomcat服务器的webapp下面的Root目录下面，如果放置位置不正确或者跳过此不，点击保存按钮会无法通过，切记，如果你的项目是基于SpringBoot架构的，那么jar包部署的话无需外部Tomcat配置，这时候将授权文件txt放置SpringBoot项目的resources目录下的static目录下，然后注意如果使用了Shiro框架，注意放行对授权文件的拦截访问即可；
三. 关于网页授权的两种scope的区别说明
以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页 的。用户感知的就是直接进入了回调页（往往是业务页面） 以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权会产生一个授权页面，需要用户手动同意，在用户同意后，就可以通过获取用户基本信息的接口获取该用户的基本信息。 如用户的openid，昵称，性别，头像，所在地等。我们需要获取用户信息，这里选择以snsapi_userinfo为scope发起的网页授权
四. 网页授权流程分为四步
引导用户进入授权页面或打开授权链接同意授权，获取code 通过code换取网页授权access_token（与基础支持中的access_token不同） 如果需要，开发者可以刷新网页授权access_token，避免过期 通过网页授权access_token和openid获取用户基本信息以上4步，请详细阅读微信官方网页授权文档：https://mp./wiki/4/9ac2e7b1f1d22e9e57260f6553822520.html，这里你不在累赘
五. 封装网页授权接口
5.1引入微信SDK依赖
<!-- 微信框架 参考：/Wechat-Group/weixin-java-tools --><dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>3.0.0</version></dependency>
5.2封装网页授权接口
/*** @ClassName: WxMpOAuthController* @Description: 微信网页授权* @author cao_wencao* @date 7月4日 下午1:27:58*/@RestController@RequestMapping("/wechat/oauth")public class WxMpOAuthController extends BaseController {@Autowiredprivate WxMpService wxMpService;@Autowiredprivate FollowService followService;@GetMapping("/oauthInfo")public void authorize(HttpServletRequest request, HttpServletResponse response) throws Exception {String backUrl = request.getParameter("backUrl");backUrl = URLEncoder.encode(backUrl, "UTF-8");String host = request.getRequestURL().toString();host = host.replaceAll("/oauthInfo", "/getInfo") + "?backUrl=" + backUrl;// String redirect_uri = URLEncoder.encode(host, "UTF-8");// 构建授权URL，方法内会自动encodeString redirectUri = wxMpService.oauth2buildAuthorizationUrl(host, WxConsts.OAuth2Scope.SNSAPI_USERINFO, "1");logger.info("redirectUri地址={}", redirectUri);// 日志response.sendRedirect(redirectUri);}@GetMapping("/getInfo")public void getInfo(HttpServletRequest request, HttpServletResponse response) throws Exception {String backUrl = "";String code = request.getParameter("code");backUrl = request.getParameter("backUrl");backUrl = URLDecoder.decode(backUrl, "UTF-8");// 通过code换取access tokenWxMpOAuth2AccessToken wxMpOAuth2AccessToken = new WxMpOAuth2AccessToken();String openId = null;try {wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code);// 获取openIdopenId = wxMpOAuth2AccessToken.getOpenId();logger.info("openId={}", openId);// 通过access_token和openid拉取用户String lang = "zh_CN";WxMpUser wxMpUser = this.wxMpService.oauth2getUserInfo(wxMpOAuth2AccessToken, lang);// TODO 操作保存用户信息到数据库Follow follow = followService.findFollowByOpenId(openId);if (null == follow && null != wxMpUser) {// 保存授权拿到的用户信息followService.saveOauthFollowInfo(wxMpUser);}logger.info("网页授权获取用户信息 ：" + wxMpUser.toString());Map<String, Object> params = HttpTools.getUrlParamMap(HttpTools.getUrlParam(backUrl));params.put("curoauth", openId); // 重新组装参数String baseUrl = HttpTools.getUrlBase(backUrl);backUrl = baseUrl + "?" + HttpTools.getUrlParamsByMap(params);logger.info("链接微信授权成功 结束======" + backUrl);}catch (WxErrorException e) {logger.error("【微信网页授权】{}", e.getMessage());throw new RuntimeException("网页授权失败！");}response.sendRedirect(backUrl);}}
5.3新建TestController，跳转至网页授权回调地址页面
创建一个TestController，为了方便测试跳转至网页授权调转回调地址的页面上，通过SpringMVC后端来跳转。
import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import me.chanjar.weixin.mp.api.WxMpService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import mon.collect.Maps;@Controller("mobile/TestController")@RequestMapping(value = "/mobile/test")public class TestController extends BaseController {@Autowiredprivate WxMpService wxMpService;@RequestMapping(value = {"/testOauth"})public String testOauth(HttpServletRequest request, HttpServletResponse response, Model model) {String openid = (String) request.getSession().getAttribute("openid");model.addAttribute("openid", openid);return "mobile/modules/app/testOauth";}}
5.4新建一个测试的jsp, testOauth.jsp，供后端testOauth方法跳转
<%@ page contentType="text/html;charset=UTF-8" %><html><head><title>微信公众号网页授权测试</title></head><body><div class="wrap"><div class="header"><a><i class="icon-chevron-left"></i></a><h3>标题</h3><a></a></div><div class="box bg-grey"><div class="content"><h5>粉丝 openid ：${openid}</h5> <br>openid : <input type="text" name="openid" value="${openid}"/></div></div></div></body><script>$(function () {loadOauthInfo();});//网页授权function loadOauthInfo() {var openid = GetUrlParam('curoauth');if (openid != "") {alert(openid);return;}alert('我要授权');var backUrl = window.location.href;alert(backUrl);//跳转至授权页面var oauthUrl = "http://mywx./greenwx/wechat/oauth/oauthInfo";window.location.href = oauthUrl + "?backUrl=" + backUrl;alert('授权完啦' + ${openid});}//获取后端返回参数function GetUrlParam(paraName) {var url = document.location.toString();var arrObj = url.split("?");if (arrObj.length > 1) {var arrPara = arrObj[1].split("&");var arr;for (var i = 0; i < arrPara.length; i++) {arr = arrPara[i].split("=");if (arr != null && arr[0] == paraName) {return arr[1];}}return "";} else {return "";}}</script></html>
5.5. 测试网页授权
我的项目名叫greenwx,内网穿透域名是，所以，这里访问地址是：/greenwx//mobile/test/testOauth
启动项目，在你的公众号中访问controller的这个地址“/greenwx//mobile/test/testOauth”当你在公众号中点击这个地址时，jsp中的js代码就会触发网页授权操作，就会弹出网页授权界面，这时候结合公众号就可以看到网页授权获取的用户信息了，这时网页授权获取用户信息就成功了；
