使用 GitHub OAuth 身份验证

大家好，

在这篇博文中，我将讨论我的第二个拉取请求 (PR)，作为我的任务的 0.3 版本系列的一部分。此 PR 延续了我在 GitExplorer 项目上的工作，该项目是我最初在 Hacktoberfest 活动期间做出的贡献。对于本周的问题，项目维护者请求实现 GitHub 身份验证功能。

GitExplorer 概述

GitExplorer 是一个旨在简化与 GitHub 存储库交互的项目。如果您有兴趣了解有关该项目或我之前对此项目的贡献的更多信息，请随时查看我之前关于此存储库的博客文章。

这次我解决的具体问题是应用程序中缺少 GitHub 身份验证。此限制阻止应用程序提供个性化功能，例如加星标的存储库。我的任务是实现 GitHub 身份验证功能，使用户能够使用其 GitHub 帐户登录和注销。此外，用户还可以为他们最喜欢的存储库加注星标，并只需单击按钮即可获取所有加星标的存储库的列表。

挑战：没有 UI 框架的情况下工作

GitExplorer 不使用任何现代 UI 框架，例如 React。相反，它仅依赖于普通 JavaScript、CSS 和 HTML。虽然这种简单性有其优点，但它要求我投入更多时间来解决这个问题，因为原始代码库是专注于前端的。添加 GitHub 身份验证和相关后端功能意味着要超越现有结构并实施服务器端解决方案。

迁移项目并设置后端

为了支持新功能，我首先重组了项目。我将所有现有的前端代码移至公共文件夹中，并创建了一个后端文件夹来容纳服务器端实现。对于后端，我选择了 Express 框架，因为它与 Passport.js 集成得很好，Passport.js 是我用来处理 GitHub 身份验证的库。

步骤包括：

• 设置 Express 来为应用程序提供服务。
• 配置 Passport.js 以使用 CLIENT_ID 和 CLIENT_SECRET 处理身份验证，为了安全起见，我将其存储在 .env 文件中。
• 添加路由来管理用户操作，例如为存储库加星标和取消星标。

GitHub API 集成

设置后端后，我集成了 GitHub 的 API 以支持所需的功能。其中包括：

• 使用户能够通过其 GitHub 帐户登录。
• 添加直接从应用程序对存储库加注星标和取消星标的功能。
• 获取用户加星标的存储库列表并将其显示在专用页面上，可通过 UI 上的按钮访问。

编写模块化、DRY 代码

除了实现功能之外，我还专注于通过应用 DRY（不要重复自己）原则来提高代码质量。我通过将功能分离为可重用的组件来模块化代码，使其更易于将来维护和扩展。

经验教训和未来展望

这是我第一次使用 GitHub 身份验证，它为集成第三方 API 和管理后端服务提供了宝贵的见解。虽然项目最初看起来很简单，但前端和后端的工作让我对全栈开发有了更深入的了解。

GitExplorer 仍然有许多有趣的问题可供协作。如果时间允许，我计划进一步做出贡献。事实证明，该项目对初学者很友好，同时提供了充足的学习新技术和概念的机会。

感谢您的阅读，我希望这篇文章能够激励您探索类似的学习和成长机会。

以上是使用 GitHub OAuth 身份验证的详细内容。更多信息请关注PHP中文网其他相关文章！