Vue3+Ts项目——第三方认证登录

Vue3+Ts项目——第三方认证登录

      • 下载插件
      • main.ts文件
      • vue页面调用方式

前言:我们得先去注册成为谷歌开发者,创建一个项目再获取id,整个难点就是获取ID。我难受呀。(记得翻墙)

下载插件

npm install vue3-google-login

main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import vue3GoogleLogin from 'vue3-google-login'const app = createApp(App)app.use(vue3GoogleLogin, {clientId: 'YOUR_GOOGLE_CLIENT_ID'
})app.mount('#app')

vue页面调用方式

此时好想皮一下。要不你自己看文档?
链接如下: vue3-google-login

如何获取OAuth的客户端ID:链接 谷歌OAuth2.0开发的正确配置步骤

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

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

相关文章

搭建Vue前端项目的流程

1、安装nodejs 测试安装是否成功 $ npm -v 6.14.16 $ node -v v12.22.122、全局安装npm install -g vue/cli,后续会使用到vue命令 $ vue --version vue/cli 5.0.8使用vue create demo_project_fe命令创建项目,使用箭头键来选择,确认使用回车…

【K8s】1# 使用kuboard-spray安装K8s集群

文章目录 搭建k8s集群1.推荐配置1.1.服务器配置1.2.软件版本 2.使用Kuboard-Spray安装k8s集群2.1.配置要求2.2.操作系统兼容性2.3.安装 Kuboard-Spray2.4.加载离线资源包2.5.规划并安装集群2.6.安装成功2.7.访问集群 3.涉及的命令3.1.linux 4.问题汇总Q1:启动离线集…

SSH无密登陆配置

1 SSH介绍 ssh命令用于远程登录到其他计算机,实现安全的远程管理。 基本语法: ssh 域名/IP地址 示例: (1)从hadoop100服务器上远程连接hadoop101服务器 [hadoophadoop100 ~]$ ssh hadoop101 如果出现如下内容 Ar…

【Jmeter】循环执行某个接口,接口引用的参数变量存在规律变化

变量设置成下面的值即可 ${__V(supplierId_${supplierIdNum})}

听GPT 讲Rust源代码--src/tools(21)

File: rust/src/tools/miri/src/shims/x86/mod.rs 在Rust的源代码中,rust/src/tools/miri/src/shims/x86/mod.rs文件的作用是为对x86平台的处理提供支持。它包含一些用于模拟硬件操作的shim函数和相关的类型定义。 具体来说,该文件中的函数是通过使用一组…

从零开始的Docker Desktop使用,Docker快速上手,Docker介绍和基础使用

目录 1 Docker简介和安装和基础配置1.1 Docker简介1.2 安装Docker Desktop1.3 换源1.4 Docker基础使用1.5 对Docker操作1.5.1 获取当时所有镜像(docker images)1.5.2 拉镜像(docker pull)1.5.3 删除镜像(docker rmi)1.5.4加载镜像(docker run) 1.6 使用交互式容器1.6.1 查看容器…

蓝桥杯:日期问题

目录 引言一、日期问题1.题目描述2.代码实现3.测试 二、回文日期1.题目描述2.代码实现3.测试 引言 关于这个蓝桥杯的日期问题,其实有一个明确的思路就感觉很简单,这个思路就是不用依照日期的顺序去把每一天走完,而是根据一个数加一&#xff…

【CMake保姆级教程】定义变量、指定C++标准、指定输出路径

文章目录 前言一、变量1.1 为什么需要变量?1.2 set的使用1.3 使用变量 二、指定C标准2.1 为什么需要指定C标准?2.2 指定使用的C标准 三、指定输出路径3.1 为什么需要指定输出路径?3.2 设置输出路径 总结 前言 CMake是一个强大的构建工具&…

elasticsearch8.5版本集成springboot高版本3.0.0开发

基础环境 jdk版本&#xff1a;17 springboot 版本&#xff1a;3.0.0 springcloud版本&#xff1a;2022.0.0 elasticserch版本&#xff1a;8.5.1 Maven 配置 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-pa…

maven的pom.xml设置本地仓库

