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

API

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

現代の開発チームにおいて、複数のツールやサービス間での認証管理は重要な課題となっています。特に、自己ホスト型の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は理想的な選択肢となります。

社内リポジトリ管理の新選択肢：Forgejo - コーディングエージェント時代のGitHub Actions互換CI/CD
はじめに2025年現在、AIコーディングエージェントがソフトウェア開発に革命をもたらしています。Claude Code GitHub ActionsがGitHubワークフローにAIを活用した自動化をもたらし、@claudeメンションでコード...
hamaruki.com
2025.06.21

アプリケーションの特徴

🔐 簡単で柔軟な認証システム

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

📋 高機能なTODO管理

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

🌐 モダンなUI/UX

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

動かし方

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

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

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

# 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）に以下を追加：

[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インスタンス

ブラウザ

  • Chrome 80+
  • Firefox 75+
  • Safari 13+
  • Edge 80+

トラブルシューティング

よくある問題

Q: ログインできません
A: 以下を確認してください：

  • Forgejo URLが正しいか
  • ユーザー名・パスワードが正しいか
  • ForgejoサーバーにCORS設定が追加されているか

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

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

セキュリティ機能

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

リポジトリ: Forgejo認証TODOアプリ
ライセンス: MIT License

コメント

タイトルとURLをコピーしました