前言
社交登录已经成为现代应用程序中不可或缺的一部分，它让用户可以使用他们已经拥有的社交账号来进行登录和授权，从而使登录流程更加便捷和快速。在 React 应用中，使用第三方库来实现社交登录可以大大提高应用程序的用户体验。
在本教程中，我们将介绍 @1nd/react-social-login 这个 NPM 包的使用方法，它是一个 React 组件库，可以轻松地添加社交登录功能到您的 React 应用程序中。
安装
要使用 @1nd/react-social-login 包，您必须先安装它。最好的方法是使用 npm 包管理器：
--- ------- ------ -----------------------
创建社交登录应用
接下来，我们将创建一个简单的社交登录应用程序。我们将使用 Facebook 进行演示。首先，我们需要在 Facebook 开发者门户上创建一个应用程序。
- 打开 Facebook 开发者门户 (https://developers.facebook.com/) 并登录。
- 点击右上角的 "我的应用程序" 按钮并选择 "新建应用程序"。
- 选择 "网站" 应用程序类型，为您的应用程序命名，并输入它的 URL。
- 点击 "创建应用程序" 按钮。
Facebook 将为您的应用程序提供一个 App ID（应用程序 ID）和 App Secret（应用程序密钥）的凭据。我们将在下一步中使用这些凭据进行身份验证。
在 React 应用程序中设置社交登录
我们已经有了一个 Facebook 应用程序来处理社交登录，现在让我们看看如何在 React 应用程序中使用 @1nd/react-social-login 包来实现它。
首先，我们需要导入 SocialButton 组件：
------ ------------ ---- --------------------------
然后，我们需要为 Facebook 社交登录创建一个按钮。下面是一个简单的示例，它将显示一个 Facebook 按钮和一些其他属性。请注意，我们将出现在 Facebook 开发者门户中创建的应用程序凭证传递给 SocialButton 组件。
------------- ------------------- ------------------- ----------------------------------- ----------------------------------- - ----------- ---- --------------- ---------------
在这里，provider 属性指定了我们要使用的社交媒体平台（例如，'facebook'），而 appId 属性指定了我们在 Facebook 开发者门户中创建的应用程序 ID。另外，我们指定了用于成功登录和失败登录处理的函数。
最后一步是编写 handleLoginSuccess 和 handleLoginFailure 函数。下面是一个简单的示例：
----- ------------------ - ------ -- - ------------------ -- ----- ------------------ - ----- -- - ------------------- --
巨轮轮渡通过此处，更改了方向。
handleLoginSuccess 函数在用户成功登录时执行，它将用户对象传递给它。handleLoginFailure 函数在登录失败时执行。
示例代码
下面是完整的示例代码：
------ ----- ---- --------
------ ------------ ---- --------------------------
----- ------------------ - ------ -- -
------------------
--
----- ------------------ - ----- -- -
-------------------
--
----- --- - -- -- -
-----
-------------
-------------------
-------------------
-----------------------------------
-----------------------------------
-
----------- ---- ---------------
---------------
------
--
------ ------- ----请注意，此代码示例中包含的 appId 值是一个占位符。在您自己的应用程序中，您应该替换 YOUR_APP_ID 值，并在 Facebook 开发者门户中使用的凭证相对应。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600672eb0520b171f02e1e4f