微信授权:微信本身有一套授权机制,我们需要做的就是在一个url里面传相应的参数,然后在微信的开发者工具或者微信自带的浏览器访问这个url就可以在微信授权跳转之后的url里面拿到code,然后后台就可以利用code获取用户相关的信息。比如openid,token等。例子如下
https://open.weixin.qq.com/connect/oauth2/authorize?
appid=“填写你自己的appid”&
redirect_uri=“填写你自己的encode之后的url”
&response_type=code&scope=snsapi_base&state=123;
其中redirect_uri=后面的参数就是你自己的url经过encode转码得到的。这个转码的url是你在微信授权之后跳转的链接。
上面整个url在微信上访问之后会跳转到你自己的url然后在后面带上code=“xxxxxx”的参数等,其中code需要用来获取用户信息。
这个code因为在url里面可以通过获取当前浏览器的url来获取到,获取方法如下:
getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
this.getQueryString("code");这样子调用就可以了。然后后续就是从服务器获取用户信息,其中token,openid是不变的,以后都需要使用需要保存。提醒一下由于code是每次使用之后就无效了的。所以code无需保存。
至此微信授权完成
采坑记录:
因为前后端分离,所以为了在当前页面授权之后并且跳转到该页面,所以需要让window.location.href="xxxxxx",这个url是微信授权的url,里面的参数是该页面的链接地址经过encode转码的。
这里有一个问题:如果你先授权再去拿code会造成页面需要的在该页面跳转。避免办法和误区讲解如下:
由于这是微信公众号的入口页面,所以后台是配置了这个页面的链接的。所以在微信公众号进入这个页面是直接授权了的。这个时候去获取code就可以了。然后进行后续操作。如果后台授权有问题,可以进行如下:同样先获取code,判断code是否存在,然后再去授权,等跳转回该页面的时候就可以获取code了。这样避免了页面循环跳转