vue3集成google第三方登陆

网上资源很多,但乱七八糟,踩坑几小时后,发现下面的方式没问题。

npm install vue3-google-login

插件文档:vue3-google-登录 (devbaji.github.io)

修改main.js

import './assets/main.css'
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import vue3GoogleLogin from 'vue3-google-login'const app = createApp(App)app.use(ElementPlus)app.use(vue3GoogleLogin, {clientId: '---id.apps.googleusercontent.com'
})
app.mount('#app')

以下代码是关键:

import vue3GoogleLogin from 'vue3-google-login'app.use(vue3GoogleLogin, {clientId: '---id.apps.googleusercontent.com'
})

修改app.vue

<script setup>
import { decodeCredential } from 'vue3-google-login'
const callback = (response) => {// This callback will be triggered when the user selects or login to// his Google account from the popupconsole.log("Handle the response", response)// decodeCredential will retrive the JWT payload from the credentialconst userData = decodeCredential(response.credential)console.log("Handle the userData", userData)
}
</script><template><GoogleLogin :callback="callback"/>
</template>

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

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

相关文章

医院伤员消费点餐限制———未来之窗行业应用跨平台架构

一、点餐上限 医院点餐上限具有以下几方面的意义&#xff1a; 1. 控制成本 - 有助于医院合理规划餐饮预算&#xff0c;避免食物的过度供应造成浪费&#xff0c;从而降低餐饮成本。 2. 保障饮食均衡 - 防止患者或陪护人员过度点餐某一类食物&#xff0c;有利于引导合…

【AcWing】873. 欧拉函数

#include<iostream> using namespace std;int main(){int n;cin>>n;while(n--){int x;cin>>x;int resx;for(int i2;i<x/i;i){if(x%i0){//resres*(1-1/i);整数1/i等于0&#xff0c;算不对且会溢出//以下几种都能ac//resres/i*(i-1);i*(1-1/i)i-1&#xff0…

[JavaEE] TCP协议

目录 一、TCP协议段格式 二、TCP确保传输可靠的机制 2.1 确认应答 2.2 超时重传 2.3 连接管理 2.3.1 三次握手 2.3.2 四次挥手 2.4 滑动窗口 2.4.1 基础知识 2.4.2 两种丢包情况 2.4.2.1 数据报已经抵达&#xff0c;ACK丢包 2.4.2.2 数据包丢包 2.5 流量控制…

音视频入门基础:AAC专题(7)——FFmpeg源码中计算AAC裸流每个packet的size值的实现

音视频入门基础&#xff1a;AAC专题系列文章&#xff1a; 音视频入门基础&#xff1a;AAC专题&#xff08;1&#xff09;——AAC官方文档下载 音视频入门基础&#xff1a;AAC专题&#xff08;2&#xff09;——使用FFmpeg命令生成AAC裸流文件 音视频入门基础&#xff1a;AAC…

Vue3:v-model实现组件通信

目录 一.性质 1.双向绑定 2.语法糖 3.响应式系统 4.灵活性 5.可配置性 6.多属性绑定 7.修饰符支持 8.defineModel使用 二.使用 1.父组件 2.子组件 三.代码 1.父组件代码 2.子组件代码 四.效果 一.性质 在Vue3中&#xff0c;v-model指令的性质和作用主要体现在…

AI健身之俯卧撑计数和姿态矫正-角度估计

在本项目中&#xff0c;实现了Yolov7-Pose用于人体姿态估计。以下是如何在Windows 11操作系统上设置和运行该项目的详细步骤。 环境准备 首先&#xff0c;确保您的计算机已经安装了Anaconda。Anaconda是一个开源的Python发行版本&#xff0c;它包含了conda、Python以及众多科…

【滑动窗口】算法总结

文章目录 滑动窗口算法总结1.暴力求解vs滑动窗口2.需要注意的细节问题 2.滑动窗口的基本模板1.非固定窗口大小的滑动窗口2.固定窗口大小的滑动窗口细节 滑动窗口算法总结 1.暴力求解vs滑动窗口 遇到那些可以转化成一个子数组的长度的问题时&#xff0c;往往需要用到双指针。 …

安全基础学习-AES128加密算法

前言 AES&#xff08;Advanced Encryption Standard&#xff09;是对称加密算法的一个标准&#xff0c;主要用于保护电子数据的安全。AES 支持128、192、和256位密钥长度&#xff0c;其中AES-128是最常用的一种&#xff0c;它使用128位&#xff08;16字节&#xff09;的密钥进…

