什么是客户端 ID?
Google 客户端 ID(或 ClientID)是分配给应用程序/用户的唯一标识符。它用于使用 OAuth (Auth 2.0) 对客户端和服务器进行身份验证。
要获取 Google 客户端 ID,请打开 Google Cloud Console,然后启动一个新项目。在本教程中,我们将项目命名为“GoogleReact Sign-In”,但您可以选择您喜欢的任何名称。
创建项目后,导航到“API 和服务”菜单中的“凭据”部分。在这里,您将找到一个仪表板,您当前的项目名称应显示在左上角,靠近 Google Cloud 徽标。
现在,在创建凭据之前,让我们转到 OAuth 同意屏幕来设置同意屏幕。
同意屏幕,顾名思义,是一个要求用户通过外部或第三方库登录的页面。此弹出窗口通知用户他们将离开应用程序的根页面并授予对第三方页面的访问权限。下面显示的 Google 登录同意屏幕示例
简单来说,当您使用 OAuth 2.0 进行授权时,您的应用会要求用户使用其 Google 帐户授权一个或多个访问范围。访问范围包括您的应用被授权访问或在用户帐户上执行的任何信息或活动。
要为您的 React 应用程序设置 Google 同意页面,请导航至 Google Cloud Console 左侧菜单上的“OAuth 同意屏幕”选项卡。
进入此选项卡后,选择“外部”,这是唯一允许的选项,除非您使用的是经过 Google 验证的公司或应用程序,然后单击“创建”按钮以生成您的同意屏幕。
接下来,在同一页面下,提供您的申请名称和电子邮件地址,以接收项目状态的更新。
您现在可以将剩余的需求和选项留空,但如果您有可用的详细信息,您可以在此阶段添加它们。
您暂时可以跳过剩余的注册部分。只需向下滚动每个部分,单击“保存”,然后完成后返回仪表板。
设计 OAuth 同意页面后,我们必须先发布应用程序,然后再进行试验或确保身份验证有效。默认情况下,其状态为“测试”,发布后,将移至生产环境。
将应用标记为“正在生产”后,拥有 Google 帐户的所有人都可以访问该应用。
现在,我们将返回凭证选项来访问您可以创建 Web 客户端 ID 的页面。
在屏幕上,选择页面顶部的 CREATE CREDENTIALS,然后单击 OAuth 客户端 ID。
您将被要求选择一个应用程序类型,如下所示。如果您按照以下步骤进行 React,请选择 Web 应用程序(我们正在使用 Google 客户端 ID 进行 Web 操作)。
接下来,我们将为我们的客户端 ID 选择一个名称,以标识或指定指向单个应用程序的特定 ID 链接,将使用此名称。为了区分 Web、iOS 和 Android ID,我们可以在它们的命名约定中添加“Web ID”、“Android ID”、“iOS ID”等:
接下来,我们将介绍两种类型的 URL:授权的 JavaScript 来源和授权的重定向 URL。
“授权的 JavaScript 来源 URL”是您的应用程序登录的 URL。对于 React 开发人员来说,它是 localhost (localhost:3000) 或您托管的 URL(如果您托管了您的应用程序)。
“授权重定向 URL”是 Google 在您成功登录用户后将用户返回到的链接。例如,您可以将他们返回到原始链接或将他们重定向到其他链接。您需要在此处添加 URL。
将以下 URL 添加到授权的 javaScript 源和授权的重定向 URL:分别为 http://localhost:3000 和 http://localhost:
要创建网络客户端 ID,您需要单击“创建”按钮。您将返回主页,您可以在其中查看新创建的凭据。要复制新的 Web 客户端 ID,请点击复制图标。
现在我们已经成功构建了 Web 客户端 ID,您将进入我们的 React 应用程序并将您的客户端 ID 添加到 .env 文件中。
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3