anchorage_layer_simple/docs/WEBSITE_SKELETON.md

# website-skeleton

Squelette d’un site web qui intègre UserWallet en iframe : écoute des messages `postMessage` (login-proof, error, contract), vérification des preuves de login via `service-login-verify`, et affichage du statut (accepté / refusé). Connexion via un seul parcours : « Se connecter » puis authentification MFA dans l'iframe.

## Objectif

Fournir un projet minimal, prêt à l’emploi, pour :

- embarquer UserWallet dans une page via iframe ;
- communiquer avec l’iframe via `postMessage` (Channel Messages) ;
- vérifier les preuves de login côté parent avec le package `service-login-verify`.

Utile comme base pour un service (certificator, zapwall, etc.) qui consomme UserWallet et doit valider les sessions.

## Emplacement et structure

- **Dossier** : `website-skeleton/` à la racine du dépôt (à côté de `userwallet/`, `service-login-verify/`, `api-relay/`).
- **Stack** : Vite, TypeScript, dépendance `service-login-verify` (`file:../service-login-verify`).

### Fichiers principaux

| Fichier | Rôle |
|---------|------|
| `index.html` | Page avec iframe UserWallet, zone de statut, lien « Description du contrat », bouton « Se connecter » |
| `contrat.html` | Page de description du contrat de service skeleton (labels, UUIDs, usage) |
| `src/main.ts` | Chargement iframe, écoute `message`, envoi du contrat au clic « Se connecter », appel `verifyLoginProof`, mise à jour du statut |
| `src/config.ts` | `USERWALLET_ORIGIN`, `DEFAULT_VALIDATEURS` (placeholder) |
| `package.json` | Scripts `dev` / `build` / `preview`, dépendance `service-login-verify` |
| `start.sh` | Build + `vite preview` sur le port 3024 (production) |
| `vite.config.ts` | `preview.allowedHosts: ['skeleton.certificator.4nkweb.com']` pour éviter 403 via proxy |
| `website-skeleton.service` | Unité systemd pour servir le site |
| `install-website-skeleton.sh` | Installation locale (build, systemd) |
| `README.md` | Instructions d’installation, configuration et utilisation |

## Prérequis

- **service-login-verify** : exécuter `npm run build` dans `../service-login-verify` avant d’installer ou builder le skeleton.
- **UserWallet** : à servir sur l’URL configurée (`USERWALLET_ORIGIN`) pour que l’iframe fonctionne.

## Installation et commandes

```bash
cd website-skeleton
npm install
npm run build
```

- **Développement** : `npm run dev` → serveur sur `http://localhost:3024`.
- **Preview** : `npm run preview` après build.

## Configuration

### Origine UserWallet

- **Fichier** : `src/config.ts`.
- **Variable** : `USERWALLET_ORIGIN` = URL de l’iframe et `targetOrigin` pour `postMessage`.
- **Défauts** :
  - En dev : `http://localhost:3018` (UserWallet en dev sur ce port).
  - En prod : `https://userwallet.certificator.4nkweb.com`.
- **Override** : variable d’environnement `VITE_USERWALLET_ORIGIN` (ex. `VITE_USERWALLET_ORIGIN=http://localhost:3018 npm run dev`).

### Validateurs

- **Fichier** : `src/config.ts`, objet `DEFAULT_VALIDATEURS`.
- **Rôle** : structure des validateurs de l’action login (placeholder).
- **Usage réel** : remplacer par les validateurs issus du contrat du service (action login), ou les charger depuis une API / un channel.

## Utilisation

1. Lancer UserWallet (dev ou déployé) sur l’URL configurée.
2. Lancer le skeleton (`npm run dev` ou servir `dist/`).
3. Ouvrir la page du skeleton : l’iframe affiche UserWallet.
4. **Se connecter** : cliquer « Se connecter » → envoi du contrat à l’iframe, affichage de l’iframe.
5. **Login MFA** : effectuer le flux de login (MFA) dans l’iframe ; à la fin, UserWallet envoie `login-proof` au parent. Le skeleton appelle `verifyLoginProof`, puis affiche « Login accepté » ou « Login refusé : … ».
6. **Description du contrat** : lien « Description du contrat » vers `contrat.html`.

## Messages postMessage

| Type | Sens | Rôle du skeleton |
|------|------|-------------------|
| `contract` | Parent → iframe | Envoyé au clic sur « Se connecter » (et au load de l’iframe). |
| `login-proof` | Iframe → parent | Vérification via `verifyLoginProof`, mise à jour du statut. |
| `error` | Iframe → parent | Affichage du message d’erreur. |

## Déploiement

- **Port** : 3024 (aucun conflit avec le Dashboard, 3020).
- **Backend** : machine 192.168.1.168 (site + service systemd).
- **Proxy** : 192.168.1.100 ; Nginx route `skeleton.certificator.4nkweb.com` → `http://192.168.1.168:3024`.
- **Certificat** : Let's Encrypt sur le proxy pour `skeleton.certificator.4nkweb.com` (via `configure-nginx-proxy.sh` / `update-proxy-nginx.sh`).

### Installation

1. **Sur la machine backend (192.168.1.105)** :
   ```bash
   ./website-skeleton/install-website-skeleton.sh
   ```
   Construit le front, installe et démarre le service systemd (`website-skeleton.service`).

2. **Proxy + certificat** : à partir de la racine du dépôt,
   ```bash
   ./update-proxy-nginx.sh
   ```
   Configure Nginx sur le proxy (.100), génère le certificat pour `skeleton.certificator.4nkweb.com`, recharge Nginx.

Voir `docs/DOMAINS_AND_PORTS.md` pour les domaines et ports.

## Références

- **Package vérification** : `service-login-verify/`, `features/service-login-verify.md`
- **Iframe et login** : `userwallet/`, `features/userwallet-contrat-login-reste-a-faire.md` (§ 3.7)
- **Relais** : `api-relay/`, `docs/DOMAINS_AND_PORTS.md`