微信公众号网页开发逻辑梳理

近日，有微信公众号网页开发的需求，去了解了下相关开发知识，以个人理解梳理如下。

需求及背景：

1、公司会在运营平台发布会员可见的内容。会员指在saas平台有手机号的账户。

2、公众号菜单会有直链到1内容的链接。

3、如果访问用户未绑定saas平台的账户，跳转登录页进行绑定。如果绑定，正常访问。

4、登录只第一次访问发生，下次访问自动识别访问。

5、登录需要为无感知登录。

以上为第一期需求。

其实这个需求还是蛮清晰简单的。关键是对微信用户信息进行识别，判断用户是否已经saas平台绑定了用户信息（openid）。

梳理流程图如下：

借一张来自知乎的图，更能说明整个流程。

关于以上需求涉及到的知识点其实不多，主要是网页授权。解析如下：

 网页授权中存在一条逻辑链条。

1、引导用户进入授权页面同意授权，获取code

2、通过code换取网页授权access_token（与基础支持中的access_token不同）

3、如果需要，开发者可以刷新网页授权access_token，避免过期

4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

回调域名REDIRECT_URI

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

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

3、如果公众号登录授权给了第三方开发者来进行管理，则不必做任何设置，由第三方代替公众号实现网页授权即可

scope

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

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

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

获取code

在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：

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

尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问

该环节必须在微信客户端进行获取。在回调页面中的url中获取code。

这里如果回调页面为前端页面，可以记录用户访问的页面url。

如果回调页面为后端接口，增加了code的隐秘性，但无法跳转到进入时的页面。

通过code换取网页授权access_token

这个环节基本上是在服务端完成的，因为这个环节需要appid,secret,code,grant_type。其中secret为公众号的appsecret，是非常秘密的信息，作为微信官方都不做存储，如果遗忘，只能重置解决。

请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

正确时返回的JSON数据包如下：

{
  "access_token":"ACCESS_TOKEN",//网页授权接口调用凭证
  "expires_in":7200,//access_token有效期
  "refresh_token":"REFRESH_TOKEN",//用户刷新access_token
  "openid":"OPENID",
  "scope":"SCOPE" 
}

refresh_token

用于刷新access_token（如果需要），由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。

获取第二步的refresh_token后，请求以下链接获取access_token：

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

其他知识点，还待开发~

参考地址：微信开放文档