微信公众号网页授权开发详解

 

在最近的一次项目中遇到微信公众号开发，然后第一次接触，相对来说还是走了不少弯路

先看看总的开发流程吧 ，

首先看官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
这是关于网页授权开发的官方文档

关于网页授权的准备说明

1.在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头

2.授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。

关于网页授权的两种scope的区别说明

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。

关于网页授权access_token和普通access_token的区别

1、微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息；

2、其他微信接口，需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。

第一步：用户同意授权，获取code

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

这个获取code 由前端通过用户点击自定义菜单按钮跳转路径 获取code

第二步：通过code换取网页授权access_token，openid

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

@Login
@PostMapping ("getOpenId")
@ApiOperation (value = "获取用户openid")
@ApiImplicitParams (
      {
          @ApiImplicitParam (name = "code", value = "用户授权凭证票据", required = true, dataType = "String", paramType = "query")
      }
    )
    public Object getOpenId(String code) throws IOException {
        List<Object> lists = new ArrayList<> ();
        String Appid = "XXXXXXXXX";
        WxPublicPlatform wxPublicPlatform = wxPublicPlatformService.getAppId (Appid);
          if (wxPublicPlatform != null){
              CloseableHttpClient httpClient = HttpClients.createDefault ();
              String url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code".replaceAll ("APPID",wxPublicPlatform.getAppId ()).replaceAll ("SECRET",wxPublicPlatform.getAppSecret ()).replaceAll ("CODE",code);
               HttpPost post = new HttpPost (url);
               CloseableHttpResponse response = httpClient.execute (post);
               String string = EntityUtils.toString (response.getEntity ());
               JSONObject jsonObject = JSONObject.parseObject (string);
               response.close ();
               httpClient.close ();
               if (jsonObject.size () == 2){
                     return R.error (-1,string);
                  }
                  openId = jsonObject.get ("openid").toString ();
            }
        return R.ok().put("lists",openId );
    }

将openid返回给前端，前端进行其他接口请求，或获得Openid 在后端内部处理

总结：

与前端调试耗时较长，

首先是因为第一次做这个，前端也是第一次做，

第二是因为这个要通过微信服务器授权，线下调试不方便，不好快速寻找到问题

相信有了这次总结下次能快速些