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

最新推荐文章于 2024-04-23 15:17:47 发布
最新推荐文章于 2024-04-23 15:17:47 发布
阅读量4.9k 收藏 18
点赞数 2
分类专栏： java 文章标签： 微信扫码登录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31873375/article/details/101362624
版权

背景

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

使用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);

	@Autowired
	private OauthWechatConfiguration oauthWechatConfiguration;

	@RequestMapping(value= "/redirect" , method = RequestMethod.GET)
	@ResponseBody
	public 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:4201
      redirectTestUrl: http://192.168.1.10:30080
      redirectPreProdUrl: http://192.168.1.20:30080
      redirectProdUrl: https://admin.loooswc.cn
      appId: xxxxxxxxxx
      appSecret: xxxxxxxxxx
      env: 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处理过的。

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

c.9u
关注
  • 2
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信多域名回调功能
meng88522的博客
02-02 466
微信公众号网页授权跳转链接：https://###.#####/connect/oauth2/authorize?微信开放平台登录跳转链接：https://###.#####/connect/qrconnect?将业务代码中的https://open.weixin.qq.com替换成https://###.#####此功能和微信Token管理没任何关系，使用此功能无需在微信Token管理添加记录！支持微信公众号、微信开放平台、企业微信3种登录的回调，替换后的地址如下所示。
解决微信授权回调页面域名只能设置一个的问题
12-19
最终的解决方案是：https://github.com/liuyunzhuge/php_weixin_proxy，详细的介绍请往下阅读。 在做项目集成微信登录以及微信支付的时候，都需要进行用户授权。这个授权的流程可以简单描述为： 1. 用户从我们的应用触发需要授权的操作，比如点击微信登录； 2. 应用收到这种用户请求后，将用户重定向到微信提供的一个授权页面： 或 3. 用户通过微信扫码（PC端授权，上边左图）或者点击确认按钮（移动端授权，上边右图）告知微信，授权应用访问自己的微信账号信息； 4. 微信收到用户的授权许可后，生成授权码，并把它作为参数回调至应用的某个页面； 5. 应用的回调页面在
微信扫码登录后续
最新发布
yusheng_xyb的博客
04-23 795
参考接口规范中“请求获取授权码” 定义接收微信下发的授权码接口，@Slf4jlog.debug("微信扫码回调,code:{},state:{}",code,state);//请求微信申请令牌，拿到令牌查询用户信息，将用户信息写入本项目数据库//暂时硬编写，目的是调试环境定义微信认证的service/*** @description 微信扫码认证*/@Slf4j@Autowired@Override//账号//返回空表示用户不存在。
spring security oauth2 实现微信登陆（授权回调域、前端重定向、微信解绑、获取用户信息中文乱码等相关问题解析）
SuperBins的博客
08-26 7694
OAuth 的核心 OAuth 的核心就是向第三方应用颁发令牌。OAuth提供了四种获取令牌的授权方式 授权码（authorization-code）、隐藏式（implicit）、密码式（password）、客户端凭证（client credentials）。 而微信登陆采用的是授权码模式。 背景 目前项目大多都是采用前后端分离模式开发。本文前端采用 vue ，后端采用spring boot + ...
解决微信授权回调页面域名只能设置一个的问题 [php]
weixin_33978044的博客
12-11 918
最终的解决方案是：https://github.com/liuyunzhuge/php_weixin_proxy，详细的介绍请往下阅读。 在做项目集成微信登录以及微信支付的时候，都需要进行用户授权。这个授权的流程可以简单描述为： 1. 用户从我们的应用触发需要授权的操作，比如点击微信登录； 2. 应用收到这种用户请求后，将用户重定向到微信提供的一个授权页面： 或 3...
pc端网页实现微信扫码登录
花铛
04-15 9303
点击按钮，跳转微信授权页面，用户需要扫码进行授权登录。 //拉取授权页面 let appid = '自己应用的appid' let redirect_uri = encodeURIComponent('授权登录后跳转回的页面') location.href=`https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&amp...
解决微信OAuth2.0网页授权只能设置一个回调域名的问题
极客神殿
06-22 8817
get-weixin-code.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信登录</title> </head> <body> <script> var GWC = {
微信扫码登录资料_Go-Pay_GoPayuser_微信扫码登录资料_微信登录_
10-03
总的来说，微信扫码登录是一个涉及OAuth2.0授权、二维码生成、回调处理、用户信息获取以及会话管理等多个技术点的过程。对于Java开发者而言，熟悉这些流程并能实际编写代码是提升技能的关键。通过学习提供的源码资料...
ASP网页调用微信扫码登录方法
08-17
用户在微信客户端授权后，会被重定向回你在开放平台设置的回调地址，此时URL中会携带一个code参数。`test.asp`文件可能包含处理这个回调请求的逻辑，通过code换取access_token和openid，这是用户唯一标识。 5. **...
基于Winfrom的企业微信扫码登录案例
02-02
而在这个“基于Winfrom的企业微信扫码登录案例”中，我们将探讨如何利用C#编程语言集成企业微信的扫码登录功能，为用户提供安全、便捷的身份验证方式。 首先，企业微信扫码登录的核心在于调用其提供的API接口。企业...
java解决微信公众号网页授权域名只能填写一个的问题
alikadejiao的博客
04-26 2541
做微信开发的，必不可少的涉及到微信网页授权，来获取用户信息的功能。想要实现公众号通过微信网页授权机制，来获取用户基本信息，必须先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，填写授权回调域名。但是呢，在微信公众号后台，业务域名和JS安全域名都可以填写3个，唯独网页授权域名只能填写一个。...
微信扫码授权到登录网页，中间究竟发生了什么？
zhangkaixuan456的博客
05-29 1589
在微信开放平台进行配置和申请，获得，配置好自己的回调URI根据拿到的数据，配上指定的参数得到二维码的URL微信SDK在二维码页面进行15s一次轮询检测，对于不同的状态有不同的状态码：如果没有扫码：状态码为408，且code为空如果扫码既不接受也不拒绝授权：状态码为404，且code为空如果扫码但是拒绝授权：状态码为403，且code为空如果扫码并且同意授权：状态码为405，返回一个code微信SDK检测到状态码和code后，进行对之前配置的回调URI的重定向，带上code。
PC网站实现微信扫码登录功能（二）
热门推荐
qq_35771266的博客
08-19 2万+
上篇我们介绍了怎么申请账号以及最后拿到appId和appSecret,如果有不清楚的可以看一下 PC网站实现微信扫码登录功能（一） 下面我就来说一下怎样在PC端怎么实现扫码登录功能。 一、进入官方文档网站 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 其实官网对过程描述的已经非常细致了。并且提供了两种扫码方式。一种是跳转二维码扫描页面，另一种是内嵌式二维码。大家可以
PC网站实现微信扫码登录功能（一）
qq_35771266的博客
08-19 1万+
现在微信的使用用户越来越多，如果网站添加上微信登录，就能节省很多用户注册时间，极大缩小了注册流程。会让用户觉得特别方便。接下来我们就说一下怎么来实现PC端微信扫码登录。 一、微信开放平台账户申请 网址：https://open.weixin.qq.com/ 首先我们要做的就是进入到微信开放平台申请一个开放平台账户 进入页面以后，点击注册按钮，开始注册我们的新账户。按照要求一步一步完成注册即可。 二、微信认证 注册好账号以后如果想要实现扫码登录还必须要先进行认证。这个认证会收取300元认.
pc端网站微信登录
weixin_41537467的博客
04-30 1811
PC端网站的微信登录，首先要开通微信开放平台，跟微信公众号开发所需微信公众平台意思差不多。百度搜索微信开放平台，点击官网即可。 一.微信开放平台 这个平台的重点就是AppID、AppSecret和回调域名，后续用的到。 二.微信登录 这个是微信登录的官方文档。可以参考一下。微信登录官方文档 1.前端页面操作 调用微信扫码登录的地址 https://open.weixin.qq.com/con...
关于微信回调页面的修改，方便本地测试。
江湖行骗老中医
05-06 747
在实际开发中，比如做微信登录的时候，我们不可能确保自己的代码写得没有问题。这时候就需要本地测试。 然而微信的授权回调域是需要公网可以访问的。那我们如何在本地测试呢？ 经过大佬的提点，发现在本机的host文件里面，将对应的本机网站。比如127.0.0.1 指向为微信开放平台的对应的域名。比如：www.yangxing8jn.cn 然后在测试的时候，登录后就会跳到本机的localhost的网站上。这时候就可以轻易的测试并获取到微信的用户信息了。 例如127.0.0.1　www.yangxing8j..
只用测试号或认证服务号，实现电脑PC浏览器扫码微信扫码二维码登陆的思路，无需开放平台
e.kj@163.com
07-18 1766
这里有个思路只用认证服务号，不需要开放平台。 至于用unioid还是openid，个人认为只要是便于方便、准确认证客户身份即可。 只用认证服务号认证思路如下： 已知条件： 1、内置浏览器环境可以获取openid，（步骤不详述，自查）。 2、内置浏览器环境获取openid时可以静默授权（无需用户端点击确认）。 3、授权第一步客户打开”https:/ /open.weixin.qq.com/conne...
微信开放平台PC端扫码登录功能个人总结
weixin_34368949的博客
12-15 1620
　　最近公司给我安排一个微信登录的功能，需求是这样的： 　　1.登录授权 　　　　点击二维码图标后，登录界面切换为如下样式（二维码），微信扫描二维码并授权，即可成功登录； 　　　 若当前账号未绑定微信账号，扫描后提示“您的账号未绑定微信号，请先登录绑定”； 　　　 点击“返回”按钮，界面切换为账号密码登录； 　　 若微信号绑定多个账号在，则展示所绑定全部账号的用...
给一个springboot整合微信扫码登录的示例
03-08
好的，以下是一个springboot整合微信扫码登录的示例： 1. 首先，在微信公众平台上创建一个应用，并获取到AppID和AppSecret。 2. 在Spring Boot项目中添加以下依赖： ``` <dependency> <groupId>com.github.binarywang</groupId> <artifactId>weixin-java-mp</artifactId> <version>3.4.</version> </dependency> ``` 3. 在application.properties文件中配置AppID和AppSecret： ``` wechat.mp.appId=your_app_id wechat.mp.secret=your_app_secret ``` 4. 创建一个Controller，用于处理微信扫码登录的请求： ``` @RestController @RequestMapping("/wechat") public class WechatController { @Autowired private WxMpService wxMpService; @GetMapping("/login") public String login(HttpServletRequest request) throws WxErrorException { String redirectUrl = "http://your_domain.com/wechat/callback"; String state = UUID.randomUUID().toString(); String url = wxMpService.oauth2buildAuthorizationUrl(redirectUrl, WxConsts.OAuth2Scope.SNSAPI_USERINFO, state); return "redirect:" + url; } @GetMapping("/callback") public String callback(HttpServletRequest request) throws WxErrorException { String code = request.getParameter("code"); WxMpOAuth2AccessToken accessToken = wxMpService.oauth2getAccessToken(code); WxMpUser user = wxMpService.oauth2getUserInfo(accessToken, null); // TODO: 处理用户信息 return "success"; } } ``` 5. 在启动类中添加以下代码，初始化WxMpService： ``` @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } @Bean public WxMpService wxMpService() { WxMpService wxMpService = new WxMpServiceImpl(); wxMpService.setWxMpConfigStorage(wxMpConfigStorage()); return wxMpService; } @Bean public WxMpConfigStorage wxMpConfigStorage() { WxMpInMemoryConfigStorage configStorage = new WxMpInMemoryConfigStorage(); configStorage.setAppId("your_app_id"); configStorage.setSecret("your_app_secret"); return configStorage; } } ``` 以上就是一个简单的springboot整合微信扫码登录的示例，希望对你有帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值