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


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 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JS中substring与substr的用法
Nov 16 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
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 基本语法格式
2009/12/15 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
销售部主管岗位职责
2013/12/18 职场文书
大学四年个人自我小结
2014/03/05 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
拓展训练激励口号
2014/06/17 职场文书
终止劳动合同协议书
2014/10/05 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
运动会表扬稿
2015/01/16 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js
Python简易开发之制作计算器
2022/04/28 Python