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

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) :

   ./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,

   ./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