uniapp-微信公众号静默授权

news2024/11/16 1:21:22

第一次开发公众号,以为静默授权非常的复杂,后面才发现静默授权本质上就是跳一个微信的内部链接,拿到code,通过code再去获取openid即可。

在网上找到了一个比较详细的教程进行了一些改造

首先跳转静默授权的地址:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

只有appid和uri是自己的,其他的都是固定的
appid: 就是自己配置测试账号的appid
uri: 是静默授权后要跳转的地址,(需要上线的地址,否则跨域)

(这里一定要注意,跳转的地址是一定要进行转码的) 也可以直接用代码转码,更加方便

转码地址:http://www.ab173.com/gongju/enc/urlencode.php
在这里插入图片描述

接下来就是具体的实现代码:

import store from '@/store'

// 微信公众号授权
export function wxAuthorize() {
	// 非静默授权,第一次有弹框
	let local = '跳转的地址'; // 获取页面url
	let appid = 'appid' // 公众号appid
	let code = getUrlCode().code; // 截取code
	// 获取之前的code
	let oldCode = uni.getStorageSync('wechatCode')
	//判断是否存在code,不存在或者过期将重新授权
	if (code == null || code === '' || code == 'undefined' || code == oldCode) {
		// 如果没有code,就去请求获取code
		console.log('当前没有code,进入授权页面')
		//转码
		let uri = encodeURIComponent(local)
		// 设置旧的code为0,避免死循环
		uni.setStorageSync('wechatCode',0)
		window.location.href =
			`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
	} else {
		console.log('存在code,使用code换取用户信息')
		// 保存最新code
		uni.setStorageSync('wechatCode',code)
		uni.request({
			method: 'GET',
			url: this.userUrl+'/sys/getOpenId', // 你的接口地址
			data: {
				code:code
			},
			success: res => {
					console.log(res)
					//根据后端返回的结果和需求自行修改,这里直接讲openid本地存储了
				    uni.setStorageSync('OPEN_ID',res.data.openid)  //正式
			},
			fail: (err) => {
				window.alert('请求失败')
				console.log(err)
			}
		});
	}
}

function getUrlCode() {
	// 截取url中的code方法
	var url = location.search;
	// this.winUrl = url;
	var theRequest = new Object();
	if (url.indexOf('?') != -1) {
		var str = url.substr(1);
		var strs = str.split('&');
		for (var i = 0; i < strs.length; i++) {
			theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
		}
	}
	return theRequest;
}

使用:
在main.js中全局引入即可
在这里插入图片描述
需要静默授权的页面调用该方法:
在这里插入图片描述
注意:一般微信公众号的静默授权都是进入首页就授权
这样我们在配置公众号菜单的时候可以直接让他跳转静默授权的地址

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
这也避免了进入这个页面之后再去静默授权,出现页面闪动的效果。

注意点:

刚开始开发的时候,非常纠结于这个静默授权是否好用的问题,其实完全可以先去开发页面,因为他的影响并不大,就是拿到openid。
如何测试静默授权是否能够成功:
首先开发测试阶段要用 微信开发者工具中的公众号网页 项目测试
浏览器根本无法测试,运行项目也不会自动跳转,需要把运行地址手动赋值到里面

在这里插入图片描述
在这里插入图片描述
跳转的地址需要是放到服务器上,外网能够访问的,本地不可以
(如果能够配置跨域也是可以的,或者用花生壳穿透)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/623720.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

人体检测技术之TOF

人体检测技术之TOF 1.概述 智能人脸/视频锁领域的人体检测需求是要求远距离达到1m左右即可,一旦在此距离内检测人,则锁唤醒进行人脸识别,视频录制等操作。所以,人体检测技术非常关键。 选型主要是几个维度: 1.支持检测的距离范围,能否准确输出距离信息 2.支持检测FO…

100天涨薪4k!从功能测试到自动化测试,我整理的超全学习指南!

今年3月份&#xff0c;由于经济压力让我下定决心进阶自动化测试&#xff0c;已经24的我做了3年功能测试&#xff0c;坐标广州薪资定格在8k&#xff0c;可能是生活过的太安逸&#xff0c;觉得8000的工资也够了&#xff0c;但是生活总是多变的&#xff0c;女朋友的突然怀孕&#…

想让ChatGPT和低代码开发实现完美结合?看这篇文章就行!

关于ChatGPT ChatGPT&#xff0c;一款代表着目前人工智能最高水平的产物&#xff0c;自问世开始就饱受期待。这款由OpenAI所开发出来的大型语言模型&#xff0c;使用GPT-4技术来实现。其基于预训练数据集&#xff0c;可以进行自动聊天、自动生成各种文本等&#xff0c;被广泛应…

SpringBoot配置加载顺序

目录 前言一、Spring Boot 配置优先级二、命令行参数三、示例分析 前言 Spring Boot 不仅可以通过配置文件进行配置&#xff0c;还可以通过环境变量、命令行参数等多种形式进行配置。这些配置都可以让开发人员在不修改任何代码的前提下&#xff0c;直接将一套 Spring Boot 应用…

机器学习因子库及特征表达式,创业板布林带突破策略,年化13.3%(附代码)

原创文章第235篇&#xff0c;专注“个人成长与财富自由、世界运作的逻辑与投资"。 昨天有朋友留言说&#xff0c;L2R效果不好&#xff0c;当然我不知道这位兄弟的场景。 pybroker vs qlib pybroker的结构里&#xff0c;有一个特别的地方&#xff1a; 无论是规则型策略…

接口测试 —— 接口测试的意义

1、接口测试的意义&#xff08;优势&#xff09; &#xff08;1&#xff09;更早的发现问题&#xff1a; 不少的测试资料中强调&#xff0c;测试应该更早的介入到项目开发中&#xff0c;因为越早的发现bug&#xff0c;修复的成本越低。 然而功能测试必须要等到系统提供可测试…

GoogleTest之Matchers的用法

目录 组合匹配Matcher的类型转换重载函数的匹配基于参数执行不同的Actions多个参数作为一个整体匹配将Matchers作为谓词使用Matcher汇总 组合匹配 组合某些匹配某些值&#xff0c;可以使用以下&#xff1a; Matcher使用描述AllOf(m1, m2, …, mn)参数必须匹配m1, … mnAllOfA…

大数据:spark内核调度,DAG,job,宽窄依赖,stage阶段,内存计算管道,并行度task数量

大数据&#xff1a;spark内核调度 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其s…

【测试开发】实训记录日志

软件测试系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 了解测试开发和软件测试 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 …

建模杂谈系列226 流程与对象

说明 鲁迅说&#xff1a;我家门前门前有两棵树&#xff0c;一棵是枣树&#xff0c;另一棵也是枣树。 从编程语言的角度&#xff0c;可以分为两大类&#xff08;面向过程或面向对象&#xff09;&#xff0c;可以参考这篇文章 文章的内容其实不多&#xff0c;我贴一下&#xff1…

spark入门 YARN模式(六)

一、背景 独立部署&#xff08;Standalone&#xff09;模式由 Spark 自身提供计算资源&#xff0c;无需其他框架提供资源。这 种方式降低了和其他第三方资源框架的耦合性&#xff0c;独立性非常强。但是你也要记住&#xff0c;Spark 主 要是计算框架&#xff0c;而不是资源调度…

CATIA软件各版本区别

之前有个朋友问catia v5r21和catia v5-6r 2011&#xff0c;有什么区别&#xff0c;是一样的吗&#xff1f; 众联亿诚才发现&#xff0c;很多朋友似乎看不懂CATIA各种版本各种型号&#xff0c;那么今天&#xff0c;众联亿诚就来详细解释一下&#xff0c;希望能帮助朋友们解答心…

苹果电脑磁盘诊断工具 SMART Utility for mac

SMART Utility for mac是一款Mac上磁盘诊断工具&#xff0c;能够自动检测磁盘的状态和错误情况&#xff0c;分析并提供错误报告,以直观的界面让用户可明确地知道自己的磁盘状况。SMART Utilitymac版支持普通硬盘HDD和固态硬盘SSD&#xff0c;能够显示出详细的磁盘信息&#xff…

版权中心改革之后,软著办理需要多少钱?

版权中心改革之后&#xff0c;软著办理需要多少钱&#xff1f; 众所周知版权中心2年改了3次&#xff0c;每次改革官费都会涨&#xff0c;最近一次是在4月份&#xff0c;官费涨了近一倍。 其实费用涨了还不算最坏的情况&#xff0c;主要是每次改革办理软著的难度都会增加很多。…

(antD)vue项目使用图标

(antD)vue项目使用图标 效果&#xff1a; <a-icon type"arrow-left" class"backBtn" v-if"cardDiv" click"backBtn" />.backBtn {color&#xff1a;#ccc;font-size: 20px;//图标大小 }

程序员爬虫Scrapy框架知识学习

Scrapy是一个Python编写的高级网络爬虫框架&#xff0c;它可以帮助开发者快速、高效地从网站上获取数据。以下是学习Scrapy框架的一些步骤和建议&#xff1a; 学习Python基础知识&#xff1a;Scrapy是用Python编写的&#xff0c;因此需要掌握Python的基础知识&#xff0c;包括语…

利用彩虹线课程中的知识来制作精美的渐变色块和彩虹字

彩虹字 像这样的效果,同样我们可以使用“渐变色”的技巧。来看下面如何操作 选中字体,然后鼠标右键选”设置型状格式“ 选择“渐变” 有两处决定了彩虹字的样式。 拖动的箭头,这个箭头代表“每一个段”显示的色彩,如我DEMO中的字体是“两段颜色”-蓝+黄组合出来的;角度,…

在本地环境搭建GPT项目

先看效果: 在本地环境搭建gpt项目 1.简介 忽略不能写 2.准备环境 Docker的介绍和安装 Docker是一个开源的容器化平台,它可以帮助开发者和运维人员轻松地构建、打包和部署应用程序。使用Docker,您可以将应用程序及其所有依赖项打包到一个称为容器的独立单元中,使其可…

创新与互动的科技盛宴:探索3DVR元宇宙赛博科技世界虚拟展

导语&#xff1a; 在现代科技迅猛发展的时代&#xff0c;3DVR元宇宙虚拟展厅为我们带来了一场前所未有的科技盛宴。特别是在赛博科技领域&#xff0c;它展现了一系列令人惊叹的优势、优点和实质性的作用&#xff0c;为客户带来了非凡的体验和无限的可能。 一&#xff0e;创新科…

在windows上用gpu训练paddleocr模型所有遇到的坑与解决办法

这里写自定义目录标题 1.首先拉取paddleocr源代码下载预训练模型2.开始训练更改yml配置文件 3.遇到的报错1.ModuleNotFoundError: No module named Polygon2.最难解决的No module named lanms3.ImportError: cannot import name _print_arguments from paddle.distributed.util…