使用 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中文網其他相關文章！