微信服务号对接流程记录

项目背景

以web为主，以微信服务号为媒介，进行用户绑定。并通过菜单进入相应页面进行操作

技术栈

React进行微信对接，页面展示

Java负责数据获取

开始

RTFM，不过看微信的文档确实头疼，感觉这个文档像是给老板看的，既冗余又晦涩。

微信公众平台文档

微信相关配置

微信申请以及认证较为简单，虽然很麻烦，但是基本无坑。请参照官方说明进行

一、整体机制

服务号分为三种开发级别

1.个人服务号

基本什么功能都没有，只能发布素材内的内容即：图片+文字

2.企业服务号轻开发（不配置服务器信息）

手动设置菜单，简介明快，可以轻松跳转至现有业务。不过只能获取微信用户ID，不能获取微信昵称、性别、地区等

3.企业服务号全开放

配置服务器信息。配置后菜单只能通过服务器返回，不能通过图形界面设置，可以获取基本全部的信息

本次分享的情景使用机制3

二、基本配置

1.AppID

注册后自动生成，无需配置

2.AppSecret

初期开发不建议开启，可以在后期优化时开启以提高安全性

3.服务器地址

具体意义：整个微信服务号所在地址，前端地址

功能举例：获取用户信息后，返回的地址必须在该地址下

4.令牌（token）

具体意义：可以理解为密码，一般配置在项目中，以确保与微信通信的安全性

5.消息加密秘钥

具体意义：二重加密，token验证身份，该项用于隐藏真实数据

3、4、5的配置

当前版本下（2018年3月）微信要求同时配置345三项。配置较为简单，不过介绍较为晦涩。

具体流程为

1.填写服务器信息，必须是备案域名，只能是80或443端口

2.填写token，字母、数组组合，有字节限制，内容任意填写

3.生成秘钥（即5），点一下就行，无需特别操作

重点来了，点击保存时，微信会有以下行为

4.马上发送一个GET请求到你的URL，看看这个地址到底是何方神圣，能不能用

会发送很多东西，具体见文档的【开始开发->接入指南->验证消息的确来自微信服务器】

你可以在这种情况进行一下验签测试，不过我相信正常人思维都没这么跳跃

5.回复微信的请求

但是，你又必须做点什么，要不微信会觉得你填的是别人的服务器

那就是回复他传过来的echostr，原样返回就行。如果没有正确返回，会无法保存，报token验证失败，橘红色的，嗯。

那有的同学就要问了：我写JS的啊，不会nodeJS啊，返回个屁啊！我80端口还要返回页面呢！

那我只能说，大佬的规定，不得不从，自己研究或者找服务端同学，先过了这关，再把服务器弄回来。

以PHP为例：

<?phpecho $_GET['echostr'];
?>

（公众平台的架构师一定是PHP出身，嗯，一定是）

记得配置PHP和服务器环境，搜索PHP+Apache或PHP+Nginx

如果你返回正确了，会提示保存成功。不过旁边还有个按钮，启用，记得点！

三、开始开发

1.环境准备

工欲善其事必先利其器

微信相关的大多数行为必须在微信中进行。

但是在手机上访问localhost总是比较麻烦，还看不到console.log

好在微信推出了调试工具，下载地址：

Windows 64

Windows 32

Mac

工具整体操作和Chrome基本一致，可以在地址栏输入localhost啦

四、用户信息获取

微信的用户信息获取流程还是有点麻烦的，对于前后端分离的项目来说，前后端都必须参与。

本介绍较为笼统，详见：官方文档

特别需要注意的是，由于跨域问题，一些微信的接口必须由服务端访问

粗略流程图如下：

开始之前

配置回调地址

在设置-公众号设置-功能设置-网页授权域名

设置前端地址，即接收code的那一端。如果未设置会提示回调错误（什么鬼提示），设置时也需要一定配合，就是根目录下要放一个txt文件并保证能访问的到，在设置时，下方有提示。

详细流程

第一步

访问微信地址，带有各种参数，详见文档

第二步

微信回调相应地址，带有code参数

第三步（此步及以后应由服务端完成）

拿code，访问微信oauth2地址，拿到access_token和openID

第四步

拿access_token和openID，访问用户信息地址，拉取用户信息。

其中还有一个流程，可以替代第三步，甚至前三步（如果你建立了自己的用户体系的话），那就是

refresh_token，这个值是与用户绑定的，可以只使用这个值，就获取openID和access_token，并且，有效期30天，如果你能识别当前用户，比如设备id，当用户第二次访问时，可以直接使用用户的refresh_token，来刷新access_token与openID，达到持久绑定的意图。

这比存储用户信息要靠谱的多，假如用户修改了头像、昵称，此方法仍然能获得最新的信息。

（微信用户信息获取，完）

未完待续...