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.xdnf.cn/news/146354.html

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

相关文章

Dockerfile部署xxljob

使用Dockerfile部署xxljob 1. 背景 我们在使用定时任务调度时&#xff0c;通常会使用xxljob容器化部署xxljob&#xff0c;通常使用 docker pull xuxueli/xxl-job-admin:2.4.0 拉取镜像并启动容器。这种方式对于x86架构服务器来说&#xff0c;没有任何问题。但是在arm架构的服…

结构体、共用体、Makefile

一、结构体 1.1 结构体变量的初始化和赋值的方式 struct Student{int id;char name[32];int score; } struct Student s; s.id 1001; strcpy(s.name,"zhangsan"); s.score 98; struct Student{int id;char name[32];int score; }s; s.id 1001; strcpy(s.name,&…

数据清洗与预处理:从网页中提取的数据处理技术

目录 引言 一、数据清洗与预处理概述 1.1 数据清洗的定义 1.2 数据清洗的重要性 二、数据清洗与预处理的步骤 2.1 数据获取 2.2 数据去重 2.3 缺失值处理 2.4 异常值处理 2.5 数据格式化与标准化 2.6 数据转换与编码 2.7 数据整合与关联 2.8 数据可视化 三、技术…

C++11——function与bind

包装器 function包装器function的介绍function的使用function的使用场景function的意义 bind包装器bind的介绍bind的使用 function包装器 function的介绍 function是用来包装函数的&#xff0c;所以叫做包装器或者适配器&#xff0c;fuction的本质其实是一个类模板。 functio…

基于多域名,通过云运营商弹性负载,Nginx配置等基于的多租户系统部署

已经开发好久的系统&#xff0c;因为业务上没有需求&#xff0c;没有做上线部署&#xff0c;此系统为多租户系统&#xff0c;原来设计是通过租户码参数来识别的&#xff0c;每个租户访问&#xff0c;需要传自己的码过来&#xff0c;才能确定是哪个租户登录系统&#xff0c; 今…

数据结构和算法之树形结构(1)

文章出处: 数据结构和算法之树形结构(1) 关注码农爱刷题&#xff0c;看更多技术文章&#xff01;&#xff01; 树形结构是数据结构四种逻辑结构之一&#xff0c;也是被广泛使用的一种逻辑结构&#xff0c;它描述的是数据元素之间一对多的逻辑关系。树是一种非线性的数据结构&a…

SOMEIP_ETS_119: SD_Indicate_wrong_l4proto_param

测试目的&#xff1a; 验证DUT能够拒绝一个引用了带有错误l4proto参数&#xff08;既不是UDP也不是TCP&#xff09;的IPv4端点选项的SubscribeEventgroup消息&#xff0c;并以SubscribeEventgroupNAck作为响应。 描述 本测试用例旨在确保DUT遵循SOME/IP协议&#xff0c;当接…

基于单片机的智能电话控制系统设计

摘要&#xff1a; 为了能够使用电话实现电器设备的控制&#xff0c;文中通过单片机及双音多频解码集成电路&#xff0c;使用用 户通过电话输入相应的指令就能够实现远程设备的智能化控制。文章主要对系统的构成、软件及 硬件设计进行了简单的介绍&#xff0c;并且对其中的电路…

出现conda不是内部或外部命令,也不是可运行的程序或批处理文件。的解决办法

发现是我的环境变量不对&#xff0c;需要改成conda.exe所在的目录下 如果不知道自己conda.exe在哪的 可以下载个everything这个软件 找东西很快 找到后 点击环境变量-系统变量-Path-新建-&#xff08;你的conda.exe所在目录&#xff1a;绝对路径&#xff09; 完成上述操作…

Day4:杨辉三角

题目&#xff1a;给定一个非负整数numRows,生成杨辉三角的前numRows行。在杨辉三角中&#xff0c;每个数就是左上方和右上方数的和。 import java.util.ArrayList; import java.util.List;public class Test {public static List<List<Integer>> generate(int numR…

【学术会议征稿】2024年先进控制系统与自动化技术国际学术会议(ACSAT 2024)

2024年先进控制系统与自动化技术国际学术会议&#xff08;ACSAT 2024&#xff09; 2024 International Conference on Advanced Control Systems and Automation Technologies 2024年先进控制系统与自动化技术国际学术会议&#xff08;ACSAT 2024&#xff09;将于2024年11月15…

solidwork装配体取消零件固定

前面有固定导致零件移动不了 右键&#xff0c;找到浮动

Three.js 3D人物漫游项目(上)

本文目录 前言1、项目构建1.1 安装依赖1.2 初始化1.3 项目结构1.4 初始化的项目运行 2、加载模型2.1 threejs三要素2.1.1 代码解读 2.2 加载模型2.2.1 代码解读 2.3 效果 前言 在数字技术的浪潮中&#xff0c;三维图形渲染技术以其独特的魅力&#xff0c;正逐步渗透到我们生活的…

react hooks--useMemo

概述 相当于计算属性!!! useMemo实际的目的也是为了进行性能的优化。 ◼ 如何进行性能的优化呢&#xff1f;  useMemo返回的也是一个 memoized&#xff08;记忆的&#xff09; 值&#xff1b;  在依赖不变的情况下&#xff0c;多次定义的时候&#xff0c;返回的值是相同…

后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus(0920)

十三、文章分类页面 - [element-plus 表格] Git仓库&#xff1a;https://gitee.com/msyycn/vue3-hei-ma.git 基本架子 - PageContainer 功能需求说明&#xff1a; 基本架子-PageContainer封装文章分类渲染 & loading处理文章分类添加编辑[element-plus弹层]文章分类删除…

k8s中的微服务

目录 一、什么是微服务 二、微服务的类型 三、IPVS模式 1、ipvs模式配置方式 &#xff08;1&#xff09;在所有节点中安装ipvsadm &#xff08;2&#xff09;修改master节点的代理配置 &#xff08;3&#xff09;重启pod 四、微服务类型详解 1、clusterip 示例&#…

Flink提交任务

第3章 Flink部署 3.1 集群角色 3.2 Flink集群搭建 3.2.1 集群启动 0&#xff09;集群规划 表3-1 集群角色分配 具体安装部署步骤如下&#xff1a; 1&#xff09;下载并解压安装包 &#xff08;1&#xff09;下载安装包flink-1.17.0-bin-scala_2.12.tgz&#xff0c;将该jar包…

有什么兼容macOS 15 Sequoia系统的加密软件?

前言&#xff1a;近日&#xff0c;苹果更新了 macOS 15 Sequoia正式版&#xff0c;已经有用户在电脑上安装使用了。在这个信息化时代&#xff0c;系统一直在更新&#xff0c;运用一些工具时需要考虑兼容性。 刚有个客户来问迅软&#xff1a;你们迅软DSE客户端支持新发布的macO…

Linux 磁盘清理重新格式化挂载脚本及问题解决

Linux 磁盘清理重新格式化挂载脚本&#xff1a;diskformat.sh #!/bin/bash for i in {1…8} do umount /data0$i done PIDARRAY() for i in a b c d e f g h do parted -s /dev/sd i m k l a b e l g p t p a r t e d − s / d e v / s d i mklabel gpt parted -s /dev/sd im…

【高阶数据结构】二叉搜索树的插入、删除和查找(精美图解+完整代码)

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《高阶数据结构》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多《高阶数据结构》点击专栏链接查看&a…