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

获取 Google OAuth 客户端 ID

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

什么是客户端 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]删除
最新教程 更多>
  • 如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    使用http request 上传文件上传到http server,同时也提交其他参数,java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...
    编程 发布于2025-05-18
  • 如何使用Regex在PHP中有效地提取括号内的文本
    如何使用Regex在PHP中有效地提取括号内的文本
    php:在括号内提取文本在处理括号内的文本时,找到最有效的解决方案是必不可少的。一种方法是利用PHP的字符串操作函数,如下所示: 作为替代 $ text ='忽略除此之外的一切(text)'; preg_match('#((。 &&& [Regex使用模式来搜索特...
    编程 发布于2025-05-18
  • 同实例无需转储复制MySQL数据库方法
    同实例无需转储复制MySQL数据库方法
    在同一实例上复制一个MySQL数据库而无需转储在同一mySQL实例上复制数据库,而无需创建InterMediate sqql script。以下方法为传统的转储和IMPORT过程提供了更简单的替代方法。 直接管道数据 MySQL手动概述了一种允许将mysqldump直接输出到MySQL clie...
    编程 发布于2025-05-18
  • 对象拟合:IE和Edge中的封面失败,如何修复?
    对象拟合:IE和Edge中的封面失败,如何修复?
    To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)...
    编程 发布于2025-05-18
  • 用户本地时间格式及时区偏移显示指南
    用户本地时间格式及时区偏移显示指南
    在用户的语言环境格式中显示日期/时间,并使用时间偏移在向最终用户展示日期和时间时,以其localzone and格式显示它们至关重要。这确保了不同地理位置的清晰度和无缝用户体验。以下是使用JavaScript实现此目的的方法。方法:推荐方法是处理客户端的Javascript中的日期/时间格式化和时...
    编程 发布于2025-05-18
  • 如何在鼠标单击时编程选择DIV中的所有文本?
    如何在鼠标单击时编程选择DIV中的所有文本?
    在鼠标上选择div文本单击带有文本内容,用户如何使用单个鼠标单击单击div中的整个文本?这允许用户轻松拖放所选的文本或直接复制它。 在单个鼠标上单击的div元素中选择文本,您可以使用以下Javascript函数: function selecttext(canduterid){ if(do...
    编程 发布于2025-05-18
  • PHP阵列键值异常:了解07和08的好奇情况
    PHP阵列键值异常:了解07和08的好奇情况
    PHP数组键值问题,使用07&08 在给定数月的数组中,键值07和08呈现令人困惑的行为时,就会出现一个不寻常的问题。运行print_r($月份)返回意外结果:键“ 07”丢失,而键“ 08”分配给了9月的值。此问题源于PHP对领先零的解释。当一个数字带有0(例如07或08)的前缀时,PHP将...
    编程 发布于2025-05-18
  • 解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...
    编程 发布于2025-05-18
  • 如何将来自三个MySQL表的数据组合到新表中?
    如何将来自三个MySQL表的数据组合到新表中?
    mysql:从三个表和列的新表创建新表 答案:为了实现这一目标,您可以利用一个3-way Join。 选择p。*,d.content作为年龄 来自人为p的人 加入d.person_id = p.id上的d的详细信息 加入T.Id = d.detail_id的分类法 其中t.taxonomy =...
    编程 发布于2025-05-18
  • Java的Map.Entry和SimpleEntry如何简化键值对管理?
    Java的Map.Entry和SimpleEntry如何简化键值对管理?
    A Comprehensive Collection for Value Pairs: Introducing Java's Map.Entry and SimpleEntryIn Java, when defining a collection where each element com...
    编程 发布于2025-05-18
  • 大批
    大批
    [2 数组是对象,因此它们在JS中也具有方法。 切片(开始):在新数组中提取部分数组,而无需突变原始数组。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    编程 发布于2025-05-18
  • FastAPI自定义404页面创建指南
    FastAPI自定义404页面创建指南
    response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...
    编程 发布于2025-05-18
  • Go语言垃圾回收如何处理切片内存?
    Go语言垃圾回收如何处理切片内存?
    在Go Slices中的垃圾收集:详细的分析在GO中,Slice是一个动态数组,引用了基础阵列。使用切片时,了解垃圾收集行为至关重要,以避免潜在的内存泄漏。考虑使用slice使用slice的以下实现:字符串{ R:=(*Q)[0] *q =(*q)[1:len(*q)] 返回...
    编程 发布于2025-05-18
  • 如何实时捕获和流媒体以进行聊天机器人命令执行?
    如何实时捕获和流媒体以进行聊天机器人命令执行?
    在开发能够执行命令的chatbots的领域中,实时从命令执行实时捕获Stdout,一个常见的需求是能够检索和显示标准输出(stdout)在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...
    编程 发布于2025-05-18
  • 如何将PANDAS DataFrame列转换为DateTime格式并按日期过滤?
    如何将PANDAS DataFrame列转换为DateTime格式并按日期过滤?
    Transform Pandas DataFrame Column to DateTime FormatScenario:Data within a Pandas DataFrame often exists in various formats, including strings.使用时间数据时...
    编程 发布于2025-05-18

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

Copyright© 2022 湘ICP备2022001581号-3