GitHub OAuth 認証の使用

皆さん、こんにちは

このブログ投稿では、私の課題のリリース 0.3 シリーズの一部としての 2 番目のプル リクエスト (PR) について説明します。この PR は、Hacktoberfest イベント中に私が最初に貢献した GitExplorer プロジェクトでの作業を継続します。今週号では、プロジェクトのメンテナーから GitHub 認証機能の実装をリクエストされました。

GitExplorer の概要

GitExplorer は、GitHub リポジトリとのやり取りを簡素化することを目的としたプロジェクトです。このプロジェクトやプロジェクトに対する私のこれまでの貢献について詳しく知りたい場合は、このリポジトリに関する私の以前のブログ投稿を自由にチェックしてください。

今回私が取り組んだ具体的な問題は、アプリケーションに GitHub 認証が存在しないことでした。この制限により、アプリはスター付きリポジトリなどのパーソナライズされた機能を提供できなくなりました。私のタスクは、ユーザーが GitHub アカウントを使用してログインおよびログアウトできるようにする GitHub 認証機能を実装することでした。さらに、ユーザーはボタンをクリックするだけで、お気に入りのリポジトリにスターを付けたり、スターを付けたすべてのリポジトリのリストを取得したりすることができます。

課題: UI フレームワークなしでの作業

GitExplorer は、React のような最新の UI フレームワークを使用しません。代わりに、標準的な JavaScript、CSS、HTML のみに依存します。このシンプルさには利点もありますが、元のコードベースはフロントエンドに焦点を当てていたため、この問題により多くの時間を費やす必要がありました。 GitHub 認証と関連するバックエンド機能を追加するということは、既存の構造を超えてサーバー側のソリューションを実装することを意味しました。

プロジェクトの移行とバックエンドのセットアップ

新機能をサポートするために、まずプロジェクトを再構築しました。既存のフロントエンド コードをすべてパブリック フォルダーに移動し、サーバー側の実装を格納するバックエンド フォルダーを作成しました。バックエンドには、GitHub 認証の処理に使用したライブラリである Passport.js とうまく統合できる Express フレームワークを選択しました。

以下の手順が含まれます:

• アプリケーションを提供するために Express を設定しています。
• CLIENT_ID と CLIENT_SECRET を使用して認証を処理するように Passport.js を構成します。セキュリティのために .env ファイルに保存しました。
• リポジトリのスター付けやスター付け解除などのユーザー アクションを管理するルートを追加します。

GitHub APIの統合

バックエンドをセットアップした後、必要な機能をサポートするために GitHub の API を統合しました。これには以下が含まれます:

• ユーザーが GitHub アカウント経由でログインできるようにします。
• アプリケーションから直接リポジトリにスターを付けたり、スターを外したりできる機能を追加します。
• ユーザーのスター付きリポジトリのリストを取得し、UI 上のボタンからアクセスできる専用ページに表示します。

モジュール式の DRY コードの作成

機能を実装するだけでなく、DRY (Don'trepeat Yourself) 原則を適用してコードの品質を向上させることに重点を置きました。関数を再利用可能なコンポーネントに分割することでコードをモジュール化し、将来の保守と拡張を容易にしました。

学んだ教訓と今後の展望

これは私にとって GitHub 認証を扱う初めての経験であり、サードパーティ API の統合とバックエンド サービスの管理について貴重な洞察を得ることができました。プロジェクトは最初は単純に見えましたが、フロントエンドとバックエンドの両方に取り組むことで、フルスタック開発についてより深く理解できるようになりました。

GitExplorer には、コラボレーションの余地がある興味深い問題がまだたくさんあります。時間が許せば、さらに貢献するつもりです。このプロジェクトは初心者に優しいと同時に、新しいテクノロジーや概念を学ぶ十分な機会を提供することが証明されています。

お読みいただきありがとうございます。この投稿があなたに同様の学習と成長の機会を模索するきっかけとなることを願っています。

以上がGitHub OAuth 認証の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。