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


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 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 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设计模式中工厂模式详细介绍
2013/05/15 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP读取Excel类文件
2017/05/15 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
python版本的读写锁操作方法
2016/04/25 Python
Python迭代和迭代器详解
2016/11/10 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
如何进行Linux分区优化
2013/02/12 面试题
绩效专员岗位职责
2013/12/02 职场文书
跑操口号
2014/06/12 职场文书
歌舞青春观后感
2015/06/10 职场文书
python flask框架快速入门
2021/05/14 Python
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