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


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写的一个DIV 弹出网页对话框
Aug 14 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
php+js实现倒计时功能
Jun 02 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
jsTree使用记录实例
Dec 01 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
js禁止表单重复提交
Aug 29 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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
PHP6 mysql连接方式说明
2009/02/09 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
javascript生成大小写字母
2015/07/03 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
高三政治教学反思
2014/02/06 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
任命书标准格式
2015/03/02 职场文书
2015年双拥工作总结
2015/04/08 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
Elasticsearch 聚合查询和排序
2022/04/19 Python
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android