前端微信网页授权+WebSocket

本文主要是介绍前端微信网页授权+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 roomMesvar code = ''

第一步向服务端请求appId

//获取微信appidfunction 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都不能相同；

 //获取codefunction 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();}})

这篇关于前端微信网页授权+WebSocket的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---