【React】Google 账号之个性化一键登录按钮功能

在这里插入图片描述

“使用 Google 帐号登录”功能可快速管理网站上的用户身份验证。用户登录 Google 账号、表示同意，并安全地与平台共享其个人基础资料信息。

  • 官方文档：链接

一、获取 Google API 客户端 ID

  1. 打开 Google API 控制台 中的凭据页面

  2. 创建或选择 Google API 项目。

  3. 点击创建凭据 > OAuth 客户端 ID，对于应用类型，选择 Web 应用以创建新的客户端 ID。
    在这里插入图片描述

  4. 将您网站的 URI 添加到已获授权的 JavaScript 来源中。URI 仅包含架构和完全限定的主机名。例如 https://www.example.com。

  • 对于本地测试或开发，请同时添加 http://localhost 和 http://localhost:<port_number>
  • Google 一键快捷功能只能在 HTTPS 网域中显示。
  1. （可选）使用重定向到托管的端点（而不是通过 JavaScript 回调）返回凭据。在这种情况下，请将重定向 URI 添加到已获授权的重定向 URI 中。重定向 URI 包含 scheme、完全限定主机名和路径，并且必须符合重定向 URI 验证规则。例如 https://www.example.com/auth-receiver。

    在这里插入图片描述

二、加载客户端库

在需要用到的页面上载入客户端库
<script src="https://accounts.google.com/gsi/client" async></script>

由于，我们需要在react项目中引用，后面会有个简单的组件来实现调用

三、集成代码

HTML版

官方提供了在线HTML集成代码生成器：链接

  • 《“使用 Google 帐号登录”HTML API 参考文档》

在这里插入图片描述
生成代码如下(仅供参考)：

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

支持的数据属性：

属性说明
data-client_id您的应用的客户端 ID
data-auto_prompt显示 Google One 点按信息。
data-auto_select为 Google 一键启用自动选择功能。
data-login_uri登录端点的网址
data-callbackJavaScript ID 令牌处理程序函数名称
data-native_login_uri密码凭据处理程序端点的网址
data-native_callbackJavaScript 密码凭据处理程序函数名称
data-native_id_paramcredential.id 值的参数名称
data-native_password_paramcredential.password 值的参数名称
data-cancel_on_tap_outside控制当用户在提示之外点击时是否取消提示。
data-prompt_parent_id一键式提示容器元素的 DOM ID
data-skip_prompt_cookie如果指定的 Cookie 具有非空值，则跳过一次点按。
data-nonceID 令牌的随机字符串
data-context一键式提示中的标题和字词
data-moment_callback提示界面状态通知监听器的函数名称
data-state_cookie_domain如果您需要在父网域及其子网域中调用一键快捷功能，请将父网域传递给此属性，以便使用单个共享 Cookie。
data-ux_mode“使用 Google 账号登录”按钮用户体验流程
data-allowed_parent_origin可以嵌入中间 iframe 的来源。如果存在此属性，则一键快捷功能会在中间 iframe 模式下运行。
data-intermediate_iframe_close_callback当用户手动关闭一键式按钮时，替换默认的中间 iframe 行为。
data-itp_support在 ITP 浏览器上启用升级后的一键式用户体验。
data-login_hint通过提供用户提示跳过账号选择。
data-hd按网域限制帐号选择。
data-use_fedcm_for_prompt允许浏览器控制用户登录提示并在您的网站和 Google 之间协调登录流程。

JavaScript版

《“使用 Google JavaScript API 参考文档》

初始化方法：google.accounts.id.initialize

google.accounts.id.initialize(IdConfiguration)

支持数据类型(IdConfiguration)：

属性说明
client_id您的应用的客户端 ID
auto_select启用自动选择功能。
callback处理 ID 令牌的 JavaScript 函数。Google 一键快捷功能和“使用 Google 账号登录”按钮 popup 用户体验模式会使用此属性。
login_uri登录端点的网址。“使用 Google 账号登录”按钮 redirect 用户体验模式会使用此属性。
native_callback处理密码凭据的 JavaScript 函数。
cancel_on_tap_outside在用户点击提示之外的位置时取消提示。
prompt_parent_id一键式提示容器元素的 DOM ID
nonceID 令牌的随机字符串
context一键式提示中的标题和字词
state_cookie_domain如果您需要在父网域及其子网域中调用一键快捷功能，请将父网域传递给此字段，以便使用单个共享 Cookie。
ux_mode“使用 Google 账号登录”按钮用户体验流程
allowed_parent_origin可以嵌入中间 iframe 的来源。如果存在此字段，则会在中间 iframe 模式下运行一键快捷功能。
intermediate_iframe_close_callback当用户手动关闭一键式按钮时，替换默认的中间 iframe 行为。
itp_support在 ITP 浏览器上启用升级后的一键式用户体验。
login_hint通过提供用户提示跳过账号选择。
hd按网域限制帐号选择。
use_fedcm_for_prompt允许浏览器控制用户登录提示，并在您的网站和 Google 之间协调登录流程。

