136 lines
6.9 KiB
Markdown
136 lines
6.9 KiB
Markdown
# Relay - Specifications
|
|
|
|
## 1. <a name='Tabledesmatires'></a>Table des matières
|
|
|
|
<!-- vscode-markdown-toc -->
|
|
* 1. [Table des matières](#Tabledesmatires)
|
|
* 2. [Objectif](#Objectif)
|
|
* 3. [Portée](#Porte)
|
|
* 4. [Documents de référence](#Documentsderfrence)
|
|
* 5. [Interface Client Web](#InterfaceClientWeb)
|
|
* 5.1. [Structure HTML de Base](#StructureHTMLdeBase)
|
|
* 5.2. [Page de création d'une identité numérique (create)](#Pagedecrationduneidentitnumriquecreate)
|
|
* 5.2.1. [Page de sélection de l'`ItemProcess` et des membres en charge de renvoyer les shards de la clé `recover`](#PagedeslectiondelItemProcessetdesmembresenchargederenvoyerlesshardsdelaclrecover)
|
|
* 5.2.2. [Page d'enrolement dans un `ItemProcess` (`onboarding`)](#PagedenrolementdansunItemProcessonboarding)
|
|
* 5.2.3. [Page de téléchargement des images de login des third parties](#Pagedetlchargementdesimagesdelogindesthirdparties)
|
|
* 5.3. [Page de récupération d'une identité numérique (`recover`)](#Pagedercuprationduneidentitnumriquerecover)
|
|
* 5.4. [Page de révocation d'une identité numérique (`revoke`)](#Pagedervocationduneidentitnumriquerevoke)
|
|
* 5.5. [Page de la liste des `ItemProcess`](#PagedelalistedesItemProcess)
|
|
* 5.6. [Page de Détail d'un `ItemProcess`](#PagedeDtaildunItemProcess)
|
|
* 5.7. [Page socle des `ItemProcess`](#PagesocledesItemProcess)
|
|
* 5.7.1. [4.7. Page de la liste d'un type d'`Item`](#PagedelalisteduntypedItem)
|
|
* 5.7.2. [4.7. Page de détail d'un `Item`](#PagededtaildunItem)
|
|
* 5.7.3. [4.7. Page de la liste des notifications](#Pagedelalistedesnotifications)
|
|
* 5.7.4. [4.7. Page de détail d'une notifications](#Pagededtaildunenotifications)
|
|
* 5.8. [Page d'import d'une image de login](#Pagedimportduneimagedelogin)
|
|
* 5.9. [Page de validation d'un code de confirmation (2FA)](#Pagedevalidationduncodedeconfirmation2FA)
|
|
* 6. [5. SDK Typescript](#5.SDKTypescript)
|
|
* 7. [5. SDK Web Assembly](#5.SDKWebAssembly)
|
|
* 8. [5. Serveur web](#5.Serveurweb)
|
|
|
|
<!-- vscode-markdown-toc-config
|
|
numbering=true
|
|
autoSave=true
|
|
/vscode-markdown-toc-config -->
|
|
<!-- /vscode-markdown-toc -->
|
|
|
|
## 2. <a name='Objectif'></a>Objectif
|
|
|
|
L'objectif de cette spécification est de définir les exigences et les fonctionnalités de l'interface client web pour l'authentification et l'identification des utilisateurs sur la plateforme 4NK Web5 Solution.
|
|
|
|
Tous les relais ont les mêmes pages, et partagent le SDK en Wasm de 4NK, leur liste d'`ItemPeer` et leur liste `ItemProcess`.
|
|
|
|
## 3. <a name='Porte'></a>Portée
|
|
|
|
La portée de cette spécification comprend les exigences et les fonctionnalités suivantes pour l'interface client web.
|
|
|
|
Wireframes :
|
|
|
|
|
|
|
|
## 4. <a name='Documentsderfrence'></a>Documents de référence
|
|
|
|
Voir [_Doc_references.md](_Doc_references.md).
|
|
|
|
## 5. <a name='InterfaceClientWeb'></a>Interface Client Web
|
|
|
|
### 5.1. <a name='StructureHTMLdeBase'></a>Structure HTML de Base
|
|
|
|
Pour créer une application client web interactive qui communique efficacement avec les relais, une structure de base HTML est nécessaire. Voici les éléments clés à inclure dans votre fichier HTML pour démarrer avec l'application 4NK :
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="author" content="4NK">
|
|
<meta name="description" content="4NK Web5 Platform">
|
|
<meta name="keywords" content="4NK, web5, bitcoin, blockchain, decentralize, dapps, relay, contract">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="style/4nk.css">
|
|
<title>4NK Application</title>
|
|
<script type="module">
|
|
import init, { start_relay_interaction } from './pkg/relay_interaction.js';
|
|
|
|
async function run() {
|
|
await init();
|
|
start_relay_interaction();
|
|
}
|
|
|
|
run();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="containerId" class="container">
|
|
<!-- Contenu de l'application 4NK Web5 Solution -->
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Cadre HML commun aux pages des relais :
|
|
|
|
* **Doctype HTML** : Déclare que le document est de type HTML5.
|
|
* **Langue** : Définit la langue principale du contenu comme étant l'anglais (lang="en").
|
|
* **Méta Éléments** : Fournissent des informations sur la page web, notamment le type d'encodage (charset="UTF-8"), l'auteur (author="4NK"), la description (description="4NK Web5 Platform"), les mots-clés (keywords="4NK, web5, bitcoin, blockchain, decentralize, dapps, relay, contract"), et la compatibilité avec les différents appareils (viewport="width=device-width, initial-scale=1.0").
|
|
* **Lien CSS** : Référence une feuille de style externe pour styliser l'application (href="style/4nk.css").
|
|
* **Titre** : Le titre de la page affiché dans l'onglet du navigateur (title="4NK Application").
|
|
* **Conteneur Principal** : Un div conteneur avec un identifiant unique (id="containerId") sert de point d'ancrage pour l'injection de contenu dynamique ou d'interfaces utilisateur spécifiques à l'application.
|
|
* **Intégration des composants WASM dans l'interface utilisateur**: Un module permet d'intégrer un wrapper js avec le Wasm pour une interaction fluide avec les relais via le WebAssembly.
|
|
|
|
### 5.2. <a name='Pagedecrationduneidentitnumriquecreate'></a>Page de création d'une identité numérique (create)
|
|
|
|
#### 5.2.1. <a name='PagedeslectiondelItemProcessetdesmembresenchargederenvoyerlesshardsdelaclrecover'></a>Page de sélection de l'`ItemProcess` et des membres en charge de renvoyer les shards de la clé `recover`
|
|
|
|
#### 5.2.2. <a name='PagedenrolementdansunItemProcessonboarding'></a>Page d'enrolement dans un `ItemProcess` (`onboarding`)
|
|
|
|
#### 5.2.3. <a name='Pagedetlchargementdesimagesdelogindesthirdparties'></a>Page de téléchargement des images de login des third parties
|
|
|
|
### 5.3. <a name='Pagedercuprationduneidentitnumriquerecover'></a>Page de récupération d'une identité numérique (`recover`)
|
|
|
|
### 5.4. <a name='Pagedervocationduneidentitnumriquerevoke'></a>Page de révocation d'une identité numérique (`revoke`)
|
|
|
|
### 5.5. <a name='PagedelalistedesItemProcess'></a>Page de la liste des `ItemProcess`
|
|
|
|
### 5.6. <a name='PagedeDtaildunItemProcess'></a>Page de Détail d'un `ItemProcess`
|
|
|
|
### 5.7. <a name='PagesocledesItemProcess'></a>Page socle des `ItemProcess`
|
|
|
|
#### 5.7.1. <a name='PagedelalisteduntypedItem'></a>4.7. Page de la liste d'un type d'`Item`
|
|
|
|
#### 5.7.2. <a name='PagededtaildunItem'></a>4.7. Page de détail d'un `Item`
|
|
|
|
#### 5.7.3. <a name='Pagedelalistedesnotifications'></a>4.7. Page de la liste des notifications
|
|
|
|
#### 5.7.4. <a name='Pagededtaildunenotifications'></a>4.7. Page de détail d'une notifications
|
|
|
|
### 5.8. <a name='Pagedimportduneimagedelogin'></a>Page d'import d'une image de login
|
|
|
|
### 5.9. <a name='Pagedevalidationduncodedeconfirmation2FA'></a>Page de validation d'un code de confirmation (2FA)
|
|
|
|
## 6. <a name='5.SDKTypescript'></a> 5. SDK Typescript
|
|
|
|
## 7. <a name='5.SDKWebAssembly'></a> 5. SDK Web Assembly
|
|
|
|
## 8. <a name='5.Serveurweb'></a> 5. Serveur web
|