🔐 認証基盤セットアップ (@keio.jpドメイン制限)

[tocie]

概要

Firebase Authenticationを使用して、@keio.jpドメイン制限付きの認証システムを実装する。

前提条件

• Firebase サービス初期化完了 (Issue 🔥 Firebase サービス初期化とAngularFire設定 #3)
• AngularFire 設定完了

タスク一覧

1. Firebase Authentication プロバイダー設定

• Google認証プロバイダーの有効化
• 承認済みドメインに keio.jp の追加
• Firebase コンソールでの認証設定確認

2. AuthService の実装

• src/app/core/auth/auth.service.ts の作成
• Google サインイン機能の実装
• @keio.jp ドメイン制限の実装
• サインアウト機能の実装
• 認証状態の監視 (Observable)

3. AuthGuard の実装

• src/app/core/guards/auth.guard.ts の作成
• 認証必須ルートの保護
• 未認証ユーザーのリダイレクト処理
• ログイン後のリダイレクト機能

4. 認証コンポーネントの作成

• src/app/features/auth/login/login.component.ts の作成
• Angular Material UI での認証画面
• エラーメッセージの表示
• ローディング状態の管理

5. ユーザー管理の基盤

• src/app/core/services/user.service.ts の作成
• Firestore users コレクションとの連携
• 初回ログイン時のユーザー情報作成
• プロフィール情報の管理

実装仕様

AuthService の主要メソッド

@Injectable({ providedIn: 'root' })
export class AuthService {
  user$ = this.afAuth.authState;
  
  async signInWithGoogle(): Promise<void>
  async signOut(): Promise<void>
  private validateKeioEmail(email: string): boolean
  getCurrentUser(): Observable<User | null>
}

ドメイン制限ロジック

private validateKeioEmail(email: string): boolean {
  return email.endsWith('@keio.jp');
}

async signInWithGoogle() {
  const result = await this.afAuth.signInWithPopup(new GoogleAuthProvider());
  if (\!this.validateKeioEmail(result.user?.email || '')) {
    await this.signOut();
    throw new Error('慶應義塾大学のメールアドレスでログインしてください');
  }
}

Firestore Security Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    function isKeioUser() {
      return request.auth \!= null && 
             request.auth.token.email.matches('.*@keio.jp');
    }
    
    match /users/{userId} {
      allow read, write: if isKeioUser() && request.auth.uid == userId;
    }
    
    match /subjects/{subjectId} {
      allow read: if isKeioUser();
      allow write: if false; // 管理者のみ
    }
  }
}

UI/UX 要件

• 統一されたログイン画面デザイン
• エラーメッセージの日本語対応
• ローディング状態の適切な表示
• レスポンシブデザイン対応

Acceptance Criteria

• @keio.jpドメインのユーザーのみログイン可能
• 非対象ドメインは適切にエラーメッセージが表示される
• 認証状態がアプリ全体で適切に管理される
• 未認証ユーザーは保護されたページにアクセスできない
• ログイン後は適切なページにリダイレクトされる
• ユーザー情報がFirestoreに適切に保存される

テスト項目

• @keio.jpドメインでの正常ログイン
• 他ドメインでのログイン拒否
• ログアウト機能の動作確認
• 認証ガードの動作確認
• エラーケースの処理確認

セキュリティ考慮事項

• トークンの適切な管理
• Firestore Security Rules の実装
• XSS/CSRF対策の確認
• 認証情報の安全な保存

参照

• Firebase Auth Documentation
• AngularFire Auth Guide
• IMPLEMENTATION_PLAN.md フェーズ1-4, フェーズ2-7

次のステップ

Issue #5: 環境変数・セキュリティ設定の完了確認