5.12 VUE项目实现Google 第三方登录

VUE项目实现Google 第三方登录

  • 目录
    • 一、Google开发者平台配置
      • 1. 新建项目
      • 2. 配置 OAuth 权限请求页面并选择范围
      • 3. 启动API 和 服务
    • 二、 登录代码实现
      • 1. 参考Google官网文档
      • 2. Google官网代码生成器
      • 3. 项目中实装

目录

一、Google开发者平台配置

Google Cloud: https://console.cloud.google.com/

1. 新建项目

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


2. 配置 OAuth 权限请求页面并选择范围

首次使用谷歌开发平台时需要配置,配置过的可以跳过此步骤。

参考文章: 配置 OAuth 权限请求页面并选择范围

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述
在这里插入图片描述


3. 启动API 和 服务

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

在这里插入图片描述


Client_ID 在之后代码中会用到,不用提前保存,需要了就点一下这个页面的复制按钮


在这里插入图片描述


二、 登录代码实现

1. 参考Google官网文档

显示“使用 Google 帐号登录”按钮

在这里插入图片描述

请务必在用户可能登录的任何页面上加载客户端库。

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

使用 HTML 呈现登录按钮,并将 JWT 返回到平台的登录端点。

<html><body><script src="https://accounts.google.com/gsi/client" async></script><div id="g_id_onload"data-client_id="YOUR_GOOGLE_CLIENT_ID"data-login_uri="https://your.domain/your_login_endpoint"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><body>
</html>

使用 JavaScript 呈现登录按钮,并将 JWT 返回给浏览器的 JavaScript 回调处理程序。

