Building a React-Powered Fingerprint Scanner UI with Our Self-Service Kiosk SDK

Self-service kiosks are popping up everywhere, from airports and banks to retail stores. When it comes to secure interactions in these environments, biometric authentication, like fingerprint scanning, is a game-changer. Imagine walking up to a kiosk and verifying your identity with just a touch – smooth, right?

We've built a straightforward, JSON-based SDK to make integrating hardware like fingerprint scanners into your applications a breeze. Think of it as a translator between your software and the physical world. Today, we'll walk you through building a basic user interface with React that interacts with our fingerprint-scanning module. No need to delve into complex low-level stuff; we'll keep it focused on the practical steps.

So, what do you need to get started? First off, you'll need Node.js and npm (or yarn) installed on your machine. A basic understanding of React and JavaScript will definitely come in handy too. Crucially, you'll need to have our SDK's API accessible – for this tutorial, we'll assume it's running on http://localhost:9094/, just like in the documentation. And, if you're looking to test the real deal, having a fingerprint scanner connected to your system is a must!

Let's dive into the code. We'll begin by setting up a new React project. Open up your terminal and type:

1
2
npx create-react-app fingerprint-scanner-ui
cd fingerprint-scanner-ui

This will create a fresh React application for us. Think of it as our blank canvas.

Now, the first thing we probably want to do is check if the fingerprint scanner is actually awake and listening. Our SDK provides a handy endpoint for this: the FINGERPRINT STATUS - GET API. Let's see how we can hit this from our React app. Open up your src/App.js file and let's add some code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, { useState, useEffect } from 'react';

function App() {
  const [status, setStatus] = useState('Loading...');

  useEffect(() => {
    const checkStatus = async () => {
      try {
        const response = await fetch('http://localhost:9094/api/hardware/fingerprint-scanner/get-status');
        const data = await response.json();
        if (data.code === '0000') {
          setStatus('Fingerprint scanner is: ' + data.message);
        } else {
          setStatus('Error: ' + data.message);
        }
      } catch (error) {
        setStatus('Error connecting to API');
      }
    };

    checkStatus();
  }, []);

  return (
    <div>
      <h1>Fingerprint Scanner Status</h1>
      <p>{status}</p>
    </div>
  );
}

export default App;

Let's break this down. We're using React's useState to keep track of the scanner's status and useEffect to run the checkStatus function when the component loads. Inside checkStatus, we use the fetch API to make a GET request to the SDK's status endpoint. We then parse the JSON response. If the code is 0000, that's our signal that things are good, and we update the status message. Otherwise, we display an error. Pretty straightforward, right?

Next up, let's make it interactive! We want a button that, when clicked, triggers the fingerprint scan. Our SDK has a FINGERPRINT SCANNER - POST API for this. Let's modify our App.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React, { useState, useEffect } from 'react';

function App() {
  const [status, setStatus] = useState('Loading...');
  const [scanResult, setScanResult] = useState('');

  useEffect(() => {
    const checkStatus = async () => {
      // ... (same as before)
    };
    checkStatus();
  }, []);

  const handleScan = async () => {
    setScanResult('Scanning...');
    try {
      const response = await fetch('http://localhost:9094/api/hardware/fingerprint-scanner/scan', {
        method: 'POST',
      });
      const data = await response.json();
      if (data.code === '0000') {
        setScanResult('Scan Successful!');
        console.log('Fingerprint Data (ISO):', data.data.ISO);
      } else {
        setScanResult('Scan Failed: ' + data.message);
      }
    } catch (error) {
      setScanResult('Error during scan.');
    }
  };

  return (
    <div>
      <h1>Fingerprint Scanner</h1>
      <p>Status: {status}</p>
      <button onClick={handleScan} disabled={status !== 'Fingerprint scanner is: WORKING'}>
        Scan Fingerprint
      </button>
      {scanResult && <p>Scan Result: {scanResult}</p>}
    </div>
  );
}

export default App;

We've added a handleScan function. When this function is called (we'll connect it to a button soon), it makes a POST request to the /scan endpoint. Notice we don't need to send any data in the request body for this API. The SDK handles triggering the scan. Upon success, we update the scanResult state. And take note of data.data.ISO – this string contains the actual fingerprint data in a base64 format. You'd typically send this data to a backend system for verification.

Now, let's hook up the button. In our return statement, we've added a <button> element. We've wired up the onClick event to our handleScan function. We've also added a disabled attribute, so the button is only active when the scanner's status is "WORKING." Finally, we conditionally render the scanResult message to show the outcome of the scan.

So, what can you do with that data.data.ISO string? Well, that's the raw fingerprint data. For this tutorial, we're just logging it to the console, but in a real-world scenario, you'd likely send this to your backend for verification against stored fingerprint templates.

It's also crucial to provide good feedback to the user. Notice how we update the scanResult state to indicate whether the scan was successful, failed, or if there was an error. This helps the user understand what's happening.

This is just a starting point, of course. You could enhance this UI by adding visual cues during the scanning process, handling different error codes from the API more specifically, or even styling it to match your kiosk's design. You could also explore other hardware functionalities our SDK offers, like the document scanner or the SIM dispenser, using similar principles.

In conclusion, integrating hardware functionalities into your applications doesn't have to be a headache. With our straightforward, JSON-based SDK and the power of React, building interactive and secure kiosk interfaces is within reach. Hopefully, this walkthrough gives you a solid foundation to start building your own fingerprint scanning UI. Happy coding!