sdk_common/doc/RelayPages.md

7.2 KiB

Relay - Specifications

1. Autheurs, validations, dates, versions, changement and historique

Cf. Git SDK COMMON

2. Table des matières

3. 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'Peer et leur liste Process.

4. Portée

La portée de cette spécification comprend les exigences et les fonctionnalités suivantes pour l'interface client web.

Wireframes :

Wireframes

5. Documents de référence

Voir _Doc_references.md.

6. Interface Client Web

6.1. 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 :

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

Règles sur l'affichage des pages

6.2. Page de création d'une identité numérique (create)

6.2.1. Page de sélection de Process et des membres en charge de renvoyer les shards de la clé recover

6.2.2. Page d'enrolement dans un Process (onboarding)

6.2.3. Page de téléchargement des images de login des third parties

6.3. Page de récupération d'une identité numérique (recover)

6.4. Page de révocation d'une identité numérique (revoke)

6.5. Page de la liste des Process

6.6. Page de Détail d'un Process

6.7. Page socle des Process

6.7.1. 4.7. Page de la liste d'un type d'Item

6.7.2. 4.7. Page de détail d'un Item

6.7.3. 4.7. Page de la liste des notifications

6.7.4. 4.7. Page de détail d'une notifications

6.8. Page d'import d'une image de login

6.9. Page de validation d'un code de confirmation (2FA)

7. 5. SDK Typescript

8. 5. SDK Web Assembly

9. 5. Serveur web