转载：解决微信OAuth2.0网页授权回调域名只能设置一个的问题
项目地址：https://github.com/HADB/GetWeixinCode
说明：微信项目很多，但是回调域名有限，经常使用，做个笔记。
解决微信OAuth2.0网页授权只能设置一个回调域名的问题
get-weixin-code.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>微信登录</title>
</head> <body>
<script>
var GWC = {
version: '1.1.1',
urlParams: {},
appendParams: function(url, params) {
if (params) {
var baseWithSearch = url.split('#')[0];
var hash = url.split('#')[1];
for (var key in params) {
var attrValue = params[key];
if (attrValue !== undefined) {
var newParam = key + "=" + attrValue;
if (baseWithSearch.indexOf('?') > 0) {
var oldParamReg = new RegExp('^' + key + '=[-%.!~*\'\(\)\\w]*', '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;
},
getUrlParams: function() {
var pairs = location.search.substring(1).split('&');
for (var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('=');
if (pos === -1) {
continue;
}
GWC.urlParams[pairs[i].substring(0, pos)] = decodeURIComponent(pairs[i].substring(pos + 1));
}
},
doRedirect: function() {
var code = GWC.urlParams['code'];
var appId = GWC.urlParams['appid'];
var scope = GWC.urlParams['scope'] || 'snsapi_base';
var state = GWC.urlParams['state'];
var device = GWC.urlParams['device']; var authUrl; var redirectUri;
if (!code) { if (device == 'pc') {
authUrl = 'https://open.weixin.qq.com/connect/qrconnect';//（电脑扫码登录）微信开放平台申请https://open.weixin.qq.com/
} else {
authUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize#wechat_redirect';//（手机微信浏览器登录）微信公众号https://mp.weixin.qq.com/
}
//第一步，没有拿到code，跳转至微信授权页面获取code
redirectUri = GWC.appendParams(authUrl, {
'appid': appId,
'redirect_uri': encodeURIComponent(location.href),
'response_type': 'code',
'scope': scope,
'state': state, });
} else {
//第二步，从微信授权页面跳转回来，已经获取到了code，再次跳转到实际所需页面
redirectUri = GWC.appendParams(GWC.urlParams['redirect_uri'], {
'code': code,
'state': state
});
}
location.href = redirectUri;
}
};
GWC.getUrlParams();
GWC.doRedirect();
</script>
</body> </html>
使用方法
部署
get-weixin-code.html至你的微信授权回调域名的目录下使用方式类似于直接通过微信回调的方式，只是将回调地址改成了
get-weixin-code.html所在的地址，另外省去了response_type参数（因为它只能为code）以及#wechat_redirect（它是固定的），它们会在get-weixin-code.html里面自己加上get-weixin-code.html页面从微信那里拿到code之后会重新跳转回redirect_uri里面填写的url，并且在url后面带上code和state
详细示例
前往微信公众平台->接口权限->网页授权获取用户基本信息->修改，填写授权回调页面域名，例如
www.abc.com在
www.abc.com域名下部署get-weixin-code.html，不一定是根目录，例如：http://www.abc.com/xxx/get-weixin-code.html假设你的
http://www.xyz.com/hello-world.html这个页面需要获取微信授权，那么你应该使用以下地址来获取授权：(device = pc 是电脑端扫码登录用到的，微信开放平台接口)http://www.abc.com/xxx/get-weixin-code.html?appid=XXXX&scope=snsapi_base&state=hello-world&redirect_uri=http%3A%2F%2Fwww.xyz.com%2Fhello-world.html&device=pc
这样最终就会跳转到这样一个地址：
http://www.xyz.com/hello-world.html?code=XXXXXXXXXXXXXXXXX&state=hello-world，从而你就拿到了授权code以及自定义的state参数了
其他说明
通过多一次的跳转，解决了微信限制回调域名只能设置一个的问题
牺牲了一点用户体验，换来了项目部署的美感，不需要将各种项目都部署到一个域名下
很多朋友问我怎么支持第三方微信平台，这个需要对不同的第三方平台的授权方式有所了解，熟悉他们的授权方式，请求参数等。如果他们是通过在网站入口处的URL上进行授权的，那么可以使用本项目，将入口的URL改成上述的方式，如果他们是在流程中的某些页面去获取授权，那么是没法改变他们的获取地址的，所以本项目就不适用了
转载：解决微信OAuth2.0网页授权回调域名只能设置一个的问题的更多相关文章
- 解决微信OAuth2.0网页授权回调域名只能设置一个的问题
https://github.com/HADB/GetWeixinCode GetWeixinCode 解决微信OAuth2.0网页授权回调域名只能设置一个的问题 使用方法 部署get-weixin- ...
- 微信OAuth2.0网页授权设置一个域名需多个域名使用的问题
最近遇到一个问题,一个微信公众号,需要在多个域名上使用OAuth2.0网页授权,但微信OAuth2.0网页授权回调域名只能设置一个. 解决办法: 通过多一次的跳转,解决了微信限制回调域名只能设置一个的 ...
- 微信OAuth2.0网页授权接口
微信OAuth2.0网页授权接口 微信OAuth2.0网页授权接口的thinkphp实现版本号.主要实现了oauth网页受权,以及部分其它接口. 用法 为什么用OAuth2.0受权? 通过OAuth2 ...
- 微信OAuth2.0网页授权
1.OAuth2.0网页授权 关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页 ...
- 微信OAuth2.0网页授权php示例
1.配置授权回调页面域名,如 www.aaa.com 2.模拟公众号的第三方网页,fn_system.php <?php if(empty($_SESSION['user'])){ header ...
- 微信公众平台开发（71）OAuth2.0网页授权
微信公众平台开发 OAuth2.0网页授权认证 网页授权获取用户基本信息 作者:方倍工作室 微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友在使 ...
- 微信公众平台开发（71）OAuth2.0网页授权-摘抄
微信公众平台开发 OAuth2.0网页授权认证 网页授权获取用户基本信息 作者:方倍工作室 微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友 ...
- 微信OAuth2.0网页受权php
www.MyException.Cn 网友分享于:2014-01-19 浏览:2504次 微信OAuth2.0网页授权php示例 1.配置授权回调页面域名,如 www.aaa.com 2.模拟公众号的 ...
- Force.com微信开发系列（七）OAuth2.0网页授权
OAuth是一个开放协议,允许用户让第三方应用以安全且标准的方式获取该用户在某一网站上存储的私密资源(如用户个人信息.照片.视频.联系人列表),而无须将用户名和密码提供给第三方应用.本文将详细介绍OA ...
随机推荐
- 利用Tomcat部署Web项目报错
1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...
- C# 枚举使用和对应说明获取实例
1.定义枚举 /// <summary> /// 订单状态 /// </summary> public enum OrderState { 待支付 = 1, 待处理 = 2, ...
- Good Bye 2017 E. New Year and Entity Enumeration
先按照绿点进行分块 第一个绿点和最后一个绿点之后很好处理不说了 两个绿点之间的讨论: 有两种方案 1:红(蓝)点和绿点顺序连接,距离为相邻绿点距离(也就是双倍绿点距离) 2:红(蓝)点和绿点的点阵中寻 ...
- C# 图解教程 第三章 类型、存储和变量
类型.存储和变量 C#程序是一组类型声明类型是一种模板实例化类型数据成员和函数成员预定义类类型用户定义类型栈和堆 栈堆 值类型和引用类型 存储引用类型对象的成员C#类型的分类 变量静态类型和dynam ...
- 第十篇：K均值聚类(KMeans)
前言 本文讲解如何使用R语言进行 KMeans 均值聚类分析,并以一个关于人口出生率死亡率的实例演示具体分析步骤. 聚类分析总体流程 1. 载入并了解数据集:2. 调用聚类函数进行聚类:3. 查看聚类 ...
- 第一篇：操纵MySQL数据库(1) - 基于MySQLdb库
前言 本文讲解在Python语言中使用MySQLdb库操纵MySQL数据库的方法. 准备工作 1. 安装Python和MySQL2. 安装MySQLdb (exe下载地址:http://sourcef ...
- Mybatis【逆向工程，缓存，代理】知识要点
前言 本文主要讲解Mybatis的以下知识点: Mybatis缓存 一级缓存 二级缓存 与Ehcache整合 Mapper代理 使用Mapper代理就不用写实现类了 逆向工程 自动生成代码 Mybat ...
- [LOJ2230][BJOI2014]大融合
题面戳我 sol LCT维护子树size. 开一个数组\(sz_i\)表示一个节点的所有虚儿子的size和,\(sum_i\)表示以一个节点为根的子树的\(size\)和,可见\(sz_u=\sum_ ...
- 备库搭建后，进入备库报错psql: FATAL: the database system is starting up
备库搭建后,进入备库报错psql: FATAL: the database system is starting up 原因:备库配置文件没有hot_standby = on mast ...
- 【Learning】带花树——一般图最大匹配
一般图最大匹配--带花树 问题 给定一个图,求该图的最大匹配.即找到最多的边,使得每个点至多属于一条边. 这个问题的退化版本就是二分图最大匹配. 由于二分图中不存在奇环,偶环对最大匹配并无 ...