微信浏览器网页授权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;
            }
        }
    }
}

你可能感兴趣的:(微信)