LinkedIn 是一个非常受欢迎的社交网络，很多人都希望在自己的网站上实现 LinkedIn 登录功能。为了方便开发人员实现该功能，我们可以使用 finnx-react-linkedin-login 这个 npm 包。
本文将介绍如何使用 finnx-react-linkedin-login npm 包完成 LinkedIn 登录功能。读者需要具备 React 和 Node.js 相关技术基础。
安装 finnx-react-linkedin-login 包
安装 finnx-react-linkedin-login 包非常简单，只需要在命令行中运行以下命令即可：
--- ------- --------------------------
配置 LinkedIn 应用程序
在使用 finnx-react-linkedin-login 包之前，我们需要在 LinkedIn 开发者中心中注册自己的应用程序，并获取应用程序的客户端 ID 和客户端秘钥。
- 访问 LinkedIn 开发者中心页面：https://www.linkedin.com/developers/
- 单击「创建应用程序」，填写应用程序的基本信息（名称、公司等），并选择应用程序的类型和目标受众。
- 创建应用程序后，进入应用管理页面，在「认证」选项卡下获取应用程序的客户端 ID 和客户端秘钥。
创建 React 组件
现在，我们将创建一个 React 组件，使用 finnx-react-linkedin-login 包完成 LinkedIn 登录功能。
------ ------ - -------- - ---- --------
------ ------------------- ---- -----------------------------
----- ------------- - -- -- -
----- ------ -------- - -------------
----- ------------- - ------- --------- -- -
---------
----- --------------------------- - - - - ---------------------------
------ ----------------------
------ -------------------------------------
------ ------
---
--
----- ----------- - -- -- -
------------------ -------- ----- ------- ------
--
------ -
--
----------- - -
----------- ----------------
- - -
--------------------
-------------------------
------------------------------------
-------------------------
---------------------
--
--
---
--
--
------ ------- --------------在上面的代码中，我们定义了一个名为 LinkedInLogin 的组件，在组件中定义了一个 state，用于存储用户信息（包括用户的姓名、电子邮件地址、头像图像 URL 和访问令牌）。我们还定义了两个方法，用于处理 LinkedIn 登录成功和失败时的情况。
在组件的返回方法中，我们使用 LinkedInLoginButton 组件作为登录按钮，该组件使用我们之前获取的客户端 ID 和客户端秘钥。当用户成功登录后，我们将调用 handleSuccess 方法，并更新用户信息。如果登录失败，我们将调用 handleError 方法，并在控制台中记录错误信息。
运行应用程序
现在，我们可以在我们的 React 应用程序中使用 LinkedInLogin 组件了。为了运行应用程序，我们可以使用以下命令：
--- -----
现在，我们可以在我们的应用程序中看到 LinkedIn 登录按钮。单击该按钮，您将被请求允许访问您的 LinkedIn 帐户。如果您授权了该应用程序，您将被重定向回您的应用程序，并显示欢迎消息，表明您已经成功登录。
结论
使用 finnx-react-linkedin-login 包非常方便，我们只需要轻松地注册 LinkedIn 应用程序，并使用该包提供的 LinkedInLoginButton 组件即可完成 LinkedIn 登录功能。在实际开发中，我们可以将该组件集成到我们的应用程序中，为用户提供更多选择，并提高用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cd881e8991b448e6799