背景

公司增加了个微信扫码登录，费劲千辛万苦终于把应用申请下来了，但遇到了一个头疼的事情：微信授权回调域只能写一个，且不支持通配。这下可好了，总不能把每个需要微信登录的二级域名都申请一个应用吧？而且一个开放平台账号最多申请十个。

使用html重定向

这种方法网上一大堆，大体思想是，微信授权回调域写一个域名，然后将一个html页面放到这个域名下，微信扫码登录时填写的redirect_url就是到这个html，然后在这个html的js代码中，根据某一个参数去判断当前路由应该重定向到哪个地址。

html重定向做法

假如我们有多个地址需要做微信扫码登录，比如我们的研发环境，测试环境，生产环境都需要做微信扫码登陆，但又不想给研发测试环境做外网的端口映射，那么可以使用这种方式。
首先在开放平台的授权回调域中写一个公共授权域名，比如oauth.loooswc.cn

然后将get-wechat-code.html页面放到该域名下，比如oauth.loooswc.cn/oauth/wechat/get-wechat-code.html
最后在调用微信获取code请求时，redirect_url就写oauth.loooswc.cn/oauth/wechat/get-wechat-code.html?env={env}&request=/oauth/wechat/login_callback.do，通过js代码根据参数env去判断应该重定向到哪个地址，比如env=dev时，则重定向到http://localhost:4200/oauth/wechat/login_callback.do。
但是这种办法有种缺点，就是会将研发测试环境的地址暴漏出去，而且这个地址对生产环境是没有任何意义的，虽然别人拿到这个内网地址也访问不通，但总归是不好的，所以我们可以使用下面这种方法，通过后台请求重定向。
附带get-wechat-code.html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>微信登陆</title>
</head>
<body>
<script>function getUrlParams(key) {var args = {};var pairs = location.search.substring(1).split('&');for (var i = 0; i < pairs.length; i++) {var pos = pairs[i].indexOf('=');if (pos === -1) {continue;}args[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1));}return args[key];}function getRealRedirectUrl(env){var realRedirectUrl = 'https://admin.loooswc.cn/';if('dev' == env){realRedirectUrl = 'http://localhost:8080/';}else if('test' == env){realRedirectUrl = 'http://192.168.1.10:30080/';}else if('pre-prod' == env){realRedirectUrl = 'http://192.168.1.20:30080/';}return realRedirectUrl;}function appendParams(params, url) {var baseWithSearch = url.split('#')[0];var hash = url.split('#')[1];for (var i = 0; i < params.length; i++) {if (params[i].value !== undefined) {var newParam = params[i].key + "=" + params[i].value;if (baseWithSearch.indexOf('?') > 0) {var oldParamReg = new RegExp(params[i].key + '=[-\\w]{0,40}', 'g');if (oldParamReg.test(baseWithSearch)) {baseWithSearch = baseWithSearch.replace(oldParamReg, newParam);} else {baseWithSearch += "&" + newParam;}} else {baseWithSearch += "?" + newParam;}}}if (hash) {url = baseWithSearch + '#' + hash;} else {url = baseWithSearch;}return url;}var code = getUrlParams('code');var appId = getUrlParams('appid');var scope = getUrlParams('scope') || 'snsapi_base';var state = getUrlParams('state');var env = getUrlParams('env');var request = getUrlParams('request');var redirectUrl;if (!code) {redirectUrl = appendParams([{key: 'appid',value: appId}, {key: 'redirect_uri',value: encodeURIComponent(location.href)}, {key: 'response_type',value: 'code'}, {key: 'scope',value: scope}, {key: 'state',value: state}], 'https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect');} else {redirectUrl = appendParams([{key: 'code', value: code},{key: 'state',value: state}], getRealRedirectUrl(env) + request);}location.href = redirectUrl;// window.close();
</script>
</body>
</html>

通过后台请求重定向

大体流程是，在某一个部署了后台服务的代码中，增加一个Controller接口，该接口通过参数中的env和request，将请求重定向到{env}+{request}接口中，同时附带上自定义和微信回调携带的code和state参数，从而达到转发请求的作用。

后台请求重定向做法

在后台程序中，增加一个Controller接口

