微信浏览器网页授权JS封装

对当前页面授权并获取用户信息

微信浏览器授权的前提：

1.拥有微信公众号，即有APPID，APPSecret，并设置了授权回调域

2.必须在手机端的微信浏览器打开方可，目测现在windows PC端的微信浏览器打开也可通过授权。

3.以上条件都具备后参照微信开放文档进行开发，这里就不挂文档了。

授权原理：

微信授权的流程是通过前端在需要授权的时候，跳转微信服务器，这个链接是这样额https://open.weixin.qq.com/connect/oauth2/authorize，重要的参数有：appid：微信公众号的appid；redirect_uri：你配置的回调域下的某个目录地址，一定要是回调域下的；response_type：直接写code就可以；scope：范围，这里分为几个范围，文中使用的是snsapi_userinfo，即获取用户信息，会弹出授权提醒，即大家打开授权时候的绿色框图；state：微信留给开发者的，可以实现一些东西，自由发挥。通过访问授权链接，微信确认无误会帮你跳转回调URL即redirect_uri并带上code参数，然后通过这个code参数和微信交换accesstoken，accesstoken可以换取用户信息之类了，跳转过后就需要服务器作支持了，换取的链接参照微信开发者文档，到此就完成这篇的目的。

实现方式：

通过将微信返回的用户信息存储到浏览器本地缓存中，当缓存存在的时候就不必再请求授权；当缓存不存在的时候要从浏览器取code参数，然后将code传给服务器返回用户信息再刷新页面完成授权；当code也不存在的时候即跳转微信授权。

总结：

这是最初版本的微信授权，经过迭代后更多的操作放到了后台，还有加入更多的错误处理，大家可以自己思考实现。

weixin.js

var weixin = {
config: {
url:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxx&redirect_uri='+encodeURIComponent(window.location.href)+'&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect',
userInfo:JSON.parse(localStorage.getItem('MY_USER_INFO')),
api:'http://xxx.xxx.com'
},
isweixin: function() {
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
} else {
return false;
}
},
getQueryString: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
},
getUser : function(code) {
$.ajax({
type: 'get',
url: weixin.config.api + '/third/weixin/xxx?code='+code,
cache:false,
async: false,
dataType: 'jsonp',
jsonp: 'jsonpcallback',
success: function(json){
localStorage.setItem('MY_USER_INFO',JSON.stringify(json));
},
error: function(json) {
console.log(json);
}
})
},
getUserInfo:function(){
if(weixin.config.userInfo != null){
return JSON.parse(localStorage.getItem('MY_USER_INFO'));
}else{
if(weixin.getQueryString('code') != null){
weixin.getUser(weixin.getQueryString('code'));
return JSON.parse(localStorage.getItem('MY_USER_INFO'));
}else{
window.location.href = weixin.config.url;
}
}
}
}