简介
在前端开发中，我们经常需要在网站或者应用中验证用户的身份或者技能。LinkedIn 是世界上最大的职业社交平台之一，身份和技能认证是 LinkedIn 上非常受欢迎和重要的功能。React-linkedin-certification 是一个 npm 包，用于在 React 应用程序中快速集成 LinkedIn 认证和技能认证功能。这个包提供了一个组件，使得整合 LinkedIn 身份和技能认证变得更加简单和容易。
安装
安装 react-linkedin-certification 只需在终端中运行以下命令：
npm install react-linkedin-certification --save
使用
要使用 react-linkedin-certification，你需要首先获取你的 LinkedIn 应用程序的客户端 ID。
获取 LinkedIn 应用程序的客户端 ID
要获取客户端 ID：
- 进入 LinkedIn 开发者网站 并登录
- 点击左侧菜单中的 我的应用程序
- 如果你还没有创建应用程序，则创建一个
- 点击你的应用程序
- 从应用程序页中获取客户端 ID，并将其保存在本地
整合认证
这个包暴露了一个名为 LinkedinAuth 的 React 组件。要将身份验证整合到你的应用程序中，只需按以下方式在 React 应用程序中导入 LinkedinAuth：
import { LinkedinAuth } from 'react-linkedin-certification';然后，可以将 LinkedinAuth 组件嵌套在任何需要验证用户身份的组件中，例如：
-- -------------------- ---- -------
-------- -
------ -
---- --------------------------
-------------
-------------------------
-------------------------------------------------
----------- -- --------------------- ------------- -----------
------------------ -- --------------------- ------------- ------------ ------
------------ -- ----------------------- ------------- --------- ---
--
------
--
-在上述示例中，你需要设置以下四个属性：
- clientId（必需）：你在 LinkedIn 应用程序中获取的客户端 ID
- redirectUrl（必需）：身份验证完成后，将在浏览器重定向到的 URL。这应该是你的 APP 的一个路由。
- onClick：当用户点击 LinkedIn 认证按钮时，将触发的回调函数。
- onComplete：当使用 LinkedIn 认证成功时触发的回调函数。你可以使用这个函数将用户信息发送到你的服务器/数据库。
- onError：当使用 LinkedIn 认证失败时触发的回调函数。
整合技能认证
这个包也提供了一个名为 LinkedinCertification 的 React 组件，使技能认证的整合变得简单。要将技能认证整合到你的应用程序中，只需按以下方式在 React 应用程序中导入 LinkedinCertification：
import { LinkedinCertification } from 'react-linkedin-certification';然后，将 LinkedinCertification 组件嵌套在需要展示用户技能的组件中，例如：
-- -------------------- ---- -------
-------- -
------ -
---- --------------------------
----------------------
-------------------------
-------------------------------------------
------------------------------ -- --------------------- ------------- ------------- ------
------------ -- ----------------------- ------------- --------- ---
--
------
--
-在上述示例中，你需要设置以下三个属性：
- clientId（必需）：你在 LinkedIn 应用程序中获取的客户端 ID
- authorizationCode（必需）：你在用户身份验证后从 LinkedIn 获取的授权代码。这个代码应该保存在本地数据库或者应用程序中，并在技能认证时从数据库或者应用程序中获取。
- onAuthorizationSuccess：技能认证成功时触发的回调函数。你可以使用这个函数将用户的技能认证信息保存到你的数据库中，并展示给用户。
- onError：当使用 LinkedIn 认证失败时触发的回调函数。
图示
下面的示例代码演示了如何在 React 应用程序中使用 react-linkedin-certification 包插件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- --------------------- - ---- -------------------------------
----- --- ------- --------------- -
------------------ -
-------------
-
-------- -
------ -
---- --------------------------
-------------
----------------------------------
-------------------------------
----------- -- --------------------- ------------- -----------
------------------ -- --------------------- ------------- ------------ ------
------------ -- ----------------------- ------------- --------- ---
--
----------------------
----------------------------------
----------------------------------------------------
------------------------------ -- --------------------- ------------- ------------- ------
------------ -- ----------------------- ------------- --------- ---
--
------
--
-
-
------ ------- ----结论
通过 react-linkedin-certification，你可以方便地在你的 React 应用程序中整合 LinkedIn 身份和技能认证功能。这个 npm 包提供了完整的组件和可扩展的属性，可以方便地根据你的具体需求进行配置和调整。在接下来的你的项目中实验使用它，体验其带来的便利和优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f7277584165