”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 获取 Google OAuth 客户端 ID

获取 Google OAuth 客户端 ID

发布于2024-11-04
浏览:285

什么是客户端 ID?
Google 客户端 ID(或 ClientID)是分配给应用程序/用户的唯一标识符。它用于使用 OAuth (Auth 2.0) 对客户端和服务器进行身份验证。

要获取 Google 客户端 ID,请打开 Google Cloud Console,然后启动一个新项目。在本教程中,我们将项目命名为“GoogleReact Sign-In”,但您可以选择您喜欢的任何名称。

Obtaining a Google OAuth Client ID

创建项目后,导航到“API 和服务”菜单中的“凭据”部分。在这里,您将找到一个仪表板,您当前的项目名称应显示在左上角,靠近 Google Cloud 徽标。

Obtaining a Google OAuth Client ID

现在,在创建凭据之前,让我们转到 OAuth 同意屏幕来设置同意屏幕。

设置 Google 登录同意屏幕。

同意屏幕,顾名思义,是一个要求用户通过外部或第三方库登录的页面。此弹出窗口通知用户他们将离开应用程序的根页面并授予对第三方页面的访问权限。下面显示的 Google 登录同意屏幕示例

Obtaining a Google OAuth Client ID

简单来说,当您使用 OAuth 2.0 进行授权时,您的应用会要求用户使用其 Google 帐户授权一个或多个访问范围。访问范围包括您的应用被授权访问或在用户帐户上执行的任何信息或活动。

要为您的 React 应用程序设置 Google 同意页面,请导航至 Google Cloud Console 左侧菜单上的“OAuth 同意屏幕”选项卡。

进入此选项卡后,选择“外部”,这是唯一允许的选项,除非您使用的是经过 Google 验证的公司或应用程序,然后单击“创建”按钮以生成您的同意屏幕。

Obtaining a Google OAuth Client ID

接下来,在同一页面下,提供您的申请名称和电子邮件地址,以接收项目状态的更新。

您现在可以将剩余的需求和选项留空,但如果您有可用的详细信息,您可以在此阶段添加它们。

Obtaining a Google OAuth Client ID

您暂时可以跳过剩余的注册部分。只需向下滚动每个部分,单击“保存”,然后完成后返回仪表板。

设计 OAuth 同意页面后,我们必须先发布应用程序,然后再进行试验或确保身份验证有效。默认情况下,其状态为“测试”,发布后,将移至生产环境。

Obtaining a Google OAuth Client ID

将应用标记为“正在生产”后,拥有 Google 帐户的所有人都可以访问该应用。

生成您的网络客户端 ID。

现在,我们将返回凭证选项来访问您可以创建 Web 客户端 ID 的页面。
在屏幕上,选择页面顶部的 CREATE CREDENTIALS,然后单击 OAuth 客户端 ID。

Obtaining a Google OAuth Client ID

您将被要求选择一个应用程序类型,如下所示。如果您按照以下步骤进行 React,请选择 Web 应用程序(我们正在使用 Google 客户端 ID 进行 Web 操作)。

Obtaining a Google OAuth Client ID

接下来,我们将为我们的客户端 ID 选择一个名称,以标识或指定指向单个应用程序的特定 ID 链接,将使用此名称。为了区分 Web、iOS 和 Android ID,我们可以在它们的命名约定中添加“Web ID”、“Android ID”、“iOS ID”等:

Obtaining a Google OAuth Client ID

接下来,我们将介绍两种类型的 URL:授权的 JavaScript 来源和授权的重定向 URL。

“授权的 JavaScript 来源 URL”是您的应用程序登录的 URL。对于 React 开发人员来说,它是 localhost (localhost:3000) 或您托管的 URL(如果您托管了您的应用程序)。

“授权重定向 URL”是 Google 在您成功登录用户后将用户返回到的链接。例如,您可以将他们返回到原始链接或将他们重定向到其他链接。您需要在此处添加 URL。

将以下 URL 添加到授权的 javaScript 源和授权的重定向 URL:分别为 http://localhost:3000 和 http://localhost:

