微信网页授权流程(前端篇)

功能描述

公司最近有个项目要做基于微信的H5校服定制wepApp的开发，之前完全没有接触过微信开发，很是兴奋，有种磨刀霍霍向猪羊的感觉。由于本人经验有项，描述不准确的地方请大家及时指出。

功能描述:当用户点击如下所示的图片获取用户的信息，包括openid，头像等。

准备工作

(1)在公众号后台“设置—公众号设置—功能设置—网页授权域名”设置回调的域名。

(2)在对应位置按照公众号开发文档给出的规则设置回调地址。

如果是通过子菜单触发跳转，记得在“功能—自定义菜单—子菜单内容”设置为跳转网页"，并填写回调地址。

主要流程及说明

参考文档:

说明:

• 微信网页授权有2种scope，非别是snsapi_base为scope发起的网页授权和以snsapi_userinfo为scope发起的网页授权。第一种授权只能获取到进入页用户面的openId，此方式无需用户关注公众号。而第二种授权方式才能获取到用户的基本信息，但这种授权需要用户手动同意。对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。

• 用户进入回调页面，跳转后的url上会拼接拼接一个key为code的字段，此code的值是变化的，每次用户授权带上的code将不一样，code的有效时间为5分钟。

前端截取url上code的方法如下:

function getUrlParam(name){

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

    var r = window.location.search.substr(1).match(reg); //匹配目标参数

    if (r != null) return unescape(r[2]);

    return null; //返回参数值

  };

• 根据code获取openid的方法需要公众号的appsecret和access_token2个字段的值，由于这2个字段的值安全级别都非常高，必须只保存在服务器，所以该方法需由后台实现，前端传入code即可。

• 根据openid获取用户基本信息也涉及到access_token，因此需要后台实现此方法，前端传入openid即可。

参考文档:微信公众平台技术文档