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


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中的变量作用域
Dec 06 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
微信小程序template模板实例详解
Oct 27 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
解决layui的input独占一行的问题
Sep 10 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/06/05 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python中类的一些方法分析
2014/09/25 Python
python实现感知器算法详解
2017/12/19 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
举例讲解Python常用模块
2019/03/08 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
数学专业推荐信范文
2013/11/21 职场文书
大学生学习自我评价
2014/01/13 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL