wx-微信公众号-静默登陆授权

介绍

功能: 支持微信/支付宝网页静默授权
为什么需要线上html
因为在开发环境的时候,是本地服务http://localhost:8080,但是微信需要JS接口安全域名.

配置信息

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“网页授权域名”
然后把 html 文件放到服务器上, 安全域名指向这个html
在 vue 环境配置文件(.env.development、.env.production),中配置以下参数
1. VUE_APP_WX_GET_CODE_DOMAIN = ‘第二步的html文件的线上地址’
2. VUE_APP_APP_ID = ‘微信/支付宝的appid’
使用方法:
1. 直接调取 util 文件中的 getAuthorCode 方法
2. 调取完后,就可以在地址栏中,看到那个 code 了 (获取code的时候,可以使用这个方法 onGetRequest().code )

代码信息

授权文件


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>授权code</title>
</head>
<body></body>
</html>
<script>
(function () {var tools = {getParamer: function (key) {var map = this.getSearch();return map[key];},getSearch: function () {var search = window.location.search;return this.getSearchByStr(search);},getSearchByStr: function (search) {if (search) {search = search.substring(1);} else {return {};}var strsz = search.split("&");var map = {};for (var i = 0; i < strsz.length; i++) {var strs = strsz[i];if (strs.indexOf("=") != -1) {var tempsz = strs.split("=");var tempkey = tempsz[0];var tempvalue = tempsz[1];map[tempkey] = decodeURIComponent(tempvalue);}}return map;},setLocalStorage: function (key, val) {var map = {};map[key] = val;localStorage.setItem(key, JSON.stringify(map));},getLocalStorage: function (key) {var mapStr = localStorage.getItem(key);if (!mapStr) {mapStr = "{}";}var map = JSON.parse(mapStr);return map[key];},urlAddProp: function (url, key, val) {var jing = url.indexOf("#");var left = "";var right = "";if (jing == -1) {//无#号情况left = url;} else {//有#号情况left = url.substring(0, jing);right = url.substring(jing);}if (left.indexOf("?" + key + "=") != -1 || left.indexOf("&" + key + "=") != -1) {var start = left.indexOf("?" + key + "=");if (start == -1) {start = left.indexOf("&" + key + "=");}var end = left.indexOf("&", start + 1);if (end == -1) {end = left.length;}right = left.substring(end) + right;left = left.substring(0, start + 1);} else {var type = left.indexOf("?") != -1 ? "&" : "?";left += type;}var data = key + "=" + val;return left + data + right;},/*** 设置环境*/getCodeName() {if (/MicroMessenger/.test(window.navigator.userAgent)) {  // 微信return 'code'} else if (/AlipayClient/.test(window.navigator.userAgent)) { // 支付宝return 'auth_code'} else {return ''}}}function wxLogin(callback) {const codeName = tools.getCodeName()if (tools.getParamer(codeName)) {callback(tools.getParamer(codeName));} else {//去取codelet url = ''var appid = tools.getParamer('appid');if(codeName === 'code'){url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodeURIComponent(window.location.href) + "&response_type=code&scope=snsapi_base&state=1#wechat_redirect";}else if(codeName === 'auth_code'){url = "https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=" + appid + "&redirect_uri=" + encodeURIComponent(window.location.href) + "&response_type=code&scope=auth_base";}window.location.href = url;}}var url = tools.getParamer("url");tools.setLocalStorage("url", url);wxLogin(function (code) {const codeName = tools.getCodeName()var toUrl = tools.getLocalStorage("url");toUrl = tools.urlAddProp(toUrl, codeName, code);window.location.href = toUrl;});
})()
</script>

util 文件

// 在util 文件中放入一下方法
/*** 获取认证 code* @param {String}} routerCallback  回调路由*/
function getAuthorCode(routerCallback) {const a = document.createElement('a');const urlCallback = encodeURIComponent(process.env.VUE_APP_BASE_DOMAIN + routerCallback);if (process.env.NODE_ENV === 'development') {// 测试环境走线上a.href = `${process.env.VUE_APP_WX_GET_CODE_DOMAIN}?url=${urlCallback}&appid=${process.env.VUE_APP_APP_ID}`;} else {// 正式环境 直接获取switch (judgeEnvironment()) {case 'WX':a.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.env.VUE_APP_APP_ID}&redirect_uri=${urlCallback}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;break;case 'ZFB':a.href = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${process.env.VUE_APP_APP_ID}&redirect_uri=${urlCallback}&response_type=code&scope=auth_base`;break;case 'OTHER':a.href = 'javascript:;'console.error('当前环境不支持授权~')break;}}document.body.appendChild(a);a.click();document.body.removeChild(a);
}
/***  获取 url* @returns params的参数*/
function getUrl() {const url = window.location.hrefvar params = []var hvar hash = url.slice(url.indexOf('?') + 1).split('&')for (var i = 0; i < hash.length; i++) {h = hash[i].split('=') //params[h[0]] = h[1]}return params
}
/*** 判断浏览器环境*/
function judgeEnvironment() {if (/MicroMessenger/.test(window.navigator.userAgent)) {return 'WX'} else if (/AlipayClient/.test(window.navigator.userAgent)) {return 'ZFB'} else {return 'OTHER'}
}
/**** @returns {Object} url参数集*/
function onGetRequest() {const url = window.location.hrefvar params = []var hvar hash = url.slice(url.indexOf('?') + 1).split('&')for (var i = 0; i < hash.length; i++) {h = hash[i].split('=')params[h[0]] = h[1]}return params
}

wx-微信公众号-静默登陆授权相关推荐

微信公众号开发之授权
微信公众号开发之授权开发前准备首先准备自己的服务器资源,已有服务器的请忽略服务器资源. 我这里演示新浪云服务器环境搭建:(新注册号有免费云豆可用) 服务器资源(https://sae.sina.c ...
微信公众号的网页授权如何在本地调试？
调试微信公众号的网页授权时,要填写网页授权域名(如图1),否则授权的时候会提示redirect_uri参数错误(图2),可是我得在localhost先调试成功才能上传到实际的网站上吧,可是这里不支持l ...
微信，支付宝支付，微信公众号小程序授权等
微信,支付宝支付,微信公众号小程序授权等前言微信支付微信授权 maven依赖(更新) 前言最近在公司也做了很多移动端项目,如今微信公众号,小程序又特别火爆,免不了要接触支付,授权这类的业务需求 ...
微信公众号开发之授权登录（前端vue篇）
前序: 由于之前一直是后端直接调用微信授权后,拿到相关信息后再返回给我(就是以前的前后端不分离),所以对微信公众号开发的微信授权登录还一直处于懵逼情况,直到今天有一个项目需要前后端分离,要前端主动去获 ...
微信公众号-测试号-网页授权
微信公众号-测试号-网页授权自己摸索几天,总算搞清楚了第一步登录微信公众号平台,开发者工具菜单进入公众平台测试账号第二步设置网页帐号网页授权获取用户基本信息的域名,测试号是可以用ip和域名 ...
微信公众号无限回调授权系统源码
微信公众号后台默认只能授权两个网页域名,用此源码可以突破这个限制,对接无限个网站域名授权!! 准备工具:微信公众号授权无限回调工具认证过的公众号,记着加白名单IP,这个网上教程很多就是在微信公众号设 ...
微信公众号平台登陆-你已授权登陆过XXXX
上周开始开发微信从微信公众号点击按钮去我们的服务器结果除了第一次点击按钮确认授权以外,以后每次都会出现这个页面加班研究了好几天终于解决了原来参考微信公众号平台文档文档告诉我,state这个 ...
微信公众号开发之授权获取用户信息
微信开发交流群:148540125 系列文章参考地址极速开发微信公众号欢迎留言.转发.打赏项目源码参考地址点我点我--欢迎Start 前几篇文章已讲完如何导入项目,如何启动配置项目,如何成为开 ...
url 微信公众号开发配置失效_微信公众号开发之授权登录
一.UnionId和openId 微信登录最重要的两个返回信息,一个是UnionId,一个是OpenId.两者之间有着必然的联系. UnionID机制的作用说明:如果开发者拥有多个移动应用.网站应用和 ...
基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...

wx-微信公众号-静默登陆授权

介绍

配置信息

代码信息

授权文件

util 文件

wx-微信公众号-静默登陆授权相关推荐

最新文章

热门文章