微信公众号开发 —— 微信网页受权小记

微信受权

简要流程

进入（首页）页面 -> 请求数据 -> 401,须要用户信息 -> 前端发起 微信受权 -> 用户肯定受权 -> 微信重定向到回调地址 -> 获取code，经过code换取网页受权access_token，生成token -> 跳转至刚刚的页面 ,并把token发送给前端 -> 前端专门整个页面来接收token(尽可能不要让用户明显地看到token吧)，再重定向到用户一开始进入的页面

...很复杂对吧...仍是忽略上面一段话吧

嗯,这但是我花了一夜时间画的,能够抱怨内容不全,但绘图风格请尽可能承认 不然你只能看上面一段文字,好好想一想吧

微信受权地址的解释与说明

微信受权URL的真面目

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URL&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
复制代码

微信受权URL，其实就是这么一串字符串

解释

字段	是否必填	含义	说明
APPID	是	公众号惟一的APPID
REDIRECT_URL	是	回调地址，须要进行urlEncode处理	受权完后微信将会跳到该地址，如无特殊说明，该回调地址是后台接口，负责接收code，code以?code=123456的参数形式接在回调地址后面
STATE	否	重定向后会带上state参数，开发者能够填写a-zA-Z0-9的参数值，最多128字节	通常能够是前端告诉后台跳转受权前的页面地址，让后台获取code以后重定向到该地址，而且在该地址后带上token数据
response_type	是	返回类型，此处填写code
scope	是	应用受权做用域：snsapi_base （不弹出受权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出受权页面，可经过openid拿到昵称、性别、所在地。而且，即便在未关注的状况下，只要用户受权，也能获取其信息）
#wechat_redirect	是	不管直接打开仍是作页面302重定向时候，必须带此参数

示例

redirect_uri: http://xxxx.xxxxx.com/api/customer/wechat/authorize

state：http://xxxx.xxxx.com/#/wechatLogin

redirect_uri 微信规定须要encode处理

state 是由于使用了Hash路由，有#，与‘#wechat_redirect’冲突，因此须要encode处理

因此无论怎样，redirect_uri与state 都通过encodeURIComponent处理吧，准没错

风流版

https://open.weixin.qq.com/connect/oauth2/authorize
?appid= **xxxxx**
&redirect_uri= **http%3A%2F%2Fxxxx.xxxx.com%2Fapi%2Fcustomer%2Fwechat%2Fauthorize**
&response_type=code
&scope=snsapi_userinfo
&state= **http%3A%2F%2Fxxxx.xxxx.com%2F%23%2FwechatLogin**
#wechat_redirect
复制代码

正常版

https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxx&redirect_uri=http%3A%2F%2Fxxxx.xxxx.com%2Fapi%2Fcustomer%2Fwechat%2Fauthorize&response_type=code&scope=snsapi_userinfo&state=http%3A%2F%2Fxxxx.xxxx.com%2F%23%2FwechatLogin#wechat_redirect
复制代码

搁在微信浏览器上一看，长相其实还行

配置项

1. 设置微信受权回调域名

2. 绑定为该公众号的开发者

只要你是该公众号的管理员或者运营者，你就有权利去添加/删除该公众号的开发者。 可是！！！要想成为开发者，并非那么简单的！！！

首先要能被人家用微信号搜索到 而后要关注该公众号 还有关注什么微信开发者中心 ...等等噼里啪啦的一堆东西

不过你是个正常人，跟着微信提示走，就OK的啦~

工具：微信开发者工具

做者简介：李尧晖，芦苇科技web前端开发工程师，表明做品：飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专一于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和咱们一块儿并肩做战： web@talkmoney.cn

访问 www.talkmoney.cn 了解更多