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://…

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

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

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”配置文件中…

探索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;为企业参与社区团…

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 需要备份的库名称…

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

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

学习笔记(数据结构:链表 栈)3

fun为回调函数由主函数决定 栈: 栈是限定仅在表尾进行插入和删除操作的线性表。 先进后出、后进先出 栈顶:允许操作的一端 栈底:不允许操作的一端 入栈&#xff0c;出栈。 顺序栈 链式栈 1.创建 CreateSeqStack 2.销毁 DestroySeqStack 3.判断是否为空栈 IsEm…

AD7606采集控制

过采样&#xff1a;其效果就是在ADC之后增加数字滤波器的功能

观测云加入华为云「新加坡云联盟」,引领亚太创新潮流

7月19日&#xff0c;「新加坡云联盟」在华为云新加坡峰会2024上正式宣告成立。这一创新的联合不仅是新加坡乃至整个亚太地区云服务领域的重要里程碑&#xff0c;更是全球数字化转型进程中的关键一步。 观测云作为联盟的首批成员之一&#xff0c;在成立仪式上精彩亮相&#xff0…

音视频入门基础:PCM专题(3)——使用Audacity工具分析PCM音频文件

音视频入门基础&#xff1a;PCM专题系列文章&#xff1a; 音视频入门基础&#xff1a;PCM专题&#xff08;1&#xff09;——使用FFmpeg命令生成PCM音频文件并播放 音视频入门基础&#xff1a;PCM专题&#xff08;2&#xff09;——使用Qt播放PCM音频文件 音视频入门基础&am…

Centos7下安装配置最新版本Jenkins

1、基础环境配置 1.1 服务器下载Jenkins安装包 下载地址&#xff1a;Download and deploy 下载命令&#xff1a;wget https://get.jenkins.io/war-stable/2.452.3/jenkins.war 1.2 服务器安装配置JDK Jenkins 是基于 Java 语言开发的&#xff0c;因此需要 Java 运行环境支…

MQ传递用户信息

theme: nico 你们好&#xff0c;我是金金金。 场景 购物车里面有5个商品&#xff0c;用户勾选了并且提交订单了&#xff0c;此时需要删除购物车对应勾选的商品&#xff0c;mq的话涉及到传递用户信息~因为删除对应的购物车商品是需要传递用户信息来知晓对应用户的 生产者 消费者…

LeetCode 热题 HOT 100 (010/100)【宇宙最简单版】

【链表】No. 0206 反转链表 【简单】&#x1f449;力扣对应题目指路 希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持&#xf…