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

所属分类: 网络编程 / JavaScript 阅读数: 583
收藏 0 赞 0 分享

项目进行微信开发, 认证了一个微信服务号专门用于内部测试,但是内部可能存在多套不同环境(开发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文件加载优化,三种方式实现js文件加载优化,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery on()绑定动态元素出现的问题小结

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,通过本文给大家介绍jQuery on()绑定动态元素出现的问题小结,需要的朋友参考下
收藏 0 赞 0 分享

基于JavaScript实现弹出框效果

弹出框在网站页面中是必不可少的一部分,今天借助脚本之家平台给大家分享使用js实现简单的弹出框效果,感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换

这篇文章主要介绍了百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript深度复制(deep clone)的实现方法

本文给大家介绍JavaScript深度复制(deep clone)的实现方法,涉及到js深度复制相关知识,本文介绍的非常详细,特此分享脚本之家平台供大家参考
收藏 0 赞 0 分享

jQuery实现简单的DIV拖动效果

这篇文章主要介绍了jQuery实现简单的DIV拖动效果,涉及jQuery针对鼠标事件的响应及页面元素的动态操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript每日必学之循环

javascript每日必学之循环,本文的主要内容就是循环,死循环时进行bug调式,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript下使用Promise封装FileReader

这篇文章主要介绍了javascript下使用Promise封装FileReader,需要的朋友可以参考下
收藏 0 赞 0 分享

js下将金额数字每三位一逗号分隔

这篇文章主要介绍了js下将金额数字每三位一逗号分隔的相关资料,还附加了一个小功能,小数位保留两位,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

使用jQuery的easydrag插件实现可拖动的DIV弹出框

EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。接下来通过本文给大家介绍使用jQuery的easydrag插件实现可拖动的DIV弹出框,感兴趣的朋友一起学习吧
收藏 0 赞 0 分享
查看更多