Forgejoと認証連携で始める効率的な開発ワークフロー：OAuth/API認証TODOアプリケーションの実装例

## はじめに：開発チームの認証統合課題

現代の開発チームにおいて、複数のツールやサービス間での認証管理は重要な課題となっています。特に、自己ホスト型のGitサービスであるForgejoを採用した場合、開発に関連するツールやアプリケーションをどのように統合し、シームレスな開発体験を提供するかが鍵となります。

今回紹介する「Forgejo認証TODOアプリ」は、この課題に対する一つの解決策として、Forgejo APIを活用した認証機能付きタスク管理アプリケーションを提供します。

## Forgejoとは：コーディングエージェント時代の理想的な選択肢

Forgejoは、GitHub Actions互換の「Forgejo Actions」を内蔵した自己ホスト型のGitサービスです。2025年現在、AIコーディングエージェントがソフトウェア開発に革命をもたらしている中で、Forgejoは特に注目すべき特徴を持っています：

- **GitHub Actions完全互換**: 既存のGitHub Actionsワークフローをそのまま移植可能
- **セルフホスト**: 企業のセキュリティ要件に対応した自社管理可能な環境
- **軽量**: GitLabと比較して軽量で高速な動作
- **コミュニティ主導**: オープンソースコミュニティによる活発な開発

特に、Claude CodeやOpenHands GitHub Actionなどのコーディングエージェントは、GitHub Actions形式のワークフローを前提としているため、Forgejoは理想的な選択肢となります。

https://hamaruki.com/forgejo-on-premise-actions

## アプリケーションの特徴

https://x.com/hAru_mAki_ch/status/1936414838299013309

### 🔐 簡単で柔軟な認証システム
- **簡単ログイン**: Forgejoのユーザー名・パスワードでそのままログイン
- **APIトークン対応**: 高度なユーザー向けAPIトークン認証
- **複数ユーザー対応**: 各ユーザーが自分のアカウントでログイン可能

### 📋 高機能なTODO管理
- **タスクの追加、編集、削除、完了管理**
- **優先度設定**: タスクに優先度（高・中・低）を設定可能
- **フィルタリング**: ステータス（全て・未完了・完了済み）と優先度でフィルタリング
- **統計表示**: TODO数、完了率などのリアルタイム統計情報

### 🌐 モダンなUI/UX
- **レスポンシブデザイン**: モバイルデバイスにも完全対応
- **モダンUI**: 直感的で使いやすいインターフェース
- **ローカル保存**: ブラウザのローカルストレージにデータを安全に保存

## 動かし方

### 1. リポジトリのクローン

```bash
git clone https://github.com/Sunwood-ai-labs/forgejo-auth-todo-app.git
cd forgejo-auth-todo-app
```

### 2. ローカルサーバーの起動

```bash
# Python 3を使用する場合
python3 -m http.server 8888

# Node.jsのhttp-serverを使用する場合
npx http-server -p 8888

# PHP開発サーバーを使用する場合
php -S localhost:8888
```

### 3. ブラウザでアクセス

```
http://localhost:8888
```

### 4. Forgejo設定（CORS対応）

CORSエラーが発生する場合、Forgejoの設定ファイル（`app.ini`）に以下を追加：

```ini
[cors]
ENABLED = true
ALLOW_DOMAIN = localhost:8888,127.0.0.1:8888
ALLOW_SUBDOMAIN = false
METHODS = GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS
MAX_AGE = 86400
ALLOW_CREDENTIALS = true
```

設定後、Forgejoサーバーを再起動してください。

## 使用方法

### 簡単ログイン（推奨）

1. **Forgejo URL**: `http://192.168.0.131:3000/`（デフォルト設定、必要に応じて変更）
2. **ユーザー名**: あなたのForgejoユーザー名を入力
3. **パスワード**: あなたのForgejoパスワードを入力
4. **「ログイン」**ボタンをクリック

### APIトークンでのログイン

1. **「APIトークンでログイン」**をクリック
2. Forgejoでアクセストークンを生成：
   - Forgejoにログイン → 右上のアバター → **設定**
   - **アプリケーション** → **アクセストークンの管理**
   - **新しいトークンを生成**（`read:user`権限を選択）
3. 生成したトークンを入力してログイン

### TODO管理

- **新しいTODO追加**: タイトル、説明、優先度を設定して追加
- **TODO編集**: 編集ボタンで既存TODOを修正
- **完了/未完了切り替え**: チェックボタンでステータス変更
- **TODO削除**: 削除ボタンで不要なTODOを削除
- **フィルタリング**: ステータスや優先度でTODOを絞り込み

## 技術スタック

- **フロントエンド**: HTML5, CSS3, Vanilla JavaScript
- **認証**: Forgejo Basic認証 + REST API
- **データ保存**: Browser LocalStorage
- **スタイリング**: CSS Grid, Flexbox, CSS Animations
- **アイコン**: Font Awesome 6

## プロジェクト構造

```
forgejo-auth-todo-app/
├── index.html              # メインHTMLファイル
├── style.css               # スタイルシート
├── forgejo-auth.js         # Forgejo API認証クラス
├── todo-app.js             # TODOアプリケーション管理クラス
├── app.js                  # メインアプリケーションファイル
├── forgejo-cors-config.ini # Forgejo CORS設定ファイル
├── cors-solution.md        # CORSエラー解決ガイド
└── README.md               # ドキュメント
```

## 対応環境

### Forgejoインスタンス
- **ローカルForgejo**: `http://192.168.0.131:3000/`
- [Codeberg](https://codeberg.org)
- [Disroot Git](https://git.disroot.org)
- [Chapril Forge](https://forge.chapril.org)

### ブラウザ
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## トラブルシューティング

### よくある問題

**Q: ログインできません**
A: 以下を確認してください：
- Forgejo URLが正しいか
- ユーザー名・パスワードが正しいか
- ForgejoサーバーにCORS設定が追加されているか

**Q: TODOが保存されません**
A: ブラウザのローカルストレージが有効になっているか確認してください。

**Q: モバイルで表示が崩れます**
A: 最新のブラウザを使用し、JavaScriptが有効になっているか確認してください。

## セキュリティ機能

- **Basic認証**: ユーザー名・パスワードを安全にエンコード
- **認証情報**: ローカルストレージに暗号化して保存（7日間有効）
- **最小権限**: 必要最小限の権限のみ要求
- **セッション管理**: 安全なログアウト機能

---

**リポジトリ**: [Forgejo認証TODOアプリ](https://github.com/Sunwood-ai-labs/forgejo-auth-todo-app.git)  
**ライセンス**: MIT License