143 lines
7.0 KiB
Markdown
143 lines
7.0 KiB
Markdown
# Relay - Specifications
|
|
|
|
## 1. <a name='Autheursvalidationsdatesversionschangementandhistorique'></a>Autheurs, validations, dates, versions, changement and historique
|
|
|
|
Cf. [Git SDK COMMON](https://git.4nk.com/4nk/sdk_common/doc)
|
|
|
|
## 2. <a name='Tabledesmatires'></a>Table des matières
|
|
|
|
<!-- vscode-markdown-toc -->
|
|
* 1. [Autheurs, validations, dates, versions, changement and historique](#Autheursvalidationsdatesversionschangementandhistorique)
|
|
* 2. [Table des matières](#Tabledesmatires)
|
|
* 3. [Objectif](#Objectif)
|
|
* 4. [Portée](#Porte)
|
|
* 5. [Documents de référence](#Documentsderfrence)
|
|
* 6. [Interface Client Web](#InterfaceClientWeb)
|
|
* 6.1. [Structure HTML de Base](#StructureHTMLdeBase)
|
|
* 6.2. [Page de création d'un `User` (create)](#PagedecrationdunUsercreate)
|
|
* 6.2.1. [Page de sélection de `Process` et des Members en charge de renvoyer les shards de la clé `recover`](#PagedeslectiondeProcessetdesMembersenchargederenvoyerlesshardsdelaclrecover)
|
|
* 6.2.2. [Page d'enrolement dans un `Process` (`onboarding`)](#PagedenrolementdansunProcessonboarding)
|
|
* 6.2.3. [Page de téléchargement des images de login des third parties](#Pagedetlchargementdesimagesdelogindesthirdparties)
|
|
* 6.3. [Page de récupération d'un `User` (`recover`)](#PagedercuprationdunUserrecover)
|
|
* 6.4. [Page de révocation d'un `User` (`revoke`)](#PagedervocationdunUserrevoke)
|
|
* 6.5. [Page de la liste des `Process`](#PagedelalistedesProcess)
|
|
* 6.6. [Page de Détail d'un `Process`](#PagedeDtaildunProcess)
|
|
* 6.7. [Page socle des `Process`](#PagesocledesProcess)
|
|
* 6.7.1. [4.7. Page de la liste d'un type d'`Item`](#PagedelalisteduntypedItem)
|
|
* 6.7.2. [4.7. Page de détail d'un `Item`](#PagededtaildunItem)
|
|
* 6.7.3. [4.7. Page de la liste des notifications](#Pagedelalistedesnotifications)
|
|
* 6.7.4. [4.7. Page de détail d'une notifications](#Pagededtaildunenotifications)
|
|
* 6.8. [Page d'import d'une image de login](#Pagedimportduneimagedelogin)
|
|
* 6.9. [Page de validation d'un code de confirmation (2FA)](#Pagedevalidationduncodedeconfirmation2FA)
|
|
* 7. [5. SDK Typescript](#5.SDKTypescript)
|
|
* 8. [5. SDK Web Assembly](#5.SDKWebAssembly)
|
|
* 9. [5. Serveur web](#5.Serveurweb)
|
|
|
|
<!-- vscode-markdown-toc-config
|
|
numbering=true
|
|
autoSave=true
|
|
/vscode-markdown-toc-config -->
|
|
<!-- /vscode-markdown-toc -->
|
|
|
|
## 3. <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 `User` 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'`Peer` et leur liste `Process`.
|
|
|
|
## 4. <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 :
|
|
|
|
|
|
|
|
## 5. <a name='Documentsderfrence'></a>Documents de référence
|
|
|
|
Voir [_Doc_references.md](_Doc_references.md).
|
|
|
|
## 6. <a name='InterfaceClientWeb'></a>Interface Client Web
|
|
|
|
### 6.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 `User` spécifiques à l'application.
|
|
* **Intégration des composants WASM dans l'interface `User`**: Un module permet d'intégrer un wrapper js avec le Wasm pour une interaction fluide avec les relais via le WebAssembly.
|
|
|
|
# Règles sur l'affichage des pages
|
|
|
|
### 6.2. <a name='PagedecrationdunUsercreate'></a>Page de création d'un `User` (create)
|
|
|
|
#### 6.2.1. <a name='PagedeslectiondeProcessetdesMembersenchargederenvoyerlesshardsdelaclrecover'></a>Page de sélection de `Process` et des Members en charge de renvoyer les shards de la clé `recover`
|
|
|
|
#### 6.2.2. <a name='PagedenrolementdansunProcessonboarding'></a>Page d'enrolement dans un `Process` (`onboarding`)
|
|
|
|
#### 6.2.3. <a name='Pagedetlchargementdesimagesdelogindesthirdparties'></a>Page de téléchargement des images de login des third parties
|
|
|
|
### 6.3. <a name='PagedercuprationdunUserrecover'></a>Page de récupération d'un `User` (`recover`)
|
|
|
|
### 6.4. <a name='PagedervocationdunUserrevoke'></a>Page de révocation d'un `User` (`revoke`)
|
|
|
|
### 6.5. <a name='PagedelalistedesProcess'></a>Page de la liste des `Process`
|
|
|
|
### 6.6. <a name='PagedeDtaildunProcess'></a>Page de Détail d'un `Process`
|
|
|
|
### 6.7. <a name='PagesocledesProcess'></a>Page socle des `Process`
|
|
|
|
#### 6.7.1. <a name='PagedelalisteduntypedItem'></a>4.7. Page de la liste d'un type d'`Item`
|
|
|
|
#### 6.7.2. <a name='PagededtaildunItem'></a>4.7. Page de détail d'un `Item`
|
|
|
|
#### 6.7.3. <a name='Pagedelalistedesnotifications'></a>4.7. Page de la liste des notifications
|
|
|
|
#### 6.7.4. <a name='Pagededtaildunenotifications'></a>4.7. Page de détail d'une notifications
|
|
|
|
### 6.8. <a name='Pagedimportduneimagedelogin'></a>Page d'import d'une image de login
|
|
|
|
### 6.9. <a name='Pagedevalidationduncodedeconfirmation2FA'></a>Page de validation d'un code de confirmation (2FA)
|
|
|
|
## 7. <a name='5.SDKTypescript'></a> 5. SDK Typescript
|
|
|
|
## 8. <a name='5.SDKWebAssembly'></a> 5. SDK Web Assembly
|
|
|
|
## 9. <a name='5.Serveurweb'></a> 5. Serveur web
|