前端微信网页授权+WebSocket

这篇教程只介绍前端需要做的工作；

注意：
1，开发者必须关注公众号，且是公众号下的开发者；
2，域名地址必须是公众号绑定的域名地址；

微信授权需要调试工具：微信web开发者工具；
参考微信文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

微信授权，前端与服务端的交互只涉及appId，code，和redirect_uri；

微信授权的目的是为了获取微信用户信息，前端的工作只需要获取code的返回给服务端即可。剩下的操作由服务端与微信交互完成，最后服务端会返回用户信息给前端。
整个流程大概：
1，前端——》服务端—-appid——》前端；

2，前端—appid/scope等数据—》微信授权页—-code–》前端；

3，前端—code—–》【服务端《——-》微信】—》服务端—–用户头像等信息—–》前端

var baseUrl = "http://xxx.cn:xxx" //后台请求
var weixinUrl = "http://xxx.cn.cn"//微信请求
var socketUrl = 'ws://http://xxx.cn/ws'//websocket请求

var socket;
var roomMes
 var code = ''

第一步向服务端请求appId

//获取微信appid
    function getAppId(url = '') {
        url= weixinUrl+url//授权后重定向的回调链接地址， 传给后台java用 urlEncode 对链接进行处理
        console.log(url,"window.location.href ")
        $.ajax({
            type: 'POST',
            url: baseUrl + "/getAppId",
            data: {url: url},
            success: function (result) {

             goWixinURL(result.data);
            }
        });
    }

第二步向微信请求code，注意，每次请求code都不能相同；

 //获取code
    function goWixinURL(result) {
     var weixinForm = {
                    appid:result.appId,
                    response_type: 'code',
                    scope: 'snsapi_userinfo',  //'snsapi_base',//'snsapi_userinfo',
                    state: '',
                   }
            var params = $.param(weixinForm) + "#wechat_redirect"
                window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=" + result.url + "&" + params;


    }

当跳转到微信网页，用户点击确定登录。会自动跳回redirect_uri 链接的地址，并在redirect_uri地址后带上code参数。
获得code后发送给服务端。服务端返回用户的微信头像等数据；

这里用ws来完成接下来的工作；

 /**
     * 获取url参数
     * @param name
     * @returns {null}
     * @constructor
     */
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
 function mySocket() {
        code=GetQueryString('code')
        if (code) {//当前页url存在code参数就执行；
            if (!window.WebSocket) {
                window.WebSocket = window.MozWebSocket;
            }
            if (window.WebSocket) {
                socket = new WebSocket(socketUrl);
                socket.onmessage = function (event) {

                    var datas = JSON.parse(event.data);
                    console.log(datas.data, "datas.data 握手获取信息");
                    var mydata = datas.data.data;

                    if(mydata){
                        window.localStorage.setItem('wxUserMsg', JSON.stringify(mydata));
                        console.log("mydata 微信信息，获取成功！")

                        roomMes=mydata//JSON.parse(window.localStorage.getItem('wxUserMsg'));

                    }else{
                        reload()//获取不成功时重新请求；
                    }
                    if (datas.data.status == 200) {
                        console.log("=====", JSON.stringify(mydata))


                    }
                };
                socket.onopen = function (event) {
//                ta.value = "链接开启!";
                    console.log("链接开启!..");
                    code=GetQueryString('code');
                    console.log("code===链接开启", code)

                    wsSend({code: code})

                };
                socket.onclose = function (event) {
//                ta.value = ta.value + "链接关闭";
                    console.log("链接关闭!..");
                    reload()
                };

            } else {
                alert("你的请求不支持 WebSocket！");
            }
        }
    }

    function wsSend(message) {
        if (!window.WebSocket) {
            return;
        }
        if (socket.readyState == WebSocket.OPEN) {
            var msg = {
                "sessionid": 0,
                "cammand": 1,
                "encrypt": "encrypt",
                "token": "token",
                "data": JSON.stringify(message)
            }
            console.log("send socket 发送", msg)

            socket.send(JSON.stringify(msg));
        } else {
            console.log("发送不成功,链接没有开启..");
        }
    }

function reload(num){

        var reloadNum=window.sessionStorage.getItem('reloadNum')//parseInt(GetQueryString('reloadNum'))
        if(!reloadNum){
            reloadNum=1
        }else{
            reloadNum++;
        }
        console.log("刷新====================",reloadNum)
        if(reloadNum>3){
            if(num){
                reloadNum=num
            }else {
                return;
            }
        }

        window.sessionStorage.setItem('reloadNum',reloadNum)

        window.location.href='/';
    }

 $(function () {
        code=GetQueryString("code")
        if(!code){
            getAppId()
        }else{
            mySocket();
        }

    })