109 lines
3.0 KiB
Markdown
109 lines
3.0 KiB
Markdown
# Extension & Server Projekt
|
|
|
|
Dieses Projekt besteht aus drei Hauptkomponenten:
|
|
|
|
## Extension
|
|
- **Zweck**: Browser-Extension mit JWT-basierter Authentifizierung
|
|
- **Speicherort**: `/Extension`
|
|
- Empfängt JWT von der Web-App und kommuniziert mit dem Backend
|
|
|
|
## Server (React Web App)
|
|
- **Zweck**: Login-Interface mit Appwrite-Authentifizierung
|
|
- **Speicherort**: `/Server`
|
|
- Basiert auf React mit Appwrite-Integration
|
|
- Sendet JWT an die Extension nach erfolgreichem Login
|
|
|
|
## Backend
|
|
- **Zweck**: Serverseitige JWT-Validierung und API-Endpoints
|
|
- **Speicherort**: `/Server/backend`
|
|
- Node/Express Server mit Appwrite-Integration
|
|
- Validiert JWTs und führt privilegierte Aktionen aus
|
|
|
|
## Getting Started
|
|
|
|
### 1. Backend starten
|
|
|
|
```powershell
|
|
cd Server\backend
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Das Backend läuft auf `http://localhost:3000`
|
|
|
|
**Wichtig**: Vor dem Start `APPWRITE_API_KEY` in `Server/backend/.env` eintragen!
|
|
|
|
### 2. React Web App starten
|
|
|
|
```powershell
|
|
cd Server
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Die Web-App läuft auf `http://localhost:5173` (oder einem anderen Port, den Vite anzeigt)
|
|
|
|
**Wichtig**: Stelle sicher, dass `Server/.env` die korrekten Appwrite-Konfigurationswerte enthält:
|
|
- `VITE_APPWRITE_ENDPOINT`
|
|
- `VITE_APPWRITE_PROJECT_ID`
|
|
|
|
### 3. Extension laden
|
|
|
|
1. Öffne Chrome/Edge und gehe zu `chrome://extensions/` (oder `edge://extensions/`)
|
|
2. Aktiviere **"Entwicklermodus"** (oben rechts)
|
|
3. Klicke auf **"Entpackte Erweiterung laden"**
|
|
4. Wähle den `Extension/` Ordner aus
|
|
5. Die Extension sollte jetzt geladen sein
|
|
|
|
### 4. Testen
|
|
|
|
1. Öffne die Web-App im Browser (`http://localhost:5173`)
|
|
2. Du siehst den Login-Sperrbildschirm
|
|
3. Logge dich mit deinen Appwrite-Credentials ein
|
|
4. Nach erfolgreichem Login verschwindet der Sperrbildschirm
|
|
5. Öffne die Extension (Klick auf das Extension-Icon)
|
|
6. Du solltest "Authed: true" sehen
|
|
7. Klicke auf "Test action" um die Backend-Verbindung zu testen
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
eship/
|
|
├── Extension/ # Browser-Extension
|
|
│ ├── manifest.json
|
|
│ ├── background.js
|
|
│ ├── content-script.js
|
|
│ ├── popup.html
|
|
│ └── popup.js
|
|
├── Server/ # React Web App
|
|
│ ├── src/
|
|
│ │ └── App.jsx # Login-Sperrbildschirm
|
|
│ ├── .env # Vite Env-Variablen
|
|
│ └── backend/ # Node/Express Backend
|
|
│ ├── server.js
|
|
│ ├── .env # Backend Env-Variablen
|
|
│ └── package.json
|
|
└── setup/ # Setup & Konfiguration
|
|
```
|
|
|
|
## Konfiguration
|
|
|
|
### Backend `.env` (Server/backend/.env)
|
|
```
|
|
APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
|
|
APPWRITE_PROJECT_ID=696b82bb0036d2e547ad
|
|
APPWRITE_API_KEY=<HIER_DEIN_API_KEY_EINTRAGEN>
|
|
PORT=3000
|
|
```
|
|
|
|
### React App `.env` (Server/.env)
|
|
```
|
|
VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
|
|
VITE_APPWRITE_PROJECT_ID=696b82bb0036d2e547ad
|
|
```
|
|
|
|
### Extension Backend URL (Extension/background.js)
|
|
```javascript
|
|
const BACKEND_URL = "http://localhost:3000"; // Anpassen falls nötig
|
|
```
|