探索人工智能绘制宇宙地图的实现

人工智能 (AI) 已成为了解世界的重要工具。现在&#xff0c;随着人们对太空探索的兴趣重新升温&#xff0c;人工智能也可能对其他世界产生同样的影响。 尽管经过了几十年的研究&#xff0c;科学家们对地球大气层以外的宇宙仍然知之甚少。绘制行星、恒星、星系及其在太空中的运…

python爬虫初体验(一)

文章目录 1. 什么是爬虫&#xff1f;2. 为什么选择 Python&#xff1f;3. 爬虫小案例3.1 安装python3.2 安装依赖3.3 requests请求设置3.4 完整代码 4. 总结 1. 什么是爬虫&#xff1f; 爬虫&#xff08;Web Scraping&#xff09;是一种从网站自动提取数据的技术。简单来说&am…

安卓14剖析SystemUI的ShadeLogger/LogBuffer日志动态控制输出dumpsy机制

背景&#xff1a; 看SystemUI的锁屏相关代码时候发现SystemUI有一个日志打印相关的方法调用&#xff0c;相比于常规的Log.i直接可以logcat查看方式还是比较新颖。 具体日志打印代码如下&#xff1a; 下面就来介绍一下这个ShadeLogger到底是如何打印的。 分析源码&#xff1…

前端JavaScript导出excel,并用excel分析数据,使用SheetJS导出excel

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

OpenWrt 定时重启

问题 想设置 OpenWrt 定时重启&#xff0c;避免因长期不重启导致的问题。 方法 参考 Scheduling tasks with cronopenwrt设置定时重启&#xff08;天/周/月&#xff09;定时重启openwrt (istoreos) 软路由系统 设置 cron 自启动 System - Start up - 找到 cron - 设置成自…

stm32单片机个人学习笔记5(OLED调试工具)

前言 本篇文章属于stm32单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 STM32入门教程-2023版 细…

深入探究HTTP网络协议栈:互联网通信的基石

在我们日常使用互联网的过程中&#xff0c;HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;扮演着至关重要的角色。无论是浏览网页、下载文件&#xff0c;还是进行在线购物&#xff0c;HTTP协议都在背后默默地支持着这些操作。今天&#x…

go语言中的切片详解

1.概念 在Go语言中&#xff0c;切片&#xff08;Slice&#xff09;是一种基于数组的更高级的数据结构&#xff0c;它提供了一种灵活、动态的方式来处理序列数据。切片在Go中非常常用&#xff0c;因为它们可以动态地增长和缩小&#xff0c;这使得它们比固定大小的数组更加灵活。…

芯片开发(1)---BQ76905---底层参数配置

主要开发思路:AFE主要是采集、保护功能、均衡&#xff0c;所以要逐一去配置芯片的寄存器 采集、均衡功能主要是配置引脚 保护功能主要是参数寄存器配置&#xff0c;至于如何使用命令修改寄存器参数该系列芯片提供了子命令和直接命令两种方式 BQ76905的管脚配置 I、参数配置 …

使用Renesas R7FA8D1BH (Cortex®-M85)和微信小程序App数据传输

目录 概述 1 系统架构 1.1 系统结构 1.2 系统硬件框架结构 1.3 蓝牙模块介绍 2 微信小程序实现 2.1 UI介绍 2.2 代码实现 3 上位机功能实现 3.1 通信协议 3.2 系统测试 4 下位机功能实现 4.1 功能介绍 4.2 代码实现 4.3 源代码文件 5 测试 5.1 编译和下载代码…

Codeforces Round 974 (Div. 3) A-F

封面原图 画师礼島れいあ 下午的ICPC网络赛的难受一晚上全都给我打没了 手速拉满再加上秒杀线段树 这场简直了啊 唯一可惜的是最后还是掉出了1000名 一把上蓝应该没啥希望了吧 A - Robin Helps 题意 侠盗罗宾因劫富济贫而闻名于世 罗宾遇到的 n n n 人&#xff0c;从 1 s …

mysqldump使用cmd窗口和powersell窗口导出sql中文乱码的问题

项目场景 我在使用Mariadb数据库更新数据的时候&#xff0c;由于数据库的表格中含有中文&#xff0c;在使用mysqldump导出sql语句的时候&#xff0c;中文显示乱码&#xff0c;如下图所示&#xff1a; 环境描述 系统&#xff1a;windows10数据库&#xff1a; Mariadb -10.6.16…