解决一个微信号同时支持多个环境网页授权问题


Posted in Javascript onAugust 07, 2019

项目进行微信开发, 认证了一个微信服务号专门用于内部测试,但是内部可能存在多套不同环境(开发dev、测试sit、预发布uat)等,由于微信限制一个服务号只能配置一个网页授权域名, 又不可能给每个环境单独配一个服务号,这样不仅需要成本而且很浪费资源, 所以重点需要解决下面这个问题:

1、可以自动区分环境。比方部署开发环境。url可能是http://dev.xxx.com/api/,而在测试环境的时候应该是http://sit.xxx.com/api/。而并且不能写死,否则开发和测试就要换来换去。非常麻烦

解决一个微信号同时支持多个环境网页授权问题

本文总结分享一下思路:

主要是通过中间页面代理获取微信授权CODE,然后跳转到对应需要使用的环境URL下;

比如原来开发环境, 微信中授权域名配置的是dev.xxx.com,那么现在配置的是一个代理域名proxy.xxx.com,通过代理域名拿到code后在跳回dev.xxx.com,如下图所示

解决一个微信号同时支持多个环境网页授权问题

代码片段 getCode.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>微信授权登录</title>
</head>
<body>
</body>
<script>
 var code = getPara("code");
 if(!code)
 {
  var redirect = getPara("url");
  var appid = getPara("appid");
  var _from = getPara("from");
  var redirect_url = encodeURIComponent('https://proxy.xxx.com/getCode.html?url='+redirect);
  var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri=" + redirect_url + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
  location.href = url;
 }else{
  var redirect = getPara("url");
  var code = getPara("code");
  if(redirect.split('?').length > 1){
  location.href = redirect + "&code=" + code;
  }else{
    location.href = redirect + "?code=" + code;
  }
 }
 function getPara(name){
  var url = location.href;
  eval("var reg = /("+name+"=[A-Za-z0-9_,-@!#\.\:\/]*)/i")
  var match = url.match(reg);
  if(match && match.length > 1){
    var arr = match[0].split("=");
  arr.shift();
  return arr.join('=');
  }else{
   return "";
  }
 }
</script>
</html>

使用方法https://proxy.xxx.com/getCode.html?url=http://dev.xxx.com/uinfo&appid=wx6d421c188956xx95

总结

以上所述是小编给大家介绍的解决一个微信号同时支持多个环境网页授权问题呢,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
vue+element项目中过滤输入框特殊字符小结
Aug 07 #Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 #Javascript
javascript中的数据类型检测方法详解
Aug 07 #Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 #Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 #Javascript
微信小程序引入Vant组件库过程解析
Aug 06 #Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
You might like
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Pytorch中.new()的作用详解
2020/02/18 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
春季运动会开幕词
2015/01/28 职场文书
辞职信标准格式
2015/02/27 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
2015初中团委工作总结
2015/07/28 职场文书
公司食堂管理制度
2015/08/05 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
Spring实现内置监听器
2021/07/09 Java/Android