Obtaining a Google OAuth Client ID

要创建网络客户端 ID,您需要单击“创建”按钮。您将返回主页,您可以在其中查看新创建的凭据。要复制新的 Web 客户端 ID,请点击复制图标。

Obtaining a Google OAuth Client ID

现在我们已经成功构建了 Web 客户端 ID,您将进入我们的 React 应用程序并将您的客户端 ID 添加到 .env 文件中。

版本声明 本文转载于:https://dev.to/gamith_chanuka/obtaining-a-google-oauth-client-id-2gf9?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • jQuery中如何高效获取隐藏元素的高度?
    jQuery中如何高效获取隐藏元素的高度?
    在 jQuery 中获取隐藏元素的高度处理隐藏元素时,检索其高度可能具有挑战性。暂时显示元素以测量其高度然后再次隐藏它的传统方法似乎效率低下。有没有更优化的解决方案?jQuery 1.4.2 方法这是一个使用 jQuery 1.4.2 的示例:$select.show(); optionHeight...
    编程 发布于2024-11-05
  • 为什么我不能在 Go Struct 标签中使用变量?
    为什么我不能在 Go Struct 标签中使用变量?
    在 Go 结构体标签中使用变量在 Go 中,结构体标签用于指定有关结构体中字段的元数据。虽然可以使用字符串文字定义标签,但尝试在其位置使用变量会导致错误。无效用法:const ( TYPE = "type" ) type Shape struct { Type s...
    编程 发布于2024-11-05
  • Qopy:作为开发人员我最喜欢的剪贴板管理器
    Qopy:作为开发人员我最喜欢的剪贴板管理器
    作为一名开发人员,我一直在寻找可以使我的工作流程更顺畅、更高效的工具。最近,我偶然发现了 Qopy,一个可以在 Linux 和 Windows 上运行的开源剪贴板管理器。 什么是Qopy? Qopy 是一个简单的剪贴板管理器,旨在改进标准剪贴板体验。它的设计宗旨是用户友好、可靠且快速...
    编程 发布于2024-11-05
  • 为什么我的按钮上的悬停效果不起作用?
    为什么我的按钮上的悬停效果不起作用?
    更改悬停时的按钮颜色:替代解决方案尝试更改悬停时按钮的颜色时,如果出现以下情况,可能会令人沮丧该解决方案未能产生预期的效果。考虑提供的示例代码:a.button { ... } a.button a:hover{ background: #383; }此解决方案尝试在链接悬停在“按钮...
    编程 发布于2024-11-05
  • 仅使用 Python 构建前端
    仅使用 Python 构建前端
    对于专注于后端的开发人员来说,前端开发可能是一项艰巨的、甚至是噩梦般的任务。在我职业生涯的早期,前端和后端之间的界限是模糊的,每个人都被期望能够处理这两者。 CSS,尤其是,是一场持续不断的斗争;这感觉像是一个不可能完成的任务。 虽然我喜欢前端工作,但 CSS 对我来说仍然是一个复杂的挑战,特别是因...
    编程 发布于2024-11-05
  • 如何在 Laravel 中运行 Cron 作业
    如何在 Laravel 中运行 Cron 作业
    在本教程中,我将向您展示如何在 Laravel 中运行 cron 作业,但最重要的是,我们会让事情对我们的学生来说简单易行。在构建 Laravel 应用程序时,我们将探索如何在您自己的计算机上设置和运行这些自动化任务。 首先,什么是 cron 作业?将其视为您网站的私人助理 - 一个从不睡觉并且总...
    编程 发布于2024-11-05
  • 填充如何影响内联元素的间距以及如何解决冲突?
    填充如何影响内联元素的间距以及如何解决冲突?
    内联元素上的填充:效果和限制根据源码,在内联元素的顶部和底部添加内边距并不影响周围元素的间距。然而,“填充将与其他内联元素重叠”这一说法表明,在某些特定情况下,填充确实会产生影响。了解重叠填充填充主要影响它应用于的元素,增加其垂直边框。在正常情况下,这不会导致与相邻的内联元素重叠,因为它们可以在填充...
    编程 发布于2024-11-05
  • Django 基于类的视图变得简单
    Django 基于类的视图变得简单
    众所周知,django在开发Web应用程序时使用MVT(模型-视图-模板)进行设计。 View 本身是一个可调用的,它接受请求并返回响应。它不仅仅是一个函数,因为 Django 提供了一种称为“基于类的视图”的东西,因此开发人员可以使用基于类的方法或者您可以说 OOP 方法来编写视图。这个基于类的...
    编程 发布于2024-11-05
  • 使用 VAKX 构建您的无代码 AI 代理
    使用 VAKX 构建您的无代码 AI 代理
    If you’ve been keeping up with the AI space, you already know that AI agents are becoming a game-changer in the world of automation and customer inter...
    编程 发布于2024-11-05
  • 这里是我如何在 jQuery Datatable 中实现基于游标的分页。
    这里是我如何在 jQuery Datatable 中实现基于游标的分页。
    在 Web 应用程序中处理大型数据集时,分页对于性能和用户体验至关重要。标准的基于偏移量的分页(通常与数据表一起使用)对于大型数据集可能效率低下。 基于游标的分页提供了一种性能更高的替代方案,特别是在处理实时更新或大量数据加载时。在本文中,我将引导您了解如何在 jQuery DataTable 中...
    编程 发布于2024-11-05
  • 为什么同步引擎可能是 Web 应用程序的未来
    为什么同步引擎可能是 Web 应用程序的未来
    在不断发展的 Web 应用程序世界中,效率、可扩展性和无缝实时体验至关重要。传统的 Web 架构严重依赖于客户端-服务器模型,这些模型可能难以满足现代对响应能力和同步的需求。这就是同步引擎发挥作用的地方,它为开发人员当今面临的许多挑战提供了一个有前途的解决方案。但同步引擎到底是什么?为什么它们可能是...
    编程 发布于2024-11-05
  • Python 计算机视觉简介(第 1 部分)
    Python 计算机视觉简介(第 1 部分)
    注意:在这篇文章中,我们将仅使用灰度图像以使其易于理解。 什么是图像? 图像可以被认为是值的矩阵,其中每个值代表像素的强度。图像格式主要分为三种类型: Binary:此格式的图像由值为 0(黑色)和 1(白色)的单个二维矩阵表示。这是最简单的图像表示形式。 Grey-Scale:在此...
    编程 发布于2024-11-05
  • 网站 HTML 代码
    网站 HTML 代码
    我一直在尝试建立一个与航空公司相关的网站。我只是想确认我是否可以使用人工智能生成代码来生成整个网站。 HTML 网站是否兼容博客,或者我应该使用 JavaScript?这是我用作演示的代码。 <!DOCTYPE html> <html lang="en">[](url) &l...
    编程 发布于2024-11-05
  • 像程序员一样思考:学习 Java 基础知识
    像程序员一样思考:学习 Java 基础知识
    本文介绍了 Java 编程的基本概念和结构。它首先介绍了变量和数据类型,然后讨论了操作符和表达式,以及控制流流程。其次,它解释了方法和类,然后介绍了输入和输出操作。最后,本文通过一个工资计算器的实际示例展示了这些概念的应用。像程序员一样思考:掌握 Java 基础1. 变量和数据类型Java 使用变量...
    编程 发布于2024-11-05
  • PHP GD 可以比较两个图像的相似性吗?
    PHP GD 可以比较两个图像的相似性吗?
    PHP GD 可以确定两个图像的相似度吗?正在考虑的问题询问是否可以使用以下命令确定两个图像是否相同PHP GD 通过比较它们的差异。这需要获取两个图像之间的差异并确定它是否完全由白色(或任何统一的颜色)组成。根据提供的答案,散列函数(如其他响应所建议的那样)不适用于此语境。比较必须涉及图像内容而不...
    编程 发布于2024-11-05

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3