@Controller
@RequestMapping("/oauth/wechat")
public class OauthWechatController {private static final Logger log = LoggerFactory.getLogger(OauthWechatController.class);@Autowiredprivate OauthWechatConfiguration oauthWechatConfiguration;@RequestMapping(value= "/redirect" , method = RequestMethod.GET)@ResponseBodypublic void  redirect(HttpServletRequest request, HttpServletResponse response) throws Exception {String requestUrl = request.getParameter("request");String code = request.getParameter("code");String state = request.getParameter("state");String env = request.getParameter("env");String platform = request.getParameter("platform");log.info("wechat授权跳转参数，env:"+env+",requestUrl:"+requestUrl+",code:"+code+",state:"+state);String redirectUrl = oauthWechatConfiguration.getRedirectProdUrl();if("dev".equals(env)){redirectUrl = oauthWechatConfiguration.getRedirectDevUrl();}else if("test".equals(env)){redirectUrl = oauthWechatConfiguration.getRedirectTestUrl();}else if("pre-prod".equals(env)){redirectUrl = oauthWechatConfiguration.getRedirectPreProdUrl();}String url = redirectUrl+requestUrl+"?platform="+platform+"&code="+code+"&state="+state;log.info("wechat授权跳转地址为："+ url);response.sendRedirect(url);}

@Configuration
@ConfigurationProperties(prefix = "oauth.wechat")
public class OauthWechatConfiguration {private String redirectDevUrl;private String redirectTestUrl;private String redirectPreProdUrl;private String redirectProdUrl;private String appId;private String appSecret;private String env;//setter and getter...
}

application.yml

oauth:wechat:redirectDevUrl: http://localhost:4201redirectTestUrl: http://192.168.1.10:30080redirectPreProdUrl: http://192.168.1.20:30080redirectProdUrl: https://admin.loooswc.cnappId: xxxxxxxxxxappSecret: xxxxxxxxxxenv: dev # dev研发 test测试 pre-prod准生产 prod生产

微信授权回调域填写admin.loooswc.cn

调用请求时redirect_url填写https://admin.loooswc.cn/oauth/wechat/redirect.do?env=dev&request=/oauth/wechat/login.do，当然是通过urlEncode处理过的。

这样就可以实现一个授权回调域对多个域名有效的效果了

微信扫码登录只能填一个授权回调域问题相关推荐

通过微信扫码登录剖析 oauth2 认证授权技术
本文目录前言趣味解读oauth2 oauth2精髓 oauth2核心概念结合微信登录深刻理解oauht2 本文小结前言相信很多小伙伴在学习 JAVA 的过程中或多或少接触或者开发过类似于 x ...
Java实现微信扫码登录并实现认证授权
Java实现微信扫码登录并实现认证授权 1.登录流程及原理 1.1 OAuth2协议网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.0 ...
后台管理使用微信扫码登录（小程序登录）
后台管理登录页添加一个微信登录按钮,点击弹窗二维码代码实现: /*** 该页面原本是用户协议页(产线页面),目前接入微信授权登录功能* 原因:微信扫码登录,后端生成的二维码仅能跳转当前生产环境小程 ...
微信扫码登录网站实现案例(无需授权)
前言最近因业务需要,需要给网站增加一个扫描公众号二维码登录网站的功能,通过扫码登录,一来用户登录网站不需再输入账号密码,提升了用户体验,二来也可以作为公众号吸粉的一个渠道. 开发准备实现微信扫码登 ...
PHP微信扫码关注公众号并授权登录源码
PHP微信扫码登录看起来简单,但做起来有点麻烦,开发起来就会浪费很多的时间. PHP判断是否首次关注公众号,扫码关注公众号获取微信用户头像.openid和省市等信息源码. 演示体验地址: https: ...
最新PHP微信扫码关注公众号并授权登录源码
正文: PHP微信扫码登录看起来简单,但做起来有点麻烦,开发起来就会浪费很多的时间. PHP判断是否首次关注公众号,扫码关注公众号获取微信用户头像.openid和省市等信息源码. 第一步:获取关注二维 ...
SpringSecurity OAuth2实现单点登录,微信扫码登录,Redis缓存验证码---入门到实战
1. 认证授权 1.1 什么是认证授权例如课程发布后用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间学习什 ...
微信开放平台开发——网页微信扫码登录（OAuth2.0）
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
项目整合微信扫码登录功能
项目整合微信登录功能一.准备工作 https://open.weixin.qq.com 1.注册 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5 ...

微信扫码登录只能填一个授权回调域问题

背景

使用html重定向

html重定向做法

通过后台请求重定向

后台请求重定向做法

微信扫码登录只能填一个授权回调域问题相关推荐

最新文章

热门文章