オープンソース、オープンドア: ハクトーバーフェスト 4 のまとめ

4 週間連続のハクトーバーフェストを経て、ついに 4 人の承認された PR を獲得してチャレンジを完了しました。正直に言うと、オープンソースは自分の快適ゾーンの外にあるもののように感じられ、このイベントの開始時にはかなり緊張していました。しかし、小さな問題から始めることで自信がつき、やがて、より複雑な問題を解決しようとする意欲が湧いてきました。この意欲の一部は、学生時代にあったと思います。開発者コミュニティに貢献することで、現実世界の経験を得ることができました。

私のハクトーバーフェストの旅についてもっと知りたい場合は、私の個人ページをご覧ください。そこには、各 PR 後の私の感想が記録されています。それでは早速、最終週の PR を始めましょう。

Mikochi の概要: ミニマリストのリモート ファイル ブラウザー

Mikochi は軽量の自己ホスト型リモート ファイル ブラウザで、プライベート サーバーや NAS (ネットワーク接続ストレージ) 上のファイルを管理するユーザーに最適です。このツールを使用すると、ユーザーはリモート ディレクトリを簡単に移動したり、ファイルのアップロード、ダウンロード、名前変更、削除などのファイル管理タスクを実行したり、メディア ファイルを VLC や MPV などのプレーヤーに直接ストリーミングしたりすることもできます。

Mikochi は、JavaScript/Preact と Go/Gin の API バックエンドを利用した最新の Web インターフェイスで構築されており、リモート ファイルの閲覧にシームレスで応答性の高いエクスペリエンスを提供します。

私が取り組んだこと

このプロジェクトでは、Mikochi のユーザー制御とセキュリティの強化に関連する問題に取り組み、アプリケーションのナビゲーションバーの「ログアウト」ボタンからアクセスできるログアウト機能を実装しました。この機能は、認証トークンをクリアしてログイン ページにリダイレクトすることで、ユーザーを安全にログアウトするように設計されています。フロントエンドでは、ログアウト ボタンによって新しい /logout エンドポイントへの API 呼び出しがトリガーされ、ローカル ストレージから JWT が消去され、ページが更新またはリダイレクトされて、ユーザーが完全にログアウトされたことが確認されます。バックエンドでは、無効化されたトークンのリストにトークン ID を追加することで、/logout エンドポイントを処理するロジックを構築しました。このリストは JWT 認証ミドルウェアでチェックされ、無効なトークンを含むリクエストが 403 応答で拒否されることが保証されます。この追加により、Mikochi のセキュリティが向上し、ユーザーがアクティブなセッションを制御し、共有デバイスまたは公共デバイス上のアカウントを保護できるようになりました。

解決

この PR では、ユーザー セッション制御を強化するためにフロントエンドとバックエンドの両方の要件に対処する、Mikochi の安全なログアウト機能を実装しました。フロントエンドで、/api/logout への API 呼び出しを処理し、ローカル ストレージから JWT をクリアする Logout コンポーネントを作成しました。ユーザーが「ログアウト」をクリックすると、JWT が削除され、ログアウトを検証するために POST リクエストがバックエンドに送信され、ページは window.location.href を使用してユーザーをメインのログイン画面にリダイレクトします。バックエンドでは、generateAuthToken() の JWT 生成を変更して ID プロパティを含め、トークンを効果的に無効にできるようにしました。次に、無効化されたトークン リストに JWT ID を追加することで、ログアウト リクエストを管理するハンドラーを backend/auth/handlers.go に追加しました。 JWT ミドルウェアは各リクエストをチェックし、トークンが無効になっている場合はアクセスを拒否し、403 応答を返します。機能を検証するために、ログアウト後に以前に無効にしたトークンをローカル ストレージに再挿入する手動テストを実施しました。これにより、トークンを再利用しようとする試みが失敗することが確認され、ログアウト プロセスが効果的に保護されました。

私の考え

私にとって、これはバックエンドとフロントエンドの開発を 1 つのプロジェクトに融合した魅力的なプロジェクトでした。私がフロントエンドで取り組んだ問題は比較的単純で、外観を改善するために少し CSS を加えてログアウト ボタンを作成するというものでした。私はしばらく React を学習してきたので、簡単な復習が必要でしたが、ソースにすでに含まれているコードとコンポーネントを理解するのに役立ちました。

バックエンドでは、プロジェクト オーナーが Docker を使用してプロジェクトをコンテナ化していました。これは私にとって馴染み深いものでした。ただし、最も時間がかかったのは、このプロジェクトのバックエンド言語である Go の使用でした。私には Go の経験がありませんでしたが、この問題に取り組むことで Go を機能レベルまで学ぶ機会が得られ、非常にやりがいのあるものだと感じました。

以上がオープンソース、オープンドア: ハクトーバーフェスト 4 のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。