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

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

需求及背景：

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

其他知识点，还待开发~

参考地址：微信开放文档

微信公众号网页开发逻辑梳理相关推荐

前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...
微信公众号网页开发——实用真机调试
前言微信公众号网页开发的真机调试一直是很头疼的事情. 原因一微信公众号配置的JS安全域名只有三个,一个大中型的公众号这三个JS安全域名都是生产的域名,不可能预留域名用于开发和调试. 原因二在微信 ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
php公众号开发配置网页域名,微信公众号网页开发授权配置流程
1.配置 1.1 公众号配置 1.2 开发者账号配置选择开发者工具->web开发者工具->绑定开发者微信账号. 1.3 开发域名配置选择公众号设置->功能设置,根据需求设置:业务 ...
微信公众号网页开发：播放视频，在列表中滑动会脱离文档流
项目场景: antd移动端端开发微信公众号移动端网页开发问题描述: video-react有问题,在跑马灯中第一次白屏,在列表中滑动会脱离文档流原因分析: 未知解决方案: 直接上代码 < ...
有关于微信公众号网页开发的流程（自己的看法）
微信官方文档 (真的很详细) 第一步: 网页授权回调域名网页服务内容这个网页回调域名是非常关键的,后面会讲解这个回调的域名的使用,回调字面意思就是会跳转的. 第二步: 使用微信官方的api进行co ...
企业微信公众号网页开发之引入高德地图API
test.jsp 页面文件 WxController.java 后端Controller层代码 WxService.java 后端Service层代码 WxDao.java 后端Dao层代码一.JS ...
vue3+vant开发微信公众号网页爬坑不完全指北
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言 8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移 ...
解决微信公众号网页a链接来回点击失效
在微信公众号网页开发的时候我在一个页面设置了多个a链接来回切换页面发现了一个问题就是来回切换页面的时候切换几次就会卡死,不让页面进行跳转后来发现在页面加上一个随机参数即可解决这个问题可能是微信对 ...

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

微信公众号网页开发逻辑梳理相关推荐

最新文章

热门文章