<html><body><script src="https://accounts.google.com/gsi/client" async></script><script>function handleCredentialResponse(response) {console.log("Encoded JWT ID token: " + response.credential);}window.onload = function () {google.accounts.id.initialize({client_id: "YOUR_GOOGLE_CLIENT_ID"callback: handleCredentialResponse});google.accounts.id.renderButton(document.getElementById("buttonDiv"),{ theme: "outline", size: "large" }  // customization attributes);google.accounts.id.prompt(); // also display the One Tap dialog}</script><div id="buttonDiv"></div></body>
</html>

2. Google官网代码生成器

生成HTML代码: https://developers.google.com/identity/gsi/web/tools/configurator?hl=zh-cn


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


<div id="g_id_onload"data-client_id="xxxx"data-context="signin"data-ux_mode="popup"data-login_uri="http://localhost:9011"data-auto_prompt="false">
</div><div class="g_id_signin"data-type="standard"data-shape="rectangular"data-theme="filled_blue"data-text="signin_with"data-size="large"data-logo_alignment="left">
</div>

3. 项目中实装


在这里插入图片描述


        <v-row><v-col><div class="g-signin-button" style="height: 50px; width: 30%"><component:is="'script'"src="https://accounts.google.com/gsi/client"ansyc/><divid="g_id_onload"data-client_id="换成你自己的Client_ID.apps.googleusercontent.com"data-context="signin"data-ux_mode="popup"data-callback="googleSignCallBack"data-auto_prompt="false"></div><divclass="g_id_signin"data-type="standard"data-shape="rectangular"data-theme="filled_blue"data-text="signin_with"data-size="large"data-locale="ja"data-logo_alignment="left"></div></div></v-col></v-row>

在这里插入图片描述


  mounted: function () {window.googleSignCallBack = this.googleSignCallBack;},

  methods: {googleSignCallBack(googleUser) {console.log("googleUser", googleUser);},},

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


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

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

相关文章

python读取xml文件并修改object目标label的信息

python读取xml文件并修改object目标label的信息 python读取xml文件并修改object目标label的信息 python读取xml文件并修改object目标label的信息 """ python 读取xml文件内容并完成修改 """ import os import xml.etree.ElementTree as ET from…

可自定义的海外仓系统与传统WMS:哪个更适合你?

在可自定义的海外仓系统和传统的WMS之间进行选择&#xff0c;想确定一个适合自己的正确方案往往并不那么容易。 这需要考虑企业的现状&#xff0c;仓库的经营情况&#xff0c;对管理系统具体的需求等等。今天我们将对这两种系统做一个完整的对比&#xff0c;帮助你决定哪一个更…

盒模型,BFC以及行内块级元素

一.盒模型篇 css基础框盒模型介绍&#xff1a; 当对一个文档进行布局的时候&#xff0c;浏览器的渲染引擎会根据标准之一的css基础框盒模型&#xff0c;将所有元素表示为一个个矩形的盒子&#xff0c;每个盒子由四部分组成&#xff0c;分别是内容 内边距 边框 外边距&#xff…

如何快速搭建nginx虚拟主机

华子目录 实验1&#xff1a;基于IP地址的虚拟主机原理 实验2&#xff1a;基于端口号的虚拟主机原理 实验3&#xff1a;基于域名的虚拟主机原理 实验1&#xff1a;基于IP地址的虚拟主机 原理 如果一台服务器有多个IP地址&#xff0c;而且每个IP地址与服务器上部署的每个网站一一…

beacon-chain+ethereum打镜像及推送镜像

部署详情 1、编写Dockerfile镜像 beacon chain对应Dockerfile文件 # 使用 Ubuntu 20.04 作为基础镜像 FROM ubuntu:20.04# 安装必要的系统库和工具 RUN apt-get update && \apt-get install -y curl && \apt-get clean# 创建存储数据的目录 RUN mkdir -p /dat…

HarmonyOS开发案例:【计算器】

介绍 基于基础组件、容器组件&#xff0c;实现一个支持加减乘除混合运算的计算器。 说明&#xff1a; 由于数字都是双精度浮点数&#xff0c;在计算机中是二进制存储数据的&#xff0c;因此小数和非安全整数&#xff08;超过整数的安全范围[-Math.pow(2, 53)&#xff0c;Math.…

【稳定检索|投稿优惠】2024年新能源技术与环境工程国际会议(ICNTEE 2024)

2024 International Conference on New Energy Technology and Environmental Engineering 一、大会信息 会议名称&#xff1a;2024年新能源技术与环境工程国际会议会议简称&#xff1a;ICNTEE 2024收录检索&#xff1a;提交Ei Compendex,CPCI,CNKI,Google Scholar等会议官网&…

【运维】如何安装ubuntu-24.04? 如何分区?

如何安装ubuntu-24.04&#xff1f;如何分区 经过一系列折腾&#xff0c;我总结了这几点&#xff1a; &#xff08;1&#xff09;在BIOS启动设置里&#xff0c;如果是GPT的硬盘格式&#xff0c;那么对应的就是UEFI的启动方式&#xff1b;如果是MBR的硬盘格式&#xff0c;那么对…

森林消防的新利器:高扬程水泵的应用与优势/恒峰智慧科技

森林是地球上的绿色肺叶&#xff0c;保护森林安全对于维护生态平衡和人类生存环境至关重要。在森林消防领域&#xff0c;高效、快速的灭火设备是保障森林安全的重要武器。近年来&#xff0c;高扬程水泵作为一种新型的消防设备&#xff0c;在森林消防中发挥了重要作用。本文将详…

密室逃脱游戏-第12届蓝桥杯省赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第58讲。 密室逃脱游戏&…

mysql SUBSTR (str, pos, len)函数说明

经常忘记&#xff0c;特此记录下来&#xff0c;方便查找 SUBSTR (str, pos, len) 参数说明: str为列名/字符串&#xff1b;pos为起始位置&#xff1b;mysql中的起始位置pos是从1开始的&#xff1b;如果为正数&#xff0c;就表示从正数的位置往下截取字符串&#xff08;起始坐…

idea Maven 插件 项目多环境打包配置

背景 不同环境的配置文件不一样&#xff0c;打包方式也有差异 1. 准备配置文件 这里 local 为本地开发环境 可改为 dev 名称自定义 test 为测试环境 prod 为生产环境 根据项目业务自行定义 application.yml 配置&#xff1a; spring:profiles:#对应pom中的配置active: spring.…

3月10日PMP考试成绩已出!教你如何快速查询

3月10日PMP考试终于出成绩啦&#xff01; 2024年3月10日PMP考试成绩正在陆续分批次发布&#xff0c;预计本周成绩会全部出来&#xff0c;目前已经有同学查询到自己的成绩&#xff0c;暂时没查到成绩的同学请耐心等待。 在等待成绩的同时&#xff0c;大家可以先对PMP证书和成绩…

CST电磁仿真软件远场源的导出调用和提取结果【小白必看】

远场源的导出&调用(1) 提取Hybrid仿真所需的远场源&#xff01; Post-Processing > Tools > Result Templates Tools >Farfield and Antenna Properties > Export Farfields As Source 混合求解(Hybrid Simulation)是对安装在舰船等大型平台上的天线进行仿真…

为什么会查询不到DNS信息?怎么排查?

DNS&#xff08;域名系统&#xff09;是将域名转换为相应 IP 地址的关键系统。查询 DNS 信息具有重要作用&#xff0c;通过查询 DNS 信息&#xff0c;我们可以知道域名对应的 IP 地址&#xff0c;这是最主要的信息&#xff0c;使设备能与目标服务器进行通信&#xff1b;其次是域…

IPO压力应变桥信号处理系列隔离放大器 差分信号隔离转换0-10mV/0-20mV/0-±10mV/0-±20mV转4-20mA/0-5V/0-10V

概述&#xff1a; IPO压力应变桥信号处理系列隔离放大器是一种将差分输入信号隔离放大、转换成按比例输出的直流信号混合集成厚模电路。产品广泛应用在电力、远程监控、仪器仪表、医疗设备、工业自控等行业。该模块内部嵌入了一个高效微功率的电源&#xff0c;向输入端和输出端…

VUE----数字增加,兼容小程序

数字增加&#xff0c;兼容小程序 requestAnimationFrame 为浏览器提供的方法 export function countUp(duration, from, to, onProgress) {let value fromconst speed (to - from) / durationconst start Date.now()if (typeof window undefined) {let requestAnimationF…

React 之 内置标签<Fragment> (<>...</>) (十一)

通常使用 <>…</> 代替&#xff0c;它们都允许你在不添加额外节点的情况下将子元素组合。相当于vue的内置标签<template/> 1. 返回多个元素 <><OneChild /><AnotherChild /> </>2. 分配多个元素给一个变量 和其他元素一样&#xf…

vue2中的 <keep-alive>

在 Vue 2 中&#xff0c;给组件加上 name 属性本身并不直接实现切换路由时保存数据的功能。然而&#xff0c;name 属性在 Vue 组件中确实有一些用途&#xff0c;特别是在与 <keep-alive> 组件和 Vue 开发者工具&#xff08;vue-devtools&#xff09;一起使用时。 关于路…

快速了解OV证书和DV证书的区别及使用场景

OV&#xff08;Organization Validation&#xff0c;组织验证&#xff09;证书和DV&#xff08;Domain Validation&#xff0c;域名验证&#xff09;证书都是SSL/TLS证书&#xff0c;用于保护网站数据传输的安全性和提供身份验证&#xff0c;但两者在验证深度、信任级别、提供的…