facecog-liveness-showcase 0.0.1

package/projects/facecog-liveness-verification/src/lib/components/aws-face-liveness/aws-face-liveness.component.ts

@@ -0,0 +1,500 @@
+import {
+  Component,
+  ChangeDetectorRef,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  OnDestroy,
+  Output,
+  ViewChild,
+  AfterViewInit,
+  NgZone,
+  ViewEncapsulation
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { firstValueFrom } from 'rxjs';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { AwsFaceLivenessService } from '../../services/aws-face-liveness.service';
+import type { AwsFaceLivenessScanResult } from '../../interfaces/scan-results.interface';
+
+/**
+ * AwsFaceLivenessComponent
+ *
+ * Angular wrapper for AWS Amplify FaceLivenessDetector React component.
+ * Handles real-time face liveness detection using AWS Rekognition.
+ *
+ * Used by LivenessFlowComponent when AWS_FACE_LIVENESS_COMPONENT is provided (default from lib).
+ */
+@Component({
+  selector: 'facecog-aws-face-liveness',
+  standalone: true,
+  imports: [CommonModule, IonicModule],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="aws-face-liveness-container">
+      <div *ngIf="isLoading" class="loading-container">
+        <ion-spinner name="crescent" color="primary"></ion-spinner>
+        <p class="loading-text">{{ loadingMessage }}</p>
+      </div>
+
+      <div *ngIf="error && !isLoading" class="error-container">
+        <ion-icon name="alert-circle-outline" color="danger"></ion-icon>
+        <p class="error-text">{{ error }}</p>
+        <ion-button (click)="retry()" expand="block" color="primary">
+          Retry
+        </ion-button>
+      </div>
+
+      <div #reactContainer
+           class="react-container"
+           [style.display]="!isLoading && !error ? 'block' : 'none'">
+      </div>
+    </div>
+  `,
+  styles: [`
+    .aws-face-liveness-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 100%;
+      background: #1a1a2e;
+      position: relative;
+    }
+
+    .loading-container,
+    .error-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 20px;
+      text-align: center;
+    }
+
+    .loading-text,
+    .error-text {
+      color: #e0e0e0;
+      margin-top: 16px;
+      font-size: 16px;
+    }
+
+    .error-container ion-icon {
+      font-size: 64px;
+    }
+
+    .error-container ion-button {
+      margin-top: 20px;
+      max-width: 200px;
+    }
+
+    .react-container {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      min-height: 400px;
+    }
+
+    /* Amplify Liveness Detector overrides for Ionic modal context */
+    .face-liveness-container {
+      width: 100% !important;
+      height: 100% !important;
+      min-height: 400px;
+      overflow: auto !important;
+    }
+
+    [data-amplify-liveness-detector] {
+      width: 100% !important;
+      height: auto !important;
+      min-height: 400px;
+      overflow: visible !important;
+    }
+
+    [data-amplify-liveness-detector] > .amplify-flex {
+      width: 100% !important;
+      height: auto !important;
+      min-height: 400px;
+      flex-direction: column !important;
+      overflow: visible !important;
+    }
+
+    .amplify-liveness-oval-canvas {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .amplify-liveness-video-container,
+    .amplify-liveness-canvas-container,
+    [class*="VideoContainer"] {
+      width: 100% !important;
+      max-height: 70vh !important;
+    }
+
+    [class*="Instructions"],
+    [class*="Hint"] {
+      padding: 16px !important;
+      text-align: center !important;
+    }
+
+    .amplify-liveness-recording-icon-container {
+      position: fixed !important;
+      top: 20px !important;
+      right: 20px !important;
+      z-index: 10002 !important;
+    }
+
+    .amplify-view {
+      width: 100% !important;
+      height: auto !important;
+      overflow: visible !important;
+    }
+
+    /* Hide the cancel button — verification is mandatory */
+    .amplify-liveness-cancel-button,
+    button[class*="cancel" i],
+    button[class*="Cancel"],
+    [data-amplify-liveness-detector] button[class*="link"],
+    [data-amplify-liveness-detector] .amplify-button--link {
+      display: none !important;
+    }
+
+    /* Photosensitivity warning — high contrast styling */
+    [class*="PhotosensitiveWarning"],
+    [class*="photosensitive"],
+    [data-amplify-liveness-detector] [class*="Warning"] {
+      background: #2d1b4e !important;
+      border: 1px solid #7c4dff !important;
+      border-radius: 12px !important;
+      padding: 16px !important;
+      margin: 12px !important;
+    }
+
+    [class*="PhotosensitiveWarning"] *,
+    [class*="photosensitive"] *,
+    [data-amplify-liveness-detector] [class*="Warning"] * {
+      color: #e8d5ff !important;
+    }
+
+    [class*="PhotosensitiveWarning"] h2,
+    [class*="PhotosensitiveWarning"] [class*="heading"],
+    [class*="PhotosensitiveWarning"] [class*="Heading"] {
+      color: #fff !important;
+      font-weight: 700 !important;
+    }
+
+    /* Start video check button — prominent styling */
+    .amplify-button--primary,
+    [data-amplify-liveness-detector] button[class*="primary"] {
+      background: linear-gradient(135deg, #00b4d8, #0077b6) !important;
+      color: #fff !important;
+      font-weight: 600 !important;
+      font-size: 16px !important;
+      padding: 14px 28px !important;
+      border-radius: 12px !important;
+      border: none !important;
+      box-shadow: 0 4px 15px rgba(0, 119, 182, 0.4) !important;
+      text-transform: none !important;
+      letter-spacing: 0.3px !important;
+    }
+
+    .amplify-button--primary:hover,
+    [data-amplify-liveness-detector] button[class*="primary"]:hover {
+      background: linear-gradient(135deg, #0096c7, #005f8a) !important;
+      box-shadow: 0 6px 20px rgba(0, 119, 182, 0.5) !important;
+    }
+  `]
+})
+export class AwsFaceLivenessComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('reactContainer', { static: false }) reactContainer!: ElementRef<HTMLDivElement>;
+
+  @Input() region: string = 'us-east-1';
+  @Input() autoStart: boolean = true;
+  @Input() showCancelButton: boolean = true;
+
+  @Input() accessKeyId?: string;
+  @Input() secretAccessKey?: string;
+  @Input() sessionToken?: string;
+
+  @Input() identityPoolId?: string;
+  @Input() userPoolId?: string;
+  @Input() userPoolClientId?: string;
+
+  @Output() scanComplete = new EventEmitter<AwsFaceLivenessScanResult>();
+  @Output() scanCancelled = new EventEmitter<void>();
+
+  isLoading = true;
+  loadingMessage = 'Initializing AWS Face Liveness...';
+  error: string | null = null;
+
+  private sessionId: string = '';
+  private reactRoot: any = null;
+  private awsCredentials: { accessKeyId: string; secretAccessKey: string; region: string } | null = null;
+  private injectedStyleIds: string[] = [];
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+    private awsFaceLivenessService: AwsFaceLivenessService
+  ) {}
+
+  ngOnInit(): void {
+    console.log('[AWS Face Liveness] ngOnInit - autoStart:', this.autoStart, 'region:', this.region);
+    this.injectAmplifyStyles();
+  }
+
+  ngAfterViewInit(): void {
+    console.log('[AWS Face Liveness] ngAfterViewInit - autoStart:', this.autoStart, 'reactContainer:', !!this.reactContainer);
+    if (this.autoStart) {
+      setTimeout(() => {
+        console.log('[AWS Face Liveness] Starting liveness check after delay');
+        this.startLivenessCheck();
+      }, 500);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.cleanup();
+  }
+
+  async startLivenessCheck(): Promise<void> {
+    console.log('[AWS Face Liveness] startLivenessCheck called');
+    try {
+      this.isLoading = true;
+      this.error = null;
+      this.cdr.detectChanges();
+
+      if (!this.accessKeyId || !this.secretAccessKey) {
+        this.loadingMessage = 'Fetching AWS credentials...';
+        this.cdr.detectChanges();
+        console.log('[AWS Face Liveness] Fetching credentials...');
+        const credentialsResponse = await this.awsFaceLivenessService.getCredentialsAsync();
+        console.log('[AWS Face Liveness] Credentials response:', credentialsResponse?.success);
+
+        if (!credentialsResponse.success) {
+          throw new Error(credentialsResponse.error || 'Failed to get AWS credentials');
+        }
+
+        this.awsCredentials = credentialsResponse.credentials;
+        this.region = this.awsCredentials.region;
+      }
+
+      this.loadingMessage = 'Creating liveness session...';
+      this.cdr.detectChanges();
+      console.log('[AWS Face Liveness] Creating session...');
+      const sessionResponse = await firstValueFrom(this.awsFaceLivenessService.createSession());
+      console.log('[AWS Face Liveness] Session response:', sessionResponse?.success, sessionResponse?.sessionId);
+
+      if (!sessionResponse || !sessionResponse.success) {
+        throw new Error(sessionResponse?.error || 'Failed to create liveness session');
+      }
+
+      this.sessionId = sessionResponse.sessionId;
+
+      this.loadingMessage = 'Starting camera...';
+      this.cdr.detectChanges();
+      console.log('[AWS Face Liveness] Rendering React component...');
+      await this.renderReactComponent();
+
+      this.isLoading = false;
+      this.cdr.detectChanges();
+      console.log('[AWS Face Liveness] React component rendered, loading complete');
+
+    } catch (error: any) {
+      console.error('[AWS Face Liveness] Error starting liveness check:', error);
+      this.error = error.message || 'Failed to start liveness check';
+      this.isLoading = false;
+      this.cdr.detectChanges();
+    }
+  }
+
+  private async renderReactComponent(): Promise<void> {
+    if (!this.reactContainer?.nativeElement) {
+      throw new Error('React container not found');
+    }
+
+    const mod = await import('./FaceLivenessReactWrapper');
+    const FaceLivenessReactWrapper = mod?.default;
+    if (!FaceLivenessReactWrapper) {
+      this.error = 'AWS Face Liveness wrapper failed to load.';
+      this.isLoading = false;
+      this.cdr.detectChanges();
+      return;
+    }
+
+    this.reactRoot = ReactDOM.createRoot(this.reactContainer.nativeElement);
+
+    const accessKey = this.accessKeyId || this.awsCredentials?.accessKeyId;
+    const secretKey = this.secretAccessKey || this.awsCredentials?.secretAccessKey;
+
+    this.reactRoot.render(
+      React.createElement(FaceLivenessReactWrapper, {
+        sessionId: this.sessionId,
+        region: this.region,
+        accessKeyId: accessKey,
+        secretAccessKey: secretKey,
+        sessionToken: this.sessionToken,
+        identityPoolId: this.identityPoolId,
+        userPoolId: this.userPoolId,
+        userPoolClientId: this.userPoolClientId,
+        enableVideoRecording: true,
+        onAnalysisComplete: (result: any) => {
+          this.ngZone.run(() => {
+            this.onAnalysisComplete(result);
+          });
+        },
+        onError: (error: Error) => {
+          this.ngZone.run(() => {
+            this.onError(error);
+          });
+        },
+        onUserCancel: () => {
+          this.cancel();
+        }
+      })
+    );
+  }
+
+  private async onAnalysisComplete(result: any): Promise<void> {
+    try {
+      this.isLoading = true;
+      this.loadingMessage = 'Verifying results...';
+      this.cdr.detectChanges();
+
+      const resultsResponse = await firstValueFrom(this.awsFaceLivenessService.getSessionResults(this.sessionId));
+
+      if (!resultsResponse) {
+        throw new Error('Failed to get liveness results');
+      }
+
+      this.scanComplete.emit({
+        success: resultsResponse.success && resultsResponse.isLive,
+        isLive: resultsResponse.isLive,
+        confidence: resultsResponse.confidence,
+        confidencePercent: resultsResponse.confidencePercent,
+        sessionId: this.sessionId,
+        metadata: resultsResponse.metadata,
+        error: resultsResponse.error,
+        videoBlob: result?.videoBlob,
+        startVideoCheckClickedAt: result?.startVideoCheckClickedAt,
+        recordingStartedAt: result?.recordingStartedAt,
+      });
+
+    } catch (error: any) {
+      this.scanComplete.emit({
+        success: false,
+        isLive: false,
+        confidence: 0,
+        confidencePercent: 0,
+        sessionId: this.sessionId,
+        error: error.message || 'Failed to get liveness results'
+      });
+    } finally {
+      this.isLoading = false;
+      this.cleanup();
+      this.cdr.detectChanges();
+    }
+  }
+
+  private onError(error: Error): void {
+    const errorMsg = error.message || 'Face liveness detection failed';
+    console.error('[AWS Face Liveness] onError:', errorMsg);
+    this.error = errorMsg;
+    this.isLoading = false;
+    this.cdr.detectChanges();
+
+    this.scanComplete.emit({
+      success: false,
+      isLive: false,
+      confidence: 0,
+      confidencePercent: 0,
+      sessionId: this.sessionId,
+      error: `Camera or liveness check failed: ${errorMsg}. Please check:\n• Camera is enabled in System Settings\n• Browser has camera permission\n• No other app is using the camera\n• Try using Chrome or Edge`,
+    });
+  }
+
+  retry(): void {
+    this.cleanup();
+    this.startLivenessCheck();
+  }
+
+  cancel(): void {
+    this.cleanup();
+    this.scanCancelled.emit();
+  }
+
+  private injectAmplifyStyles(): void {
+    const id = 'amplify-liveness-critical-styles';
+    if (document.getElementById(id)) return;
+
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = `
+      /* Amplify Liveness theme variables */
+      [data-amplify-theme] {
+        --amplify-colors-background-primary: #fff;
+        --amplify-colors-background-secondary: #f5f5f5;
+        --amplify-colors-font-primary: #0d1926;
+        --amplify-colors-font-secondary: #304050;
+        --amplify-colors-brand-primary-10: #e8f0fe;
+        --amplify-colors-brand-primary-80: #047d95;
+        --amplify-colors-brand-primary-90: #036170;
+        --amplify-colors-brand-primary-100: #01424d;
+        --amplify-colors-border-primary: #c5c5c5;
+        --amplify-space-xs: 0.25rem;
+        --amplify-space-small: 0.5rem;
+        --amplify-space-medium: 1rem;
+        --amplify-space-large: 1.5rem;
+        --amplify-radii-small: 4px;
+        --amplify-radii-medium: 8px;
+        --amplify-font-sizes-small: 0.875rem;
+        --amplify-font-sizes-medium: 1rem;
+        --amplify-font-sizes-large: 1.25rem;
+      }
+
+      /* Ensure the liveness detector fills its container */
+      .liveness-detector { position: relative; width: 100%; height: 100%; }
+      .liveness-detector video { width: 100% !important; height: 100% !important; object-fit: cover; }
+
+      /* Amplify Liveness oval and canvas overlay */
+      .liveness-detector canvas {
+        position: absolute !important;
+        top: 0; left: 0;
+        width: 100% !important;
+        height: 100% !important;
+        z-index: 2;
+      }
+
+      /* Hint text styling */
+      [data-amplify-liveness-hint] {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10;
+        background: rgba(0,0,0,0.7);
+        color: #fff;
+        padding: 8px 16px;
+        border-radius: 8px;
+        font-size: 16px;
+        text-align: center;
+      }
+    `;
+    document.head.appendChild(style);
+    this.injectedStyleIds.push(id);
+    console.log('[AWS Face Liveness] Injected critical liveness styles');
+  }
+
+  private cleanup(): void {
+    if (this.reactRoot) {
+      try {
+        this.reactRoot.unmount();
+      } catch (e) {
+        // ignore
+      }
+      this.reactRoot = null;
+    }
+  }
+}

package/projects/facecog-liveness-verification/src/lib/components/camera-permission/camera-permission.component.html

@@ -0,0 +1,41 @@
+<div class="camera-permission-wrapper">
+  <div class="permission-container">
+    <div class="content-wrapper">
+      <div class="icon-container">
+        <ion-icon name="camera" class="camera-icon"></ion-icon>
+      </div>
+
+      <ion-text class="permission-text">
+        <h2>Camera Access Required</h2>
+        <p>We need access to your camera to verify your identity through liveness detection.</p>
+
+        <div class="tips-container" *ngIf="poseSpecificMode">
+          <div class="tip-item blocking-notice">
+            <ion-icon name="lock-closed-outline"></ion-icon>
+            <span>This verification is required to continue using the app.</span>
+          </div>
+          <div class="tip-item">
+            <ion-icon name="sunny-outline"></ion-icon>
+            <span>Make sure you are in a well-lit environment for best results.</span>
+          </div>
+          <div class="tip-item">
+            <ion-icon name="person-outline"></ion-icon>
+            <span>Position your face clearly in the center of the camera.</span>
+          </div>
+        </div>
+
+        <p *ngIf="!poseSpecificMode">Your privacy is important to us. The camera feed will only be used for verification and will not be stored.</p>
+      </ion-text>
+
+      <div class="button-container">
+        <ion-button expand="block" (click)="requestPermission()">
+          Grant Access
+        </ion-button>
+
+        <button class="cancel-link" *ngIf="!hideCancel" (click)="onLater()">
+          Later
+        </button>
+      </div>
+    </div>
+  </div>
+</div>