更多详细用法，可以查阅官方文档

四、react项目中集成

环境

  • react： ^18
  • react-i18next：^14.0.5
  • next： 14.1.0

按钮语言根据浏览器当前语言自动切换
在这里插入图片描述

展示&调用部分

// file: ./component/Google/index.tsx
"use client";import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { AuthServerConfigs } from "@/configs/server.configs";
import { GoogleVerify } from "./GoogleServer";
import Logs from "@/utils/logs";type GoogleCallbackProps = {clientId?: string;client_id?: string;credential: string; // 返回的 ID 令牌select_by: string; // 凭据的选择方式 @link https://developers.google.cn/identity/gsi/web/reference/js-reference?hl=zh-cn#select_by
};let _alphaTabInstance: any = null;// 载入或卸载Google库资源
function loadGoogleGsi(isLoad: boolean) {const scriptId = "google-gsi";if (isLoad && !_alphaTabInstance) {_alphaTabInstance = true;const script = document.createElement("script");script.id = scriptId;script.src = "https://accounts.google.com/gsi/client";return new Promise((resolve, reject) => {script.onload = () => {_alphaTabInstance = true;resolve(void 0);};script.onerror = (error) => {Logs.error("Error: ", error);_alphaTabInstance = false;reject(error);};document.head.appendChild(script);});} else {const ele = document.getElementById(scriptId);const eleService = document.getElementById("googleidentityservice");const eleStyles = document.getElementById("googleidentityservice_button_styles");ele && ele.remove();eleService && eleService.remove();eleStyles && eleStyles.remove();_alphaTabInstance = false;}
}/*** 库初始化及样式* @link https://developers.google.cn/identity/gsi/web/reference/js-reference?hl=zh-cn#IdConfiguration*/
const GoogleSignIn = function (props: {clientId: string;callback?: (props: GoogleCallbackProps) => void;cancel?: (props: GoogleCallbackProps) => void;
}) {const buttonId = "google-login-button";const buttonConfig = {theme: "outline",size: "large",text: "login_with",shape: "rectangular",width: 351,};const IdConfiguration = {client_id: props.clientId,use_fedcm_for_prompt: true,cancel_on_tap_outside: true, // 控制是否在提示之外进行点击时取消提示(关闭一键登录弹窗)，默认trueauto_select: false, // 开启自动登录功能，默认falselogin_uri: "https://localhost:8080/api/bcc/auth/login",context: "use",// state_cookie_domain: "localhost",ux_mode: "redirect",itp_support: true,callback: props?.callback || undefined, // 验证成功回调cancel: props?.cancel || undefined,};useEffect(() => {// @ts-ignoreif (!window.google) {loadGoogleGsi(true)?.then(() => {// @ts-ignoreconst googleApi = window.google;try {googleApi.accounts.id.initialize(IdConfiguration);// 渲染“使用 Google 帐号登录”按钮googleApi.accounts.id.renderButton(document.getElementById(buttonId),buttonConfig);// 启用一键登录提示(弹窗)功能googleApi.accounts.id.prompt();// setTimeout(()=>{//   googleApi.accounts.id.disableAutoSelect();// }, 5000)} catch (e) {Logs.debug("googleApi->Initialized Error:", e);}});}return () => {loadGoogleGsi(false);// @ts-ignorewindow.google = undefined;};}, []);return (<><div id={buttonId}></div></>);
};// 上层调用
const Channel = function () {const { i18n } = useTranslation();function handleGoogleSignIn(props: GoogleCallbackProps) {GoogleVerify(AuthServerConfigs.Google.clientId, props.credential).then((res) => {console.log("handleGoogleSignIn->then:", res);}).catch((err) => {console.log("handleGoogleSignIn->catch:", err);});}function handleGoogleSignInCancel(props: GoogleCallbackProps) {console.log("handleGoogleSignInCancel:", props);}return (<>{i18n.language === "en" && (<GoogleSignInclientId={AuthServerConfigs.Google.clientId}callback={handleGoogleSignIn}cancel={handleGoogleSignInCancel}/>)}</>);
};export const GoogleChannel = Channel;
export default Channel;

回调验证部分

安装依赖库：google-auth-library

npm install google-auth-library
# or
pnpm add google-auth-library

"use server";import { OAuth2Client } from "google-auth-library";
import { AuthServerConfigs } from "@/configs/server.configs";const client = new OAuth2Client({clientId: AuthServerConfigs.Google.clientId,clientSecret: AuthServerConfigs.Google.clientSecret,
});
/**** @link https://developers.google.cn/identity/gsi/web/guides/verify-google-id-token?hl=zh-cn* @param clientId* @param token*/
export async function GoogleVerify(clientId: string | string[], token: string) {return new Promise((resolve, reject) => {client.verifyIdToken({idToken: token,audience: clientId, // 指定访问后端的应用程序的CLIENT_ID// 或者，如果多个客户端访问后端：[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3]}).then((ticket) => {console.log("ticket:", ticket);const payload: any = ticket.getPayload();console.log("payload:", payload);const userid = payload["sub"];resolve({ userid, payload });}).catch((error) => {reject(error);});});
}

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

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

相关文章

网络分层及通信过程

网络分层及通信过程

网络分层体系 主流的理论体系中主要包含三种网络分层模型&#xff0c;即ISO的七层网络模型、TCP/IP的四层网络模型以及结合两种模型优点的五层网络模型&#xff0c;关于网络模型&#xff0c;主要起到对网络体系的一个整体认识&#xff0c;作为网络知识学习的开始&#xff0c;这…
阅读更多...
【并发编程】进程 线程 协程

【并发编程】进程 线程 协程

进程&#xff08;Process&#xff09;、线程&#xff08;Thread&#xff09;和协程&#xff08;Coroutine&#xff09;构成了计算机科学中实现任务并发执行的三种核心抽象机制。通常&#xff0c;为了提高程序的执行效率&#xff0c;开发者会根据应用场景和性能需求&#xff0c;…
阅读更多...
Linux对文件访问的基本权限

Linux对文件访问的基本权限

文件权限控制对文件的访问。 有三种权限类别可应用&#xff1a;读取、写入和执行。 权限对文件和目录的影响&#xff1a; 权限 对文件的影响 对目录的影响 r读取 可以读取文件的内容 可以列出目录的内容 w写入 可以更改文件的内容 可以创建或删除目录中任一文件 x执行…
阅读更多...
对照ui图进行大屏幕适配，echerts适配

对照ui图进行大屏幕适配，echerts适配

1.先找到ui图&#xff0c;我这边是1920*1080的屏幕进行的设计 2.在界面找到跟样式的字体大小&#xff0c;进行设置&#xff0c;一般ui设置字体大小便可 3.在js中写入原生js代码 function adapter() {//获取布局视口宽度&#xff0c;布局视口设备横向独立像素值const dpWidth…
阅读更多...
【算法专题】快速排序

【算法专题】快速排序

1. 颜色分类 75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; 依据题意&#xff0c;我们需要把只包含0、1、2的数组划分为三个部分&#xff0c;事实上&#xff0c;在我们前面学习过的【算法专题】双指针算法-CSDN博客中&#xff0c;有一道题叫做移动零&#xff0c;题目要…
阅读更多...
JAVA NIO组件之Buffer详解

JAVA NIO组件之Buffer详解

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…
阅读更多...
Highlight.js示例

Highlight.js示例

图例 代码在图片后面 点赞❤️关注&#x1f64f;收藏⭐️ 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"…
阅读更多...
7.14实训

7.14实训

当我开始学习各种杀毒软件时&#xff0c;我逐渐意识到信息安全在现代社会中的重要性和复杂性。杀毒软件不仅仅是简单的安装和运行&#xff0c;它涉及到广泛的知识领域&#xff0c;包括计算机网络、恶意软件分析、加密技术等等。在这个过程中&#xff0c;我收获了许多宝贵的经验…
阅读更多...
代码随想录算法训练营第30天|LeetCode 452. 用最少数量的箭引爆气球、435. 无重叠区间、763.划分字母区间

代码随想录算法训练营第30天|LeetCode 452. 用最少数量的箭引爆气球、435. 无重叠区间、763.划分字母区间

1. LeetCode 452. 用最少数量的箭引爆气球 题目链接&#xff1a;https://leetcode.cn/problems/minimum-number-of-arrows-to-burst-balloons/description/ 文章链接&#xff1a;https://programmercarl.com/0452.用最少数量的箭引爆气球.html 视频链接&#xff1a;https://www…
阅读更多...
Java 线程池详解

Java 线程池详解

序言 在高并发编程中&#xff0c;线程池是一个非常重要的组件。它不仅能够有效地管理和复用线程资源&#xff0c;还可以提升应用程序的性能和稳定性。本文将详细介绍Java中的线程池机制&#xff0c;以及如何正确地使用线程池。 一、什么是线程池 线程池是一组已经初始化并等…
阅读更多...
索引结构与检索原理

索引结构与检索原理

一、mysql索引结构 1.BTree索引 [检索原理] 左边列的表格&#xff08;真实数据&#xff09;&#xff0c;右边对应一棵树&#xff0c;树的管度越来越管查询越快。 以下图表的名称为&#xff1a;段区块 硬盘都是长方形的&#xff0c;打了一个封装&#xff0c;里面是一个圆圈…
阅读更多...
二分查找和斐波那契查找

二分查找和斐波那契查找

这里写自定义目录标题 二分查找斐波那契查找二分查找改进B二分查找改进C 二分查找 int binSearch(int* arr, int lo, int hi,int target) {while (lo < hi){int mid lo ((hi - lo) >> 1);if (arr[mid] > target) hi mid;else if (arr[mid] < target) lo mi…
阅读更多...
springBoot 核心原理

springBoot 核心原理

自动配置 包扫描规则&#xff1a; 默认的扫描规则 SpringBootApplication 标注的类就是主程序类 &#xff0c;springBoot也只会扫描主程序类所在的包以及下面的子包也可以自定义声明扫描其他包 使用 SpringBootApplication(scanBasePackages “com.test”)使用 ComponentSca…
阅读更多...
excel、word、ppt 下载安装步骤整理

excel、word、ppt 下载安装步骤整理

请按照我的步骤开始操作&#xff0c;注意以下截图红框标记处&#xff08;往往都是需要点击的地方&#xff09; 第一步&#xff1a;下载 首先进入office下载网址&#xff1a; otp.landian.vip 然后点击下载 拉到下方 下载站点&#xff08;这里根据自己的需要选择下载&#x…
阅读更多...
汇编语言程序设计-7-高级汇编语言技术

汇编语言程序设计-7-高级汇编语言技术

7. 高级汇编语言技术 文章目录 7. 高级汇编语言技术7.0 导学7.1 子程序的另外一种写法-segment/ends-proc/endp7.2 程序的多文件组织7.3 汇编指令汇总7.4 汇编伪操作汇总7.5 汇编操作符汇总7.6 汇编过程7.7 宏汇编7.8 宏库7.9 条件汇编7.10 重复汇编7.11 80x86汇编7.12 汇编语言…
阅读更多...
NAT地址转换+多出口智能选路，附加实验内容

NAT地址转换+多出口智能选路，附加实验内容

本章主要讲&#xff1a;基于目标IP、双向地址的转换 注意&#xff1a;基于目标NAT进行转换 ---基于目标IP进行地址转换一般是应用在服务器端口映射&#xff1b; NAT的基础知识 1、服务器映射 服务器映射是基于目标端口进行转换&#xff0c;同时端口号也可以进行修改&…
阅读更多...
方波的傅里叶变换及方波的MATLAB实现

方波的傅里叶变换及方波的MATLAB实现

一、傅里叶变换简介 傅里叶变换&#xff0c;表示能将满足一定条件的某个函数表示成三角函数&#xff08;正弦和/或余弦函数&#xff09;或者它们的积分的线性组合。傅里叶变换是一种线性的积分变换。它的理论依据是&#xff1a;任何连续周期信号都可以由一组适当的正弦曲线组合…
阅读更多...
stm32h743 NetXduo 实现http server CubeIDE+CubeMX

stm32h743 NetXduo 实现http server CubeIDE+CubeMX

在这边要设置mpu的大小，要用到http server，mpu得设置的大一些 我是这么设置的，做一个参考 同样，在FLASH.ld里面也要对应修改，SECTIONS里增加.tcp_sec和 .nx_data两个区，我们用ram_d2区域去做网络，这个就是对应每个数据在d2区域的起点。 在CubeMX里，需要用到filex、dhc…
阅读更多...
无损音乐播放器推荐：Audirvana for Mac 中文激活版

无损音乐播放器推荐：Audirvana for Mac 中文激活版

udirvana 是一款高品质的音乐播放软件&#xff0c;专为Mac操作系统设计。它被设计来提供音频播放的最高标准&#xff0c;支持多种音频格式&#xff0c;包括高达32位/192kHz的高分辨率音频。Audirvana Plus 是其高级版本&#xff0c;提供了更多的功能和优化&#xff0c;例如音频…
阅读更多...
Qt Mqtt客户端 + Emqx

Qt Mqtt客户端 + Emqx

环境 Qt 5.14.2 qtmqtt mqttx 功能 QT Mqtt客户端 qtmqtt 下载 qtmqtt (注意下载与QT版本相符的库)并使用QT 编译 编译完成后需要的文件: emqx 1.虚拟机中安装emqx,并启动 curl -s https://assets.emqx.com/scripts/install-emqx-deb.sh | sudo bash sudo apt-get inst…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023