微信公众号网页授权

在微信公众号开发时候，一般需要使用到微信登录功能，这里就需要加入微信授权，来获取用户的openid(或unionid)，利用openid(或unionid)做唯一的身份识别。

下面介绍授权开发的步骤。

一、添加业务域名

这是很重要的一步，js安全域名配置配置，添加方式如下:

登录微信公众号平台->开发->接口权限->网页授权(修改)，进入后选择“js接口安全域名”进行添加即可。

需要注意两点：

1)、端口必须是默认80端口，添加的域名不能带端口号！（这是微信规定的）

2)、下载的txt验证文件必须放置在提供的域名目录下。

配置好之后，直接浏览器地址栏访问这个路径，能打开就成功了。

二、前端授权获取code

微信授权的第一步，是前端获取微信返回的code值，把code值传递给服务器端才能获取到用户的openid(或unionid)。

那怎么拿到微信返回的code值？

通过window.location.href跳转下面链接进行获取：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect //若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

参数说明：

APPID：公众号的唯一标识，申请公众号已经分配好的；

REDIRECT_URL ：  在成功拿到code值，你需要跳转到你项目的路径地址，比如login.html之类的；

SCOPE ：有两个固定值：snsapi_base(静默授权)，snsapi_userinfo(显式授权) ，两者任选其一；

STATE ： 这个参数是自定义，什么值都行，你配置什么值，到时候跳转回来后，原样给你带回来，需要注意的是有格式要求（重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节）；

静默授权与显式授权的区别：

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的.（静默的另一种：对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权首次需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

前端获取code的代码：

methods: {//（以vue为例）  getCode() { // 非静默授权，第一次有弹框    this.code = ''var local = window.location.href // 获取页面urlvar appid = 'wx65adcf075369****'    this.code = this.getUrlCode().code // 截取code    if (this.code == null || this.code === '') { // 如果没有code，则去请求      window.location.href =        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`    } else {      // 你自己的业务逻辑    }  },  getUrlCode() { // 截取url中的code方法    var url = location.search    this.winUrl = url    var theRequest = new Object()    if (url.indexOf("?") != -1) {      var str = url.substr(1)      var strs = str.split("&")      for (var i = 0; i < strs.length; i++) {        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])      }    }    return theRequest  }}

代码逻辑是先判断有没有code，没有才去获取，使用encodeURIComponent()对回调url进行编码。

三、后端获取openid(或unionid)

这里一般是有前端传递code给后端，由后端请求微信提供的接口，来获取用户的openid(或unionid)

1、获取openid：

get请求接口链接如下：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数说明：

appid	是	公众号的唯一标识
secret	是	公众号的appsecret
code	是	填写第一步获取的code参数
grant_type	是	填写为authorization_code

成功返回数据如下：

{   "access_token":"ACCESS_TOKEN", //接口调用凭证  "expires_in":7200,//access_token接口调用凭证超时时间，单位（秒）  "refresh_token":"REFRESH_TOKEN",//用户刷新access_token  "openid":"OPENID",//授权用户唯一标识  "scope":"SCOPE"//用户授权的作用域，使用逗号（,）分隔}

如果你只需要得到opend_id，这里就结束了。如果需要获取unionid则还需要请求下面接口。

2、获取unionid

通过返回的openid和access_token获取用户信息，get请求接口如下：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

a：scope为snsapi_userinfo显式授权返回的数据如下：

{"subscribe": 1,//用户是否订阅该公众号标识，值为0时代表此用户没有关注该公众号"openid":" OPENID",//用户的标识，对当前公众号唯一" nickname": NICKNAME,//用户的昵称"sex":"1",//用户的性别，值为1时是男性，值为2时是女性，值为0时是未知"language": "zh_CN",//用户的语言，简体中文为zh_CN"province":"PROVINCE"//用户所在省份"city":"CITY",//用户所在城市"country":"COUNTRY",//用户所在国家"headimgurl":    "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",//用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。"subscribe_time": 1382694957,//用户关注时间，为时间戳。如果用户曾多次关注，则取最后关注时间"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL",//UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的"remark": "",//公众号运营者对粉丝的备注，公众号运营者可在微信公众平台用户管理界面对粉丝添加备注"groupid": 0,//用户所在的分组ID（兼容旧的用户分组接口）"tagid_list":[128,2]  //用户被打上的标签ID列表}

ps：需要获取用户信息，必须使用scope为snsapi_userinfo的方式。

b：scope为 snsapi_base静默授权返回的数据如下：

{"subscribe": 0,"openid":" OPENID","unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}

四、unionid与openid的区别

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的unionid是唯一的。

换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。

具体请查看公众号开发文档：https://developers.weixin.qq.com/doc/

本文完~

学习更多技能

请点击下方公众号