用户标签管理
一个公众号里的用户可能是来自不同地方不同行业或者不同渠道,这时为了更方便的区分用户,需要把用户归类到不同的组里。
接口
获取用户标签管理的接口地址,修改server/wechat-lib/index.js
|
|
实现
创建标签
|
|
获取公众号已创建的标签
|
|
编辑标签
|
|
删除标签
|
|
获取标签下粉丝列表
|
|
批量为用户打标签/取消标签
unTag表示判断用户打标签还是为用户取消标签
|
|
获取用户身上的标签列表
|
|
#
接口
获取用户的接口地址,修改server/wechat-lib/index.js
|
|
实现
设置用户备注名
|
|
获取用户基本信息
|
|
批量获取用户基本信息
|
|
获取用户列表
|
|
测试
通过消息回复的形式来打印回复接口的信息。
修改代码server/middlewares/router.js
|
|
server/wechat/reply.js
|
|
测试获取用户列表fetchUserList,拿到openid,如图:
也可以测试获取用户基本信息等等其他功能,选择哪个功能修改const data = await client.handle('fetchUserList')
即可,这里不一一演示了。
自定义菜单
接口
获取自定义菜单接口地址,修改server/wechat-lib/index.js
|
|
实现
创建自定义菜单
|
|
查询自定义菜单
|
|
删除自定义菜单
|
|
创建个性化菜单
|
|
删除个性化菜单
|
|
获取自定义菜单配置
|
|
测试
创建菜单,新建server/wechat/menu.js
|
|
删除菜单需要取消关注公众号再重新关注,这样才生效。修改reply.js
|
|
测试成功,效果如图:
自定义菜单事件推送
用户可以通过菜单跟微信服务后台交互。修改menu.js
|
|
reply.js
|
|
测试点击菜单跳转链接时的事件推送和弹出系统拍照发图的事件推送成功,控制台打印message信息。效果如图:
微信网页开发
微信网页开发主要分两大部分,第一部分是微信网页授权(比如获取用户资料),第二部分是微信JS-SDK的接口调用。
SDK config接口注入权限认证,需要调用wx.confog()传入参数,其中参数signature很重要,它是服务器直接返回的,是权限认证时最重要的参数。生成签名之前必须先了解jsapi_ticket,它是公众号用于调用微信JS接口的临时票据。生成签名之前先要获取到access_token,再通过GET请求获得jsapi_ticket才能进行签名算法,最后生成签名。
存储ticket
存储ticket和存储token方式是一样的。
|
|
创建getTicket和saveTicket两个方法作为配置参数传给wechat构造函数生成实例,修改wechat/index.js
|
|
获取ticket
新增获取ticket的方法,修改wechat-lib/index.js
|
|
签名算法
生成签名,修改wechat-lib/index.js
|
|
签名算法,修改wechat-lib/util.js
|
|
把这些参数配置到网页上,这样就能够调用jsapi_ticket权限。
API封装,签名流程
新建server/api文件,用于封装底层数据交互的方法,做底层服务(包括数据操作),api下新建wechat.js用于微信相关的api调用。通过getWechat()
拿到实例
server/api/wechat.js
|
|
调用getAccessToken()
获取access_token,拿到token后调用getTicket(token)
获取ticket,调用sign(ticket, url)
,获取signature
|
|
新建server/controllers/wechat.js,放微信业务相关的控制逻辑
|
|
从浏览器端发送异步请求,拿到认证权限的参数,修改server/middlewares/router.js
|
|
测试页面
引入js文件,修改nuxt.config.js
|
|
pages/about.vue
|
|
利用vuex的管理机制获取ticket,store/index.js
|
|
获取ticket,store/action.js
|
|
store/service.js
|
|
生成签名流程:通过this.$store.dispatch()
派出去getWechatSignture
,触发store里的状态变更,去调用service发出当前网站目录下的signature请求,传入url作为参数,这个请求会被middlewares目录下router.js截获,把这个请求交给signature。在controllers/wechat.js里signature拿到传过来的参数url,调用生成签名的api.getSignatureAsync()
方法,把签名值以异步的形式返回给about页面。拿到signature
后通过wx.config()
注入权限验证,验证通过后可以做相关的业务操作。
测试通过,成功打印返回信息,如图:
微信网页授权机制
微信网页授权是基于OAuth2.0一套认证体系是完全独立的,不仅在微信中可以使用在其他网站也可以使用,比如微博、github或者自己的网站都可以集成这套机制,让用户手动同意之后会获取凭证,凭证会帮用户登录也会帮服务器获得用户的基本信息,它和全局票据access_token完全不一样,只是名字一样其他的都不一样。另外,官方虽然提供了access_token的刷新机制,但是如果不是追求更完备的流程或体验的话,完全可以无视这个刷新机制,它只会让你在初次接触授权时开发量增加,索性就不要去实现它,每次直接重亲获取新的access_token就行。如果是每次都获取新的token,而且官网也没有设置调用门槛限制,也不需要去保存这个token,也不用关心它和用户是一对一或者一对多的关系。就每次让用户同意授权,拿到code获取token,再用token来读取资料 。
注意,必须是认证过的服务号才能从网页中通过OAuth2.0的认证机制获取用户的信息,订阅号无论是认证还是不认证都是不行的。
分析请求后端流程:
比如用户访问页面/a,访问a页面时后端收到请求,根据a页面的url拼接成跳转地址,这个跳转的地址是微信里的地址,接着在用户点击同意授权的按钮,就会发生第二次跳转页面,同时除了拼接地址之外还会追加一些额外参数,在跳转后的页面拿到微信传过来的code、state,state是从用户访问的页面/a传过来的参数。拿到code后获取access_token、openid,有了access_token和openid就能获取用户信息。
简单的说要完成微信网页授权,并获取用户信息要完成以下3步骤。
- 用户授权并获取code
- 使用code换取access_token
- 使用access_token获取用户信息
增加网页授权的请求地址,新建server/wechat-lib/oauth.js
|
|
创建WechatOAuth实例
|
|
获取code
|
|
微信授权分两种类型,一种是静默授权snsapi_base(直接跳转,只能获取用户openid),另一种是手动授权snsapi_userinfo(手动获取用户信息),这里使用snsapi_base, target为跳转的地址,state为需要传递的参数
获取access_token
|
|
获取用户信息
|
|
增加路由
修改router.js
|
|
router.get('/wx-redirect', redirect)
帮用户跳转到另一个地址,router.get('/wx-oauth', oauth)
跳转后通过授权机制获取用户信息。
跳转
拼接跳转的目标地址,把用户重定向到这个地址,修改server/controllers/wechat.js
|
|
SITE_ROOT_URL:网站的根域名
server/api/index.js
|
|
生成跳转的url,修改server/api/wechat.js
|
|
OAuth实例,修改server/wechat/index.js
|
|
接收Oauth,修改server/conrollers/wechat.js
|
|
通过code获取用户信息,修改server/api/wechat.js
|
|
测试页面
新建oauth.vue
|
|
复制about.vue里的代码到oauth.vue,只修改beforeMount()里的代码。
store/actions.js
|
|
store/services.js
|
|
增加域名,修改server/config/index.js
|
|
在测试号里增加域名,如图:
注意:一定要修改网页授权获取去用户基本信息,不然就不能在本地通过微信测试。
在微信开发者工具中输入http://nuxtssr.ngrok.xiaomiqiu.cn/wx-redirect?a=1&b=2,返回success和用户信息。