微信公众号开发基本流程
一、概念
1、场景:
H5微信授权登录:
即用户使用手机浏览h5信息列表时,点击某条信息进去时,会跳转到手机端的授权确认授权页,只有当用户点击确认授权按钮之后,才能够返回h5页面重新浏览页面或者操作(此处用户授权登录了,即用户处于登录状态了)。
pc网页微信扫码登录:
即用户访问某个网站时,登录页面下面通常会有三方登录:微信、QQ、微博、淘宝……,点击后出现二维码扫码页面,用户需要使用手机进行扫码后登录,这个只讲微信的扫码登录授权过程,其他三方登录授权过程类似。
2、微信公众号授权原理
微信公众号采用的是oauth2的登录授权方式,简单的来讲,就是用户通过手机微信确认登录之后,微信方会返回一个授权码code给回第三方(接入方),这个授权码code一次有效期,且有效时间比较短;第三方通过此code去调用微信接口获取token,token的有效期也比较短,当然用户可以通过刷新token的方式来延长token的有效时长;第三步通过token再去调用微信开发平台接口,获取微信个人用户信息(昵称、头像地址、openid、unionid、地区……)。
Oauth2整个原理请移步参考:
3、微信通信原理:
我们需要知道通过公众号发送的消息不是直接请求到我们的网站服务器的,而是通过微信服务器进行转发,所以我们每一次和微信公众号互动都是通过微信的服务器做中间人,这样才能完成交互过程,交互是通过xml文件的格式进行传递的,如下图:
二、了解公众号管理页面
我们在微信公众平台扫码登录后可以发现管理页面左侧菜单栏有丰富的功能:
大概可以分为这几大模块:
首页、功能、小程序、管理、推广、统计、设置、开发
作为开发人员,首先应该关注的是设置、开发模块;而作为产品运营人员,关注的是功能、管理、推广模块;作为数据分析人员,关注的是统计模块。
有一点需要注意,如果我们决定技术人员开发公众号,必须启用服务器配置,而这将导致UI界面设置的自动回复和自定义菜单失效!
我们在 开发 – 基本配置 – 服务器配置 中点击启用:
我们团队就遇到过这种情况:两个项目组共用一个公众号,结果一个启用了服务器配置,使另一个项目组手动配置的菜单失效了。所以要注意这点!
三、必备开发者工具的使用
我们进入 开发 – 开发者工具, 可以发现微信提供了六种开发者工具,其中前四种属于开发必备:开发者文档、在线接口调试工具、web开发者工具、公众平台测试账号。
四、服务器基本配置
启用并设置服务器配置后,用户发给公众号的消息以及开发者需要的事件推送,将被微信转发到该URL中。
无论是在真实公众号的 开发 – 基本配置 – 服务器配置,还是在 测试号管理 中,我们都可以看到这几个基本参数:
开发者ID(AppID)、开发者密码(AppSecret)、服务器地址(URL)、令牌(Token)
AppID 是公众号唯一开发识别码,配合开发者密码可调用公众号的接口能力,大多数微信接口都需要附带该参数。
AppSecret 是校验公众号开发者身份的密码,具有极高的安全性。切记勿把密码直接交给第三方开发者或直接存储在代码中。如需第三方代开发公众号,请使用授权方式接入。其中获取accessToken就需要同时传入AppID和AppSecret获取。
URL 是开发者用来接收微信消息和事件的接口URL,也就是我们服务后端的入口地址,需要注意的是该地址必须以域名形式填写,且必须以http 或 https 开头,分别支持80端口和443端口。如:http://yuanj.natapp1.cc/wechat。
Token 可由开发者可以任意填写,用作生成签名(该Token会和接口URL中包含的Token进行比对,从而验证安全性),也就是我们项目和微信服务端进行通信时,必须保证公众平台配置的Token和我们后台代码配置的Token保持一致,这样微信就能验证我们身份。
注:EncodingAESKey 参数由开发者手动填写或随机生成,将用作消息体加解密密钥,我们前期可以采用明文模式进行开发测试,暂时先不用关注。
我们点击提交时,微信会以GET请求的方式访问我们配置的URL地址,并附加几个参数进行验证,所以你需要在该地址对应的项目后端接口里对这几个参数进行加工处理,返回微信需要的结果,这样就可以验证成功,使微信服务端认可你配置的URL和Token参数,后续就能互相通信了!
点击提交,如果token验证成功,说明从微信服务器到我们的网站服务器打通了,就是把我们的网站服务器和微信服务器连接起来,这样才能够进行通信,重点是通过get请求方式对参数进行验证。
具体情况可以阅读微信文档 – 开始前必读 – 接入指南。
五、获取openid以及网页授权(重难点)
注意,这是公众号开发的重难点之一,请把技术文档中的微信网页授权模块多读两遍,然后带着疑问来看我的解析。
(1)先明确为什么需要网页授权?我们的目的是什么?
答:用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。也就是通过这种授权机制,我们能获取微信用户信息,比如:头像、昵称、地区、个性签名等。
(2)既然目的是获取用户基本信息,微信不是提供了专门的接口吗?非要网页授权?
答:在文档的 用户管理 – 获取用户基本信息(UnionID机制) 模块可以看到的确有获取用户基本信息接口:
可以看到,这个接口只需要提供openid或者unionid,即可直接获取用户基本信息。那么问题来了,openid(unionid)又是如何获取呢?
(3)网页授权有哪几种机制?分别是怎样实现?应用于什么场景?
答:主要有两种机制,对应两种scope:
以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)。
以snsapi_userinfo为scope发起的网页授权,是用来获取用户基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。
snsapi_base 和 snsapi_userinfo 的不同点:
首先snsapi_base是静默授权,什么意思呢?就是用户没有感知;与之对应的就是非静默授权的snsapi_userinfo了,这个scope公众号会弹出一个小窗口,需要用户手动点击授权
那么这两种scope授权的优劣势在哪呢?
snsapi_base 的优势在于用户无感知,体验好,方便快捷;劣势在于获取openid后只能通过用户管理 – 获取用户基本信息(UnionID机制) 接口获取用户基本信息,而这种方式需要确保用户已经关注,不然是没有相关信息的!
snsapi_userinfo 的优势在于无需用户关注公众号,只要用户点击了授权确认,即可通过access_token和openid调用专门的拉去用户信息接口获取信息,比较暴力;劣势在于需要用户手动授权,可能影响用户体验。
我们项目是通过snsapi_base静默授权的,其中redirect_uri配置的是前端项目首页地址(前后端分离),并将构造的这个链接封装起来,直接配置在自定义菜单里,那么用户点击菜单,就直接重定向到前端项目,然后前端获取code参数调用后端获取openid接口,将获取的openid缓存到客户端,以便后面使用。
(4)想要进行网页授权,我们需要在公众平台配置
在这里配置的是回调页面即redirect_uri的域名!
如果是正式号(需要微信认证),需要在 开发 – 接口权限 – 网页服务 – 网页授权 – 网页授权获取用户基本信息 的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;
六、微信授权登录并获取用户基本信息
微信授权使用的是OAuth2.0授权的方式。主要有以下简略步骤:
第一步:用户同意授权,获取code
第二步:通过code
换取网页授权access_token
第三步:刷新access_token
(如果需要)
第四步:拉取用户信息(需scope
为 snsapi_userinfo
)
详细的步骤如下:
1.用户关注微信公众账号。
2.微信公众账号提供用户请求授权页面URL。
3.用户点击授权页面URL,将向服务器发起请求
4.服务器询问用户是否同意授权给微信公众账号(scope为snsapi_base时无此步骤)
5.用户同意(scope为snsapi_base时无此步骤)
6.服务器将CODE通过回调传给微信公众账号
7.微信公众账号获得CODE
8.微信公众账号通过CODE向服务器请求Access Token
9.服务器返回Access Token和OpenID给微信公众账号
10.微信公众账号通过Access Token向服务器请求用户信息(scope为snsapi_base时无此步骤)
11.服务器将用户信息回送给微信公众账号(scope为snsapi_base时无此步骤)