497bcf0819
**Motivations:** - website-skeleton needs a real service contract with valid UUIDs and validators - Service wallet required for production use with configurable public key - Iframe styling needs improvement to remove scrollbars and match UserWallet theme **Root causes:** - DEFAULT_VALIDATEURS used placeholder public key that cannot verify signatures - No service wallet generation script for production deployment - Iframe had fixed height causing scrollbars and visual mismatch with dark theme **Correctifs:** - Created real service contract in src/serviceContract.ts with dedicated UUIDs (skeleton-service-uuid-4nkweb-2026) - Added service wallet generation script (generate-service-wallet.mjs) with .env and .env.private files - Improved iframe container styling: increased height (800px), dark background (#1a1a1a), better shadows, hidden scrollbars - Added .env.private to .gitignore for security **Evolutions:** - Service contract automatically loaded on startup and sent to UserWallet iframe - Public key configurable via VITE_SKELETON_SERVICE_PUBLIC_KEY environment variable - Added npm script 'generate-wallet' for easy wallet generation - Enhanced iframe visual integration with UserWallet dark theme **Pages affectées:** - website-skeleton/src/serviceContract.ts (new) - website-skeleton/src/config.ts - website-skeleton/src/main.ts - website-skeleton/generate-service-wallet.mjs (new) - website-skeleton/index.html - website-skeleton/package.json - website-skeleton/.gitignore - website-skeleton/.env (new) - website-skeleton/.env.private (new)
160 lines
7.5 KiB
HTML
160 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Le contrat – 4NK un nouveau web</title>
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 1rem;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
}
|
||
h1 { font-size: 1.5rem; margin-bottom: 1rem; color: #222; }
|
||
h2 { font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #333; }
|
||
h3 { font-size: 1rem; margin-top: 1rem; margin-bottom: 0.35rem; font-weight: 600; }
|
||
h4 { font-size: 0.95rem; margin-top: 0.75rem; margin-bottom: 0.25rem; font-weight: 600; color: #555; }
|
||
p { margin: 0.75rem 0; }
|
||
ul { margin: 0.5rem 0; padding-left: 1.5rem; }
|
||
li { margin: 0.4rem 0; }
|
||
a { color: #007bff; }
|
||
a:hover { text-decoration: underline; }
|
||
.highlight { background: #e8f4fd; padding: 1rem; border-radius: 8px; border-left: 4px solid #007bff; margin: 1rem 0; }
|
||
.commitment { background: #d4edda; padding: 1rem; border-radius: 8px; border-left: 4px solid #28a745; margin: 1rem 0; }
|
||
.your-part { background: #fff3cd; padding: 1rem; border-radius: 8px; border-left: 4px solid #ffc107; margin: 1rem 0; }
|
||
details { margin: 1rem 0; }
|
||
summary { cursor: pointer; font-weight: 600; color: #555; }
|
||
.meta { font-family: ui-monospace, monospace; font-size: 0.85rem; color: #666; background: #f5f5f5; padding: 0.2em 0.4em; border-radius: 4px; word-break: break-all; }
|
||
.member-list { list-style: none; padding-left: 0; }
|
||
.member-list > li { background: #f8f9fa; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #e0e0e0; margin: 0.5rem 0; }
|
||
.member-list > li > em { color: #666; font-size: 0.9rem; }
|
||
.pair-list { list-style: none; margin-top: 0.5rem; padding-left: 1rem; border-left: 3px solid #007bff; }
|
||
.pair-list > li { background: #fff; padding: 0.5rem 0.75rem; border-radius: 6px; margin: 0.4rem 0; border: 1px solid #e8e8e8; }
|
||
@media (max-width: 768px) {
|
||
body { padding: 0.75rem; }
|
||
h1 { font-size: 1.25rem; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Le contrat</h1>
|
||
<p><a href="index.html">← Retour à l'accueil</a> · <a href="membre.html">Qui êtes-vous ?</a></p>
|
||
|
||
<div class="highlight">
|
||
<strong>En résumé :</strong> Ce contrat définit les règles de confiance entre vous et le service.
|
||
Il précise <strong>qui peut faire quoi</strong> et <strong>comment prouver son identité</strong>.
|
||
Tout est vérifiable et transparent.
|
||
</div>
|
||
|
||
<h2>Qu'est-ce que ce contrat ?</h2>
|
||
<p>
|
||
Ce n'est pas un contrat papier, mais un <strong>accord numérique</strong> qui établit les règles du jeu.
|
||
Il définit :
|
||
</p>
|
||
<ul>
|
||
<li><strong>Le service</strong> : Website Skeleton (ce site de démonstration).</li>
|
||
<li><strong>Les actions possibles</strong> : se connecter (login).</li>
|
||
<li><strong>Les validateurs</strong> : qui a le droit de vérifier les connexions.</li>
|
||
</ul>
|
||
|
||
<h2>Ce que le service s'engage à faire</h2>
|
||
<div class="commitment">
|
||
<ul>
|
||
<li>✓ <strong>Ne jamais stocker vos clés privées</strong> — elles restent sur votre appareil.</li>
|
||
<li>✓ <strong>Vérifier votre identité de façon transparente</strong> — via une preuve cryptographique que vous fournissez.</li>
|
||
<li>✓ <strong>Respecter les règles du contrat</strong> — publiquement vérifiables.</li>
|
||
<li>✓ <strong>Utiliser une clé de service déclarée</strong> — jamais exposée, mais vérifiable.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h2>Ce que vous vous engagez à faire</h2>
|
||
<div class="your-part">
|
||
<ul>
|
||
<li>✓ <strong>Protéger votre appareil</strong> — c'est votre coffre-fort numérique.</li>
|
||
<li>✓ <strong>Fournir une preuve valide</strong> — en signant avec vos clés lors de la connexion.</li>
|
||
<li>✓ <strong>Être responsable de vos clés</strong> — si vous les perdez, personne ne peut les récupérer.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h2>Les parties prenantes</h2>
|
||
|
||
<h3>Le service (Website Skeleton)</h3>
|
||
<p>
|
||
C'est le site que vous utilisez. Il possède sa propre identité (un « validateur ») qui permet
|
||
de vérifier que les connexions sont légitimes.
|
||
</p>
|
||
|
||
<h3>Vous (le membre connecté)</h3>
|
||
<p>
|
||
Vous êtes l'utilisateur qui souhaite accéder au service. Votre identité est prouvée par
|
||
la signature de votre appareil (<a href="membre.html">en savoir plus</a>).
|
||
</p>
|
||
|
||
<h2>Comment fonctionne la validation ?</h2>
|
||
<ol>
|
||
<li>Vous demandez à vous connecter.</li>
|
||
<li>Votre appareil crée une <strong>preuve</strong> (login-proof) signée avec vos clés.</li>
|
||
<li>Le service vérifie cette preuve grâce aux règles définies dans ce contrat.</li>
|
||
<li>Si la preuve est valide, vous êtes connecté. Sinon, l'accès est refusé.</li>
|
||
</ol>
|
||
<p>
|
||
Ce système est <strong>plus sûr</strong> qu'un mot de passe classique car il n'y a rien à voler côté serveur.
|
||
</p>
|
||
|
||
<h2>Pourquoi c'est plus sûr ?</h2>
|
||
<ul>
|
||
<li><strong>Pas de base de mots de passe</strong> à pirater.</li>
|
||
<li><strong>Vos clés ne transitent jamais</strong> sur le réseau.</li>
|
||
<li><strong>Chaque connexion est unique</strong> (signature à usage unique).</li>
|
||
<li><strong>Vérifiable par tous</strong> — les règles du contrat sont publiques.</li>
|
||
</ul>
|
||
|
||
<details>
|
||
<summary>Détails techniques du contrat</summary>
|
||
<h3>Identifiants</h3>
|
||
<ul>
|
||
<li>Contrat UUID : <span class="meta">f9b9b336-4282-4c1c-b70b-e5197aeae3fa</span></li>
|
||
<li>Service UUID : <span class="meta">32b9095a-562d-4239-ae45-2d7ffb1a40de</span></li>
|
||
<li>Action login UUID : <span class="meta">0ac7de59-9e81-4bdc-bd19-c07750fad48e</span></li>
|
||
<li>Validateur (membre) : <span class="meta">0e865301-362f-4951-bfbc-531b7bddf820</span></li>
|
||
</ul>
|
||
<h3>Membres par rôles</h3>
|
||
<p>Chaque rôle définit qui peut valider quoi. Un membre peut avoir plusieurs Pairs (appareils), chaque Pair possède une clé publique unique :</p>
|
||
|
||
<h4>Validateur (contrat)</h4>
|
||
<ul class="member-list">
|
||
<li>
|
||
<strong>Membre</strong> : <span class="meta">0e865301-362f-4951-bfbc-531b7bddf820</span>
|
||
<br><em>Signatures obligatoires : 1</em>
|
||
<ul class="pair-list">
|
||
<li>
|
||
<strong>Pair 1</strong> : <span class="meta">f2779304-0d9b-4139-9aee-8d3347819d98</span>
|
||
<br>Clé publique : <span class="meta">0244f299538f4a091d93561dcee0c77de3e0d8bb917c9378405653c57f7800f174</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<h4>Validateur login (action)</h4>
|
||
<ul class="member-list">
|
||
<li>
|
||
<strong>Membre</strong> : <span class="meta">0e865301-362f-4951-bfbc-531b7bddf820</span>
|
||
<br><em>Signatures obligatoires : 1</em>
|
||
<ul class="pair-list">
|
||
<li>
|
||
<strong>Pair 1</strong> : <span class="meta">f2779304-0d9b-4139-9aee-8d3347819d98</span>
|
||
<br>Clé publique : <span class="meta">0244f299538f4a091d93561dcee0c77de3e0d8bb917c9378405653c57f7800f174</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
|
||
<p><a href="index.html">← Retour à l'accueil</a> · <a href="membre.html">Qui êtes-vous ?</a></p>
|
||
</body>
|
||
</html>
|