FEAT #14565 TIME 0:00 WIP signature with fortify

package.json

@@ -70,7 +70,8 @@
     "stylus-loader": "^3.0.2",
     "tslint": "~6.1.0",
     "typescript": "4.0.5",
-    "typescript-tools": "^0.3.1"
+    "typescript-tools": "^0.3.1",
+    "@peculiar/fortify-webcomponents": "0.15.1"
   },
   "repository": {}
 }

src/frontend/app/app.module.ts

@@ -2,7 +2,7 @@ import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
@@ -184,7 +184,8 @@ import { SortPipe } from './plugins/sorting.pipe';
     CookieService,
     LatinisePipe
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class AppModule { }
 

src/frontend/app/service/signature-method/signature-method-modal.component.html

 <ion-content>
     <div class="content">
-        <i *ngIf="status==='SUCCESS'" class="fas fa-check success"></i>
-        <i *ngIf="status==='WAITING'" class="fas fa-plug bounce"></i>
-        <i *ngIf="status==='ERROR'" class="fas fa-times danger"></i>
-        <ion-label *ngIf="status==='WAITING'" style="padding: 10px;">En attente d'identification ...</ion-label>
-        <ion-label *ngIf="status==='SUCCESS'" style="padding: 10px;">Identification réussie !</ion-label>
-        <ion-label *ngIf="status==='ERROR'" style="padding: 10px;">Identification échouée !</ion-label>
+<!--        <i *ngIf="status==='SUCCESS'" class="fas fa-check success"></i>-->
+<!--        <i *ngIf="status==='WAITING'" class="fas fa-plug bounce"></i>-->
+<!--        <i *ngIf="status==='ERROR'" class="fas fa-times danger"></i>-->
+<!--        <ion-label *ngIf="status==='WAITING'" style="padding: 10px;">En attente d'identification ...</ion-label>-->
+<!--        <ion-label *ngIf="status==='SUCCESS'" style="padding: 10px;">Identification réussie !</ion-label>-->
+<!--        <ion-label *ngIf="status==='ERROR'" style="padding: 10px;">Identification échouée !</ion-label>-->
+        <peculiar-fortify-certificates style="height: 100%" language="fr" [filters]="filters" (continue)="continueSignature($event)" (cancel)="cancelSign($event)"></peculiar-fortify-certificates>
     </div>
-</ion-content>
\ No newline at end of file
+</ion-content>

src/frontend/app/service/signature-method/signature-method-modal.component.ts

 import { Component, Input, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import {catchError, tap} from 'rxjs/operators';
+import {of} from 'rxjs';
+import {HttpClient} from '@angular/common/http';
+import {NotificationService} from '../notification.service';
 
 @Component({
     selector: 'signature-method-modal',
@@ -13,38 +17,102 @@ export class SignatureMethodModalComponent implements OnInit {
     nbTry = 10;
     interval: any;
 
+    filters: any = {
+        //   onlySmartcards: false,
+        expired: false,
+        //   subjectDNMatch: 'apple',
+        //   subjectDNMatch: new RegExp(/apple/),
+        //   issuerDNMatch: 'demo',
+        //   issuerDNMatch: new RegExp(/demo/),
+        //   keyUsage: ['digitalSignature'],
+        onlyWithPrivateKey: true
+    };
+
     constructor(
-        public modalController: ModalController
+        public modalController: ModalController,
+        public http: HttpClient,
+        public notificationService: NotificationService,
     ) { }
 
     ngOnInit(): void {
-        this.interval = setInterval(async () => {
-            console.log('attempt', this.attempt);
-            const res = await this.checkCertificate();
-            if (res) {
-                this.status = 'SUCCESS';
-                clearInterval(this.interval);
-                setTimeout(() => {
-                    this.modalController.dismiss(true);
-                }, 1000);
-            } else if (this.attempt === this.nbTry) {
-                this.status = 'ERROR';
-                clearInterval(this.interval);
-                setTimeout(() => {
-                    this.modalController.dismiss(false);
-                }, 1000);
-            }
-            this.attempt++;
-        }, 1000);
+        // this.interval = setInterval(async () => {
+        //     console.log('attempt', this.attempt);
+        //     const res = await this.checkCertificate();
+        //     if (res) {
+        //         this.status = 'SUCCESS';
+        //         clearInterval(this.interval);
+        //         setTimeout(() => {
+        //             this.modalController.dismiss(true);
+        //         }, 1000);
+        //     } else if (this.attempt === this.nbTry) {
+        //         this.status = 'ERROR';
+        //         clearInterval(this.interval);
+        //         setTimeout(() => {
+        //             this.modalController.dismiss(false);
+        //         }, 1000);
+        //     }
+        //     this.attempt++;
+        // }, 1000);
     }
 
     checkCertificate() {
-        return new Promise((resolve) => {
-            setTimeout(() => {
-                console.log('end request');
-                resolve(false);
-            }, 800);
-        });
+        // return new Promise((resolve) => {
+        //     setTimeout(() => {
+        //         console.log('end request');
+        //         resolve(false);
+        //     }, 800);
+        // });
     }
 
+    async continueSignature(certData: any) {
+        console.log(certData);
+
+        const provider = await certData.detail.server.getCrypto(certData.detail.providerId);
+
+        const cert = await provider.certStorage.getItem(certData.detail.certificateId);
+        const certPem = await provider.certStorage.exportCert('pem', cert);
+        const privateKey = await provider.keyStorage.getItem(certData.detail.privateKeyId);
+
+        console.log('cert = ');
+        console.log(cert);
+        console.log('certPem = ');
+        console.log(certPem);
+        console.log('privateKey = ');
+        console.log(privateKey);
+
+        this.http.post('../rest/testFortify?action=start', {certificate: certPem}).pipe(
+            tap(async (dataToSign: any) => {
+                const message = this.fromHex(dataToSign.dataToSign);
+                const alg = {
+                    name: privateKey.algorithm.name,
+                    hash: 'SHA-256',
+                };
+                const signature = await provider.subtle.sign(alg, privateKey, message);
+
+                return this.http.post('../rest/testFortify?action=complete', {signature: signature});
+            }),
+            tap(() => {
+                console.log('signature ok');
+                this.modalController.dismiss(true);
+            }),
+            catchError(err => {
+                this.notificationService.handleErrors(err);
+                return of(false);
+            })
+        ).subscribe();
+    }
+
+    cancelSign(data: any) {
+        console.log(data);
+        this.modalController.dismiss(false);
+    }
+
+    fromHex(hexString) {
+        const res = new Uint8Array(hexString.length / 2);
+        for (let i = 0; i < hexString.length; i = i + 2) {
+            const c = hexString.slice(i, i + 2);
+            res[i / 2] = parseInt(c, 16);
+        }
+        return res.buffer;
+    }
 }

src/frontend/core/index.html

@@ -23,8 +23,11 @@
     <link rel="icon" type="image/x-icon" href="frontend/core/favicon.ico">
     <link rel="apple-touch-icon" href="frontend/assets/apple-touch-icon.png">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+    <script type="module" src="https://unpkg.com/@peculiar/fortify-webcomponents@latest/dist/peculiar/peculiar.esm.js"></script>
+    <script nomodule src="https://unpkg.com/@peculiar/fortify-webcomponents@latest/dist/peculiar/peculiar.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@peculiar/fortify-webcomponents@latest/dist/peculiar/peculiar.css">
 </head>
 <body>
     <app-root></app-root>
 </body>
-</html>
\ No newline at end of file
+</html>