2024最新Uniapp的H5网页版添加谷歌授权验证

现在教程不少,但是自从谷歌升级验证之后,以前的老教程就失效了,现在写一个新教程以备不时之需。

由于众所周知的特殊原因,开发的时候一定注意网络环境,如果没有梯子是无法进行开发的哦~

clientID的申请方式我就不再进行赘述了,其他的教程上面都有,我这边只提供最重要的东西

1、要在html文件中导入谷歌的js文件

<script src="https://accounts.google.com/gsi/client"></script>

自己创建一个模版html文件扔进去就可以,比如说我就创建了一个template.h5.html文件,如下图所示:

2、将html设置为模板

3、复制以下代码放在合适的位置

<view class="py-5"><div id="g_id_onload"data-client_id="你的clientID"data-login_uri="http://localhost:8080/" data-auto_prompt="false"></div><div class="g_id_signin" data-type="standard" data-size="large" data-theme="outline"data-text="sign_in_with" data-shape="rectangular" data-logo_alignment="left"></div></view>

这个代码,是一个按钮,效果如下:

你需要将他放到你代码中合适的位置。注意:没有梯子不显示

4、调用谷歌验证的代码

b64DecodeUnicode(str) {return decodeURIComponent(atob(str).replace(/(.)/g, (m, p) => {let code = p.charCodeAt(0).toString(16).toUpperCase();if (code.length < 2) {code = "0" + code;}return "%" + code;}));},base64UrlDecode(str) {let output = str.replace(/-/g, "+").replace(/_/g, "/");switch (output.length % 4) {case 0:break;case 2:output += "==";break;case 3:output += "=";break;default:throw new Error("base64 string is not of the correct length");}try {return this.b64DecodeUnicode(output);}catch (err) {return atob(output);}},handleCredentialResponse(response) {console.log("Encoded JWT ID token: " + response.credential);// 发送ID Token到服务器进行验证this.OnGoogleAuthSuccess(response.credential);},OnGoogleAuthSuccess(idToken) {const payload = idToken.split('.')[1]; // 获取JWT的负载部分const decodedPayload = JSON.parse(this.base64UrlDecode(payload));console.log("token 解析:", decodedPayload);// Receive the idToken and make your magic with the backend},OnGoogleAuthFail(error) {console.log("error")console.log(error)},

5、以下代码放到onReady中

var that = this;if (google) {google.accounts.id.initialize({client_id: '你的ClientID',callback: that.handleCredentialResponse,});google.accounts.id.renderButton(document.querySelector('.g_id_signin'), // 按钮容器{theme: 'outline',size: 'large'} // 按钮配置);//google.accounts.id.prompt(); // 显示登录提示} else {// 如果库尚未加载完成,设置定时器等待const checkGoogleLibrary = setInterval(() => {if (google) {clearInterval(checkGoogleLibrary);google.accounts.id.initialize({client_id: '你申请到的ClientID',callback: that.handleCredentialResponse});google.accounts.id.renderButton(document.querySelector('.g_id_signin'), // 按钮容器{theme: 'outline',size: 'large'} // 按钮配置);//google.accounts.id.prompt(); // 显示登录提示}}, 100);}

现在已经完成了,点击登录,控制台就会输出以下信息(OnGoogleAuthSuccess这个函数输出的):

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

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

相关文章

HTML开发笔记:3.图形化开发软件与模版网站

一、Google Web Designer 下载网址&#xff1a;webdesigner.withgoogle.com&#xff08;得挂梯子&#xff09; 可以编辑文字 可以插入图片&#xff0c;快捷键是ctrlshiftI 右侧“大纲”属性中可以调节大小 可以点击右上角在浏览器中预览效果&#xff1a; 二、模版网站 https://…

数据库编程中游标 连接 commit 字符集

在数据库编程中&#xff0c;关闭游标和连接是一个重要的步骤&#xff0c;确保资源正确地释放和数据库操作的完整性。 游标&#xff08;Cursor&#xff09;和连接&#xff08;Connection&#xff09;是数据库编程中两个关键但不同的概念。它们在数据库操作中的作用和功能有所不…

Python Flask入门到精通:详细教程和实战案例

前言 Flask是一个轻量级的Web框架&#xff0c;用于快速开发Web应用程序。它的设计理念是简洁、灵活和易于扩展&#xff0c;非常适合于从简单的单页应用到复杂的大型项目。通过Flask&#xff0c;可以创建各种Web应用程序&#xff0c;比如博客、电子商务网站、RESTful API等。 …

紫霞仙子和至尊宝的对白

背景介绍 至尊宝和紫霞仙子是电影《大话西游》中的人物。该电影讲述了至尊宝放弃戴上金箍成为盖世英雄&#xff0c;选择当一个凡人&#xff0c;与‌紫霞仙子长相厮守的故事。这部电影通过奇幻、冒险、喜剧和悲剧的元素&#xff0c;展现了一段跨越时空的爱情故事&#xff0c;充…

ODBC+FreeTDS从Linux访问Windows SqlServer数据库

提示 \color{red}{提示} 提示&#xff1a; 《Linux系统上编译安装FreeTDS库文件》中讲述了如何编译FreeTDS源码&#xff0c;并安装。 本文部分内容会在上述文章的基础上深入。 本文内容所使用的环境 Windows系统&#xff1a;Windows 10 企业版 64位操作系统&#xff1b;IP&a…

WordPress主题追格企业官网主题免费开源版V1.1.6

追格企业官网主题免费开源版由追格开发的一款开源wordpress主题&#xff0c;专为企业建站和追格企业官网小程序&#xff08;开源版&#xff09;PC配套而设计&#xff0c;功能集新闻动态、留言反馈、产品与服务、公司简介、联系我们等模块。

如何通过集成软件授权管理系统推动企业业务增长?

软件货币化已经成为许多企业商业成功的关键&#xff0c;随着全球数字化进程不断深入&#xff0c;其重要性也在不断增加。将许可解决方案优化集成到现有系统中&#xff0c;已成为从接收到订单到交付和激活许可的任何高效流程的基本要素。 软件货币化无处不在 无论是传统的软件企…

Vulnhub系列:Kioptix Level 1

1.环境配置 ifconfig kali机&#xff1a;192.168.26.128&#xff08;不同kali机不同ip&#xff09; 靶机&#xff1a;桥接 特别说明&#xff1a;有的小伙伴在打开虚拟机后&#xff0c;无法获取到靶机IP地址 这里特别说明&#xff1a;修改“Kioptix Level 1.vmx”配置文件中…

自动驾驶-机器人-slam-定位面经和面试知识系列03之C++STL面试题(01)

这两天有点忙耽搁了&#xff0c;抱歉&#xff01;&#xff01;&#xff01; 这个博客系列会分为C STL-面经、常考公式推导和SLAM面经面试题等三个系列进行更新&#xff0c;基本涵盖了自己秋招历程被问过的面试内容&#xff08;除了实习和学校项目相关的具体细节&#xff09;。…

探索PyMuPDF:Python中的强大PDF处理库

探索PyMuPDF&#xff1a;Python中的强大PDF处理库 背景&#xff1a;为何选择PyMuPDF 在数字化时代&#xff0c;PDF文件因其跨平台的兼容性和对格式的严格保持而成为文档交换的通用格式。然而&#xff0c;处理PDF文件往往需要专门的工具或库。这就是PyMuPDF库的用武之地。PyMuP…

模方单体化功能联动3DMax能支持2018版本以上的3DMax吗?

答&#xff1a;目前还不支持&#xff0c;仅支持2018版本的 模方是一款针对实景三维模型的冗余碎片、水面残缺、道路不平、标牌破损、纹理拉伸模糊等共性问题研发的实景三维模型修复编辑软件。模方4.1新增自动单体化建模功能&#xff0c;支持一键自动提取房屋结构&#xff0c;平…

【Python selenium过极验滑块】用自动化selenium 操作GEETEST极验滑块,简单粗暴

文章日期&#xff1a;2024.07.24 使用工具&#xff1a;Python 文章类型&#xff1a;自动化过极验滑块 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 AES解密处理&#xff08;直接解密即可&#xff09;&#xff08;crypto-js.js 标准算法&…

Python自动化测试之Selenium各浏览器驱动下载网址

在自动化测试领域&#xff0c;Selenium无疑是一个不可或缺的工具。它允许开发者编写脚本来模拟用户在浏览器中的操作&#xff0c;从而进行自动化测试。然而&#xff0c;为了使用Selenium控制不同的浏览器&#xff0c;我们需要安装相应的浏览器驱动&#xff08;WebDriver&#x…

企业利用AI智能名片S2B2C商城小程序参与社区团购的风险与机遇分析

摘要 在新零售浪潮的推动下&#xff0c;社区团购以其独特的商业模式迅速崛起&#xff0c;成为连接消费者与供应商的重要桥梁。企业纷纷探索如何有效利用这一新兴渠道&#xff0c;以扩大市场份额、提升品牌影响力。AI智能名片S2B2C商城小程序的引入&#xff0c;为企业参与社区团…

【Rust光年纪】从图形API到虚拟现实:Rust语言开发库全面解析

打造虚拟世界&#xff1a;Rust语言虚拟现实库全攻略 前言 随着虚拟现实技术的不断发展&#xff0c;越来越多的开发者开始关注使用Rust语言进行虚拟现实开发。本文将对几个用于Rust语言的虚拟现实开发库进行介绍和比较&#xff0c;帮助读者了解它们的核心功能、使用场景、安装…

什么是服务器带宽

什么是服务器带宽 服务器带宽是有线或无线网络通信链路在给定时间内通过计算机网络或互联网连接将最大数据量从一个点传输到另一个点的容量。简单来说&#xff0c;带宽指的是可以通过计算机网络或Internet连接一次发送的数据量。具体来说&#xff0c;带宽越大&#xff0c;服务器…

maven archetype

1.简介 maven脚手架是为了创建一个项目模板&#xff0c;以后新建项目都能够复用该模板 maven中模板引擎使用的是velocity,在文件中可以使用它的语法获取变量等操作 2.实现 单模块脚手架实现 pom.xml <?xml version"1.0" encoding"UTF-8"?> &…

windows下实现mongodb备份还原

添加环境变量 把mongodb安装目录下的bin路径添加到环境变量的path路径: 备份库 打开CMD&#xff0c;执行以下命令&#xff1a; mongodump -u test -p test -d test -o D://backup_mongodb//20220706 –gzip 参数说明&#xff1a; -u 用户名 -p 密码 -d 需要备份的库名称…

Spring踩坑:抽象类作为父类,使用子类@Autowired属性进行填充,属性值为null

Spring踩坑&#xff1a;抽象类作为父类&#xff0c;使用子类Autowired属性进行填充&#xff0c;属性值为null Spring Boot中抽象类和依赖注入的最佳实践引言在抽象类中使用Autowired注解protected vs private修饰符低版本Spring Boot的注意事项 构造器中的依赖注入陷阱为什么不…

MongoDB教程(二十一):MongoDB大文件存储GridFS

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、GridFS…