如何使用Angular.js在浏览器中获取指纹设备数据

Hey there! Awesome that you're building an online attendance system with biometric fingerprint integration—let's walk through how to get this working in your Angular app, including whether WebUSB is the right fit.

Core Verdict: WebUSB is applicable, but with key prerequisites #

WebUSB is exactly the kind of API you need here—it lets web apps (like your Angular project) communicate directly with USB devices, as long as your fingerprint scanner meets a few criteria:

• It’s either a standard USB HID (Human Interface Device) (most fingerprint scanners fall into this category) or supports the WebUSB specification.
• If it uses a proprietary vendor protocol, you’ll either need the device manufacturer to provide WebUSB-compatible firmware, or you’ll have to reverse-engineer the communication protocol (which is more complex).

Step-by-Step Implementation in Angular #

Let’s break down how to integrate WebUSB into your app:

1. Request Device Permission (User-Triggered) #

Browsers enforce strict security rules—you can’t automatically access USB devices; the user has to initiate the request (e.g., clicking a button). Here’s how to implement this in an Angular component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-fingerprint-scanner',
  template: '<button (click)="requestFingerprintDevice()">Connect Fingerprint Scanner</button>'
})
export class FingerprintScannerComponent {
  private fingerprintDevice: USBDevice | null = null;

  async requestFingerprintDevice() {
    try {
      // Replace vendorId and productId with your device's values
      // Find these via Device Manager (Windows) or system_profiler SPUSBDataType (Mac)
      const device = await navigator.usb.requestDevice({
        filters: [{ vendorId: 0x1234, productId: 0x5678 }]
      });
      this.fingerprintDevice = device;
      await this.connectToDevice();
      alert('Device connected successfully!');
    } catch (error) {
      console.error('Failed to connect device:', error);
      alert('Could not connect to fingerprint scanner.');
    }
  }
}

2. Connect to the Device & Claim the Interface #

Once the user grants permission, you need to establish a connection and claim the device’s communication interface:

private async connectToDevice() {
  if (!this.fingerprintDevice) return;

  try {
    await this.fingerprintDevice.open();
    // Select the first configuration (most devices use index 1)
    await this.fingerprintDevice.selectConfiguration(1);
    // Claim the interface—replace 0 with your device's interface number
    await this.fingerprintDevice.claimInterface(0);
  } catch (error) {
    console.error('Connection failed:', error);
  }
}

3. Read Fingerprint Data #

This part depends entirely on your device’s communication protocol. You’ll need to send the right command to trigger a scan, then read the returned data. Here’s a generic example:

async scanFingerprint() {
  if (!this.fingerprintDevice) return;

  try {
    // Send a command to initiate a scan (replace with your device's specific command)
    await this.fingerprintDevice.transferOut(1, new Uint8Array([0x01, 0x02]));
    
    // Read the scanned data from the device's input endpoint
    const scanResult = await this.fingerprintDevice.transferIn(2, 64);
    const rawFingerprintData = new Uint8Array(scanResult.data.buffer);
    
    // Process the data (e.g., convert to a fingerprint template, send to backend for auth)
    await this.processFingerprintData(rawFingerprintData);
  } catch (error) {
    console.error('Scan failed:', error);
  }
}

private async processFingerprintData(data: Uint8Array) {
  // Parse the raw data according to your device's protocol
  // Then send the processed fingerprint template to your backend API for authentication
  // Example: this.authService.verifyFingerprint(data).subscribe(...);
}

Critical Considerations #

• Browser Compatibility: WebUSB only works in Chromium-based browsers (Chrome, Edge, Opera). Firefox and Safari don’t support it yet—you’ll need to plan for this if cross-browser support is required.
• HTTPS Requirement: WebUSB only works over HTTPS (localhost is exempt for development).
• Protocol Knowledge: You must have access to your fingerprint device’s communication docs. Without knowing the right commands to send and how to parse the returned data, you won’t get usable fingerprint data.
• Alternative for HID Devices: If your scanner is a standard USB HID, consider using the WebHID API instead—it’s tailored specifically for HID devices and might be easier to work with than WebUSB.

Backup Plan If WebUSB Isn’t Feasible #

If your device doesn’t support WebUSB, or you need broader browser compatibility:

• Build a lightweight Electron desktop app that runs locally, reads the fingerprint device, and communicates with your Angular app via WebSocket.
• Avoid legacy solutions like ActiveX plugins—they’re insecure and no longer supported by modern browsers.

内容的提问来源于stack exchange，提问作者Harshit Bhatt