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


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实现的常用的左侧导航效果
Oct 17 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
JavaScript this关键字的深入详解
Jan 14 Javascript
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
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
python读写json文件的简单实现
2017/04/11 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python异常处理操作实例详解
2018/05/10 Python
python人民币小写转大写辅助工具
2018/06/20 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
行政部主管岗位职责
2013/12/28 职场文书
食堂个人先进事迹
2014/01/22 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
idea下配置tomcat避坑详解
2022/04/12 Servers