| 用`react | 您所在的位置：网站首页 › electron三方登录 › 用`react |
用`react
|
有的时候，我们只是想使用一个应用程序，而没有耐心先用我们的电子邮件和密码注册和登录。我们也可能只是想尝试一下这个应用程序，而不想为此而创建一个新的账户，从而造成负担。 同时，应用程序的所有者需要知道有多少用户使用过他们的应用程序，以获得关于谁在使用他们的应用程序以及如何使用的反馈。要做到这一点，他们需要用户用他们的电子邮件注册以获得统计数据。 这两种情况使用户和应用程序所有者都陷入了困境。这时，拥有谷歌登录功能就发挥了非常重要的作用。 由于谷歌是世界上最流行的电子邮件平台，允许用户在你的React应用程序中使用谷歌登录，消除了用户和应用程序所有者之间的摩擦。用户几乎可以立即开始使用一个应用程序，而不需要创建一个全新的账户。 在这篇文章中，我们将学习谷歌登录是如何工作的，以及我们如何使用一个叫做react-google-login 的包将其添加到我们的React应用中。我们将涵盖： 在你的React应用中添加谷歌登录所需的包 为你的项目获得一个谷歌客户ID 为你的React应用配置一个Google登录同意屏幕 创建你的网络客户端ID 把所有的东西放在一起 [react-google-login](#putting-together-react-google-login) 在你的React应用中基于用户的Google资料创建一个用户资料要继续学习本教程，你应该在本地计算机上安装React，并熟悉如何使用它。如果你已经安装了React，那么你也应该已经安装了Node.js、npm和Yarn。 在你的React应用中添加谷歌登录所需的软件包为了使用谷歌登录，我们将安装两个软件包。 首先： [gapi-script](https://www.npmjs.com/package/gapi-script) 是一个npm包，用于加载谷歌API脚本并初始化一些功能。 第二个包被称为 [react-google-login](https://www.npmjs.com/package/react-google-login)并允许我们将谷歌登录功能整合到我们的React应用程序中。此外，react-google-login ，使我们能够获得我们需要的访问令牌，以便既快速又安全地访问所有谷歌API。 在我们安装并开始将gapi-script 和react-google-login 集成到我们的React应用程序之前，我们将不得不首先与谷歌配置一些东西。让我们从获得一个谷歌客户ID开始。 为你的项目获得一个谷歌客户ID客户端ID是一个与应用程序相关的唯一标识符，用于协助客户端和服务器OAuth 2.0认证。 要从谷歌获得一个客户端ID，请到你的谷歌云控制台，创建一个新项目。在这篇文章中，我将项目命名为 "Google Sign In"，但你可以随心所欲地命名它。
创建项目后，进入该项目，可以看到一个类似下图的仪表板。你当前的项目名称应该在仪表板页面的左上方，在谷歌云的标志旁边可见。
接下来，让我们来看看在创建证书之前如何配置你的同意屏幕。 为你的React应用配置谷歌登录同意屏幕同意屏幕，顾名思义，是一个提示用户使用外部或第三方库来登录的同意页面。这一步提醒用户，他们正在离开你的应用程序的根页面，允许访问第三方页面。 简单地说，当你使用OAuth 2.0进行授权时，你的应用程序要求用户从谷歌账户授权一个或多个访问范围。访问范围包括你的应用程序被允许访问或行使用户账户上的任何信息或活动。 你的应用程序向用户显示的谷歌登录同意屏幕可能包括对你的项目、其政策和要求的访问范围的简要描述。 一个简单的同意页面可以是这样的：
要为你的React应用配置谷歌同意页，请到谷歌云控制台左侧菜单的 "OAuth同意屏幕 "标签。 一旦你进入这个选项卡，选择外部--这实际上是你唯一可以选择的选项，除非你使用谷歌验证的组织或应用程序--然后点击 "创建 "按钮来创建你的同意屏幕。
接下来，在同一个选项卡中，为你的应用程序选择一个名称和一个电子邮件地址，以获得关于你的项目的任何变化的通知。你可以暂时保持其他要求和选项为空。如果你已经准备好了细节，如果你愿意，你可以在这一步中添加它们。
你也可以暂时跳过其他的注册部分。只需向下滚动每一个部分，然后点击 "保存并继续"，直到完成后你最终被带回到仪表板。 创建你的网络客户端ID接下来，在左侧菜单中，你会看到一个标有 "凭证 "的标签。点击这个标签，进入你可以创建你的网络客户端ID的页面。 在这个页面上，点击页面顶部的 "创建凭证"，然后点击 "OAuth客户端ID "选项。
你会被提示选择一个应用程序类型，如下图所示。如果你是为React应用程序遵循这些步骤，请选择 "Web应用程序"。这是因为我们要在网络上使用谷歌的客户端ID。 如果你是在React Native、Flutter或Swift应用中整合，你可以选择Android或iOS这两个各自的操作系统的选项。
接下来，我们将为我们的客户端ID选择一个名字。这个名字只是用来注意或定义我们正在创建的特定ID。因此，例如，如果我们正在创建Web、iOS和Android的ID，我们可以在它们的名称中包括 "Web ID"、"Android ID"、"iOS ID"，等等，以区别它们。
接下来，我们还将添加两种类型的URL：授权的JavaScript起源和授权的重定向URL。 授权的JavaScript起源URL是你的应用程序发起登录的URL；即，React开发者的localhost和localhost:3000，或者你的托管URL，如果你已经托管了你的应用程序。 授权重定向URL是谷歌在登录成功后将用户重定向到的链接。例如，你可能想把用户带回你的原始链接，或者把用户重定向到另一个链接。无论哪种方式，你都必须在这里包括URL。 对于本教程的授权JavaScript起源和授权重定向URL，写上你的本地主机URL：http://localhost:3000。见下文。
最后，点击 "创建 "按钮，创建你的网络客户端ID。你会被带回到主页，在那里你会看到你新创建的凭证。点击复制图标，复制你的新网络客户端ID。
现在，我们已经成功地创建了我们的网络客户端ID，让我们进入我们的React应用程序，安装，然后整合谷歌登录。 把这一切放在一起react-google-login正如你可能记得的，我们将为我们的项目安装两个包gapi-script 和react-google-login 。运行下面的任一命令来安装它们。 //npm npm install react-google-login gapi-script //Yarn yarn add react-google-login gapi-script就像在React中安装的每一个包一样，我们必须首先导入模块，然后才能使用它们。在你的App.js 文件中，通过写下面的代码来导入这些模块。 /*App.js*/ import { GoogleLogin } from 'react-google-login'; import { gapi } from 'gapi-script';接下来，我们使用gapi 来初始化我们的clientId ，它是谷歌的客户端库，用于浏览器端JavaScript。它是一个帮助我们加载gapi脚本和初始化函数的包，它被用在谷歌签到和其他外部网页中，以方便与谷歌的API连接。 为了初始化我们的客户端，我们将在我们的useEffect 钩子中调用gapi函数，以便在我们的页面加载时或每次渲染时被调用。 /*App.js*/ const clientId = '386932037035-k8v833noqjk************.apps.googleusercontent.com';\ useEffect(() => { const initClient = () => { gapi.client.init({ clientId: clientId, scope: '' }); }; gapi.load('client:auth2', initClient); });接下来，我们将添加我们从react-google-login 中导入的登录按钮。 /*App.js*/ const onSuccess = (res) => { console.log('success:', res); }; const onFailure = (err) => { console.log('failed:', err); }; return ( );GoogleLogin 按钮调用clientId ，并返回一个success 响应或一个错误。 如果响应是成功的，onSuccess 函数会处理它。如果返回的响应是一个错误，那么就由onFailure 函数来处理。isSignedIn 属性通过调用onSuccess 回调来保持用户的登录状态。 在我们的浏览器中，测试一下上面的代码会如下图所示。
此外，点击 "用谷歌登录 "按钮将提示一个同意屏幕或模式，看起来像下面这样。
现在我们已经看到了如何将谷歌登录添加到我们的React应用程序中，让我们更进一步，获得用户的详细信息，在我们的应用程序中创建一个用户档案。我们将只是把用户重定向到一个主页，然后获取用户的电子邮件、姓名和图像。 在你的React应用中基于用户的Google资料创建用户档案将谷歌登录与我们的应用程序集成，使我们能够访问用户的个人资料，其中包括用户的姓名、电子邮件地址、图像、accessToken,googleId,id_token ，等等。我们将使用这些信息来创建我们的用户档案。 还是在我们的App.js 组件中，让我们用下面这段代码替换我们现有的代码。 /*App.js*/ import React, { useState, useEffect } from 'react'; import { GoogleLogin, GoogleLogout } from 'react-google-login'; import { gapi } from 'gapi-script'; function App() { const [ profile, setProfile ] = useState([]); const clientId = '386932037035-k8v833noqjk7m4auae0t83vnkrqvvg3t.apps.googleusercontent.com'; useEffect(() => { const initClient = () => { gapi.client.init({ clientId: clientId, scope: '' }); }; gapi.load('client:auth2', initClient); }); const onSuccess = (res) => { setProfile(res.profileObj); }; const onFailure = (err) => { console.log('failed', err); }; const logOut = () => { setProfile(null); }; return ( React Google Login {profile ? ( User Logged in Name: {profile.name} Email Address: {profile.email} ) : ( )} ); } export default App;在我们上面的代码中，我们从react-google-login 中导入了我们的GoogleLogin 和GoogleLogout 按钮。 GoogleLogin 按钮向我们提供的clientId 发出登录请求，gapi使用相同的clientId 将我们连接到Google API。如果请求失败，我们在onFailure 函数中处理错误。如果请求成功，我们就在onSuccess 函数中进行处理。 接下来，在我们的onSuccess 函数中，我们用返回的数据设置我们的个人资料状态。这个数据包含了用户的详细信息，如google_id ，访问和id_token ，电子邮件，姓名，等等。 最后，我们使用一个条件来改变我们的用户界面：如果profile是true ，用户界面将向我们显示登录用户的个人资料，包括他们的图像、名字和电子邮件。如果profile变为空（即当用户使用GoogleLogout 按钮注销时），它将向我们显示登录按钮。
谷歌登录是一个重要的功能，可以包括在我们的应用程序中，以节省时间和改善用户的体验。添加这个功能的另一个重要原因是，它既快速又容易实现和使用。 在本教程中，我们回顾了如何用react-google-login ，将谷歌登录添加到我们的React应用中。 |
【本文地址】