微信网页授权

微信网页实现授权

微信网页实现用户授权，可查看官方文档。
微信网页授权就是跳转一个合成的微信链接，既然是跳转前后端人员都可以做的，不过建议还是给后端人员做，以下是前端的做法。
先看一下合成url的参数：

参数	是否必须	说明
appid	是	公众号的唯一标识
redirect_uri	是	授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
response_type	是	返回类型，请填写code
scope	是	应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
state	否	重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect	是	无论直接打开还是做页面302重定向时候，必须带此参数

根据以上参数合成下面的链接(以下链接改一下appid和回调地址redirect_uri就可以用了，回调地址应和公众平台里面配置的域名要一样，如配置域名为‘qq.com’，回调地址应为’http://qq.com/index.html’，配置有‘www’就加‘www’，没有就不加)：

let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';

接下来就是跳转了：

let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
window.location.href = url;//跳转

用户同意授权后就可以在url上获取code了：

function getUrlParam(name) {//获取url上的参数
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
}
const code = getUrlParam('code');//拿到code

后端人员做好获取用户openid的接口后就可以把code传给他拿到openid
参考链接：https://www.jianshu.com/p/03bc80db50e4