把一个WebApp发布在微信公众号上,并且想使用微信用户的信息,以求达到微信集成登录的目的。官方文档讲的也很详细,然而在做的过程中还是遇到很多坑,分享出来希望能对有需要的人有所帮助。实现效果如下:
微信浏览器授权的前提:
1.拥有微信公众号,即有APPID,APPSecret,并设置了授权回调域
2.必须在手机端的微信浏览器打开方可,目测现在windows PC端的微信浏览器打开也可通过授权。
3.以上条件都具备后参照微信开放文档进行开发。
文档参考:网页授权获取用户基本信息
http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
weixin.js
var weixin = {
config: {
url:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri='+encodeURIComponent("https://...")+'&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect',
userInfo:JSON.parse(localStorage.getItem('MY_USER_INFO'))
},
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: "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=APP_SECRET&code="+code+"&grant_type=authorization_code",
cache:false,
async: false,
dataType: 'jsonp',
jsonp: 'jsonpcallback',
success: function(json){
localStorage.setItem('MY_USER_INFO',JSON.stringify(json));
// document.write("<div>"+JSON.stringify(json)+"</div>");
$("#test").html(json[0].openid);
},
error: function(err) {
// console.log(err);
$("#error").html(JSON.stringify(err));
}
})
},
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;
}
}
}
}
ps:只能在微信中打开调试,无法看到控制台,需要把接收到的数据输出到页面上查看。