微信公众号h5开发网页授权

微信公众号h5的开发我是用vue做的。由于是要在微信内置浏览器运行的网页，所以首先就要获得微信的授权。

看了鹅厂的文档之后，大概总结出以下几点：

1、首先需申请测试公众号，作为开发测试使用；

2、在申请的测试号中配置网页授权回调域名和JSSDK安全域名（这两个域名相当于是转发本地项目运行的IP+端口，格式为一个全域名的字符串，不需要“http://”或“https://”等协议头）；

3、开始网页授权。网页授权有两种类型：snsapi_base和snsapi_userinfo，两者的区别很简单，snsapi_base相当于是静默授权，用户无感知，可以拿到用户的openId；snsapi_userinfo则需要用户手动点击同意授权，可以那到包括openId在内的用户基本信息（性别，昵称，地区，头像等）

3.1、用户访问H5首先跳转微信授权链接（链接格式为：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect ）

appid就传申请的测试公众号的appid(公众号唯一标识)，redirect_uri就是前面说的回调域名，scope是两种授权类型。

3.2、进入授权链接用户同意授权后，会跳转到回调域名，并且后面会带上code和state，code是用来获取网页授权的access_token(通过请求此链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code)，一般来说，access_token由后端去获取并保存在后端，而且有效期只有2小时。

3.3、若授权方式为snsapi_base，那么在3.2就已经授权结束了。若为snsapi_userinfo，则接下来就通过openId和access_token去获取用户信息(通过请求此链接获取: https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN)，此时网页授权全流程完成。

注意：若用户已关注公众号，snsapi_userinfo也是用户无感知