前言
在现今的互联网世界中，Github 已成为程序员们经常使用的一个平台。在开发时，我们常常需要使用 Github 提供的 API 进行相关操作，如获取用户信息，查询仓库等等。这时候，我们可以使用最新的 npm 包 react-github-login 来快速地实现 Github 授权登录，方便我们进行开发。本文将针对该 npm 包进行详解和使用指导，希望能够帮助读者更好地了解和使用该技术。
react-github-login 简介
react-github-login 是一款 React 封装的可自定义 Github 登录按钮组件。该组件可以快速地实现 Github 授权登录的功能，同时支持自定义登录按钮。该组件源代码托管在 Github 上，并已发布至 npm 包管理器，方便用户下载使用。
安装 react-github-login
在安装 react-github-login 之前，需要先确认已安装 Node.js 和 npm 包管理器。在确认安装完成后，可以打开终端运行以下命令进行安装：
--- ------- ------------------
执行完上述命令后，react-github-login 就已经安装完成了。
如何使用 react-github-login
使用 react-github-login 需要三个参数：clientId、redirectUri 和 onSuccess 回调函数。其中，clientId 和 redirectUri 是在 Github 上创建 OAuth App 后生成的，onSuccess 则为登录成功后的回调函数。
以下是一个使用 react-github-login 组件的示例代码：
------ ----- ---- --------
------ ----------- ---- ---------------------
----- -------- - -------------------- -- -------------- ---------------
----- ----------- - ---------------------------------- -- -------
----- --------- - -------- -- ---------------------- -- ----------
----- ----- - -- -- -
------ -
------------
-------------------
-------------------------
---------------------
--
--
--
------ ------- ------在上述示例代码中，我们首先引入了 react-github-login 包，并声明了三个参数：clientId、redirectUri 和 onSuccess。之后，在 Login 组件中，我们使用 GitHubLogin 组件渲染了一个可点击的 Github 登录按钮，并将之前声明的三个参数传递给组件。当用户成功登录后，onSuccess 参数所指定的回调函数就会被执行。
自定义 github 登录按钮
react-github-login 组件默认提供了一个简单的 Github 登录按钮，但是用户可以很方便地自定义自己的 Github 登录按钮。我们只需要在 GitHubLogin 组件内部编写自己的组件即可。
以下示例代码演示了如何使用 Ant Design 的 Button 组件作为自定义 Github 登录按钮：
------ ----- ---- --------
------ ----------- ---- ---------------------
------ - ------ - ---- -------
----- -------- - -------------------- -- -------------- ---------------
----- ----------- - ---------------------------------- -- -------
----- --------- - -------- -- ---------------------- -- ----------
----- --------- - ----- -- -
----- - --------- ------- - - ------
------ -
------- ----------------- -------- ----------- ------- ------ ------ ---
----------
---------
--
--
----- ----- - -- -- -
------ -
------------
-------------------
-------------------------
---------------------
---------------------
-
--------- ------
--------------
--
--
------ ------- ------需要注意的是，由于 Github 登录按钮需要回调函数和 OAuth App 等参数的配合来运作，因此我们需要通过 props 将这些参数传到自定义按钮组件中，以便自定义按钮组件可以访问这些参数。
总结
通过本文的介绍，我们了解了 react-github-login 的基本使用方法及自定义 Github 登录按钮的技巧。react-github-login 这款 npm 包是一个非常方便实用的工具，可以极大地提高开发效率，减少开发成本。在将来的项目中，我们可以尝试使用该工具来实现 Github 授权登录等功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fc981e8991b448dd49e