配置 在Maven项目中&#xff0c;您可以在pom.xml文件中配置本地仓库的路径。在pom.xml文件中&#xff0c;您可以添加以下配置来指定本地仓库的路径&#xff1a; <project>...<repositories><repository><id>local-repo</id><url>file://…

【虹科分享】金融服务急需数据层改造

文章速览&#xff1a; 数字化转型正在颠覆银行与金融业金融服务的未来Redis Enterprise赋能实时金融应用 金融服务越来越注重实时互动体验&#xff0c;重构关键业务流程&#xff0c;从数据层入手该怎么做&#xff1f; 一、数字化转型正在颠覆银行与金融业 金融科技行业的初创…

网络技术基础与计算思维实验教程_4.2_静态路由项配置实验

实验内容 实验目的 实验原理 关键命令 实验步骤 构建 安装完成以后 可以看到路由器有三个快速以太网接口 为3安装 分别构建两个以太网 用交叉线连接router1和2 配置IP地址 完成配置过程 查看路由表 根据路由表添加 现在可以实现PC0和PC1之间的ICMP报文传输 Router(config)#…

虾皮跨境电商物流:打造高效便捷的全球供应链解决方案

随着全球化的推进和电子商务的蓬勃发展&#xff0c;跨境电商物流成为了越来越多商家和消费者关注的焦点。虾皮&#xff08;Shopee&#xff09;作为一家领先的电商平台&#xff0c;不仅提供了丰富多样的商品选择&#xff0c;还致力于为卖家和消费者提供高效便捷的跨境电商物流服…

@vue/cli脚手架

0_vue/cli 脚手架介绍 目标: webpack自己配置环境很麻烦, 下载vue/cli包,用vue命令创建脚手架项目 vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目 脚手架是为了保证各施工过程顺利进行而搭设的工作平 vue/cli的好处 开箱即用 0配置webpack babe…

STL中优先队列(堆)的详解

文章目录 priority_queue的基本介绍堆(heap)堆的概念与结构 priority_queue 的介绍与使用 priority_queue的基本介绍 这个priority_queue翻译成中文就是优先级队列&#xff0c;但其实我们很难去一眼看出他的意思到底是什么&#xff0c;他的逻辑结构实际上类似于数据结构中的堆…

[NISACTF 2022]easyssrf

[NISACTF 2022]easyssrf wp ssrf 的题目&#xff0c;提示了会使用 curl 连接输入的网站并返回响应包。 测试连接百度 直接在输入框中写 www.baidu.com 是无法连接的&#xff0c;需要在前面加入 http 或者 https &#xff0c;因为 curl 的使用方式就是&#xff1a; curl htt…

单片机实验汇编语言版全代码及实验现象总结

文章目录 实验一.3路跑马灯进行二进制数展示实验二.8个LED轮流显示(p1口连接LED)实验三.8-3译码器的使用实验四.简单程序设计2分频实验加减运算实验 实验五.中断系统实验(数码管共阳)10进制计数器8位数码管轮流显示固定数08位数码管上稳定显示0-7(位选P2 段选P0) 实验六.外部中…

VS Code配置C语言环境

首先安装一个C语言的编译器&#xff0c;然后将其位置添加到系统环境变量中。&#xff08;之后需要重启一下vs,才能检测到编译器&#xff09; 打开vscode下载4个插件&#xff1a; C/C Extension PackCode RunnerInclude AutocompleteCMake Tools 然后打开设置把三个选项勾上。…

cad x命令炸开图纸怎么恢复?

cad x命令炸开图纸怎么恢复&#xff1f;cad图纸使用x命令炸开后&#xff0c;想要组合在一起&#xff0c;该怎么操作呢&#xff1f;下面我们就来看看cad炸开命令的详细使用教程 今天我们主要解决在cad中用x炸开后恢复的问题&#xff0c;当然附带一些基础知识也一起普及一下。 …

Python中实现消息队列:构建高效异步通信系统的完整指南

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 消息队列的基础概念 在开始之前&#xff0c;先了解一些消息队列的基础概念。 1 什么是消息队列&#xff1f; 消息队列是一种通信方式&#xff0c;它允许将消息从一个应用程序传递到另一个应用程序。消息队列提…