How to Scan Fingerprints with Async PHP and React Native

We live in interesting times. A short while ago, a company called OfferZen announced a new, programmable credit card. It's been a long time since I was this excited to get my hands on a piece of tech. My mind has been brimming with ideas ever since.

So, I decided to write about one of them!

I'm going to describe the process of building custom multi-factor authentication for all transactions. I don't want to do the usual (and boring on its own) SMS or push notification one-time-password stuff. I want to build a fingerprint scanner right into my phone.

In this tutorial, we're going to look at how to set up a simple iOS app using React Native. We will also set up an asynchronous HTTP server, with a web socket connection to the app.

We will follow this up by adding fingerprint scanning capabilities to the app, and asking for these fingerprint scans from the HTTP server. Then we will build an endpoint through which GET requests can request a fingerprint scan and wait for one to occur.

There's a lot to cover, so I've chosen to leave the programming of the credit card for another tutorial. This tutorial will be useful on its own, but even better alongside the next one!

You can find the code for this tutorial here and here. I've tested it with PHP 7.1 and the latest version of Google Chrome.

What is React Native?

If you've been building websites for a while, then you've probably heard the name React. It's an interface builder library (among other things). It introduces many new and interesting ideas to the world of front-end development. One of them is that interfaces are easier to build when you think of them one discrete component at a time. Kind of like how one "eats an elephant one bite at a time".

React Native takes these ideas one step further, by providing a build chain to compile front-end technologies (like HTML, Javascript, and CSS) to native iOS and Android applications.

Yes, you can build an Android version of this tutorial's examples. Unfortunately, I only have time to focus on iOS, and you'll probably have to source the Android-specific third-party libraries (for fingerprint scanning, specifically) yourself.

With React Native, it's possible to write code very similar to what you'd find in a web project, and have it work flawlessly for most smartphone users. So why are we talking about it in the PHP channel? As you'll see, this platform is so accommodating that a modest amount of Javascript knowledge is enough to build something useful. We don't need to know Java or Objective-C or Swift!

Getting Started with React Native

I'm not going to explain the steps to install React Native on every platform. There are already excellent docs for how to do this. For the purposes of this exercise, you'll need to install XCode, NodeJS, and the react-native command-line tool.

If you have the time and/or desire to get the Android emulator going, the same docs will suffice.

The docs include steps to create a new project, and run it in the simulator. There's no point continuing beyond this point if you can't get the new application to run. If that's the case, talk to me on Twitter or in the comments.

Installing TouchID

It's tempting to think that React Native only installs a generalized Javascript API to use, but that's not the case. One of its best features (in my opinion) is the powerful native module support.

In the case of fingerprint scanning, there is no native Javascript API. But there are a plethora of native modules which provide one. I googled "react native ios fingerprint" and the first match appears to work wonderfully:

yarn add react-native-touch-id
react-native link

You'll need to quit the simulator and re-run react-native run-ios before the new app will have access to the native module.

The default index.ios.js file is a bit messy, but it is mostly sufficient to try TouchID. After a bit of tidying, it should look similar to this:

import React, { Component } from "react";
import { AppRegistry } from "react-native"
import TouchID  from "react-native-touch-id"

class Fingerprints extends Component {
  componentDidMount() {
    TouchID.authenticate("Trying TouchID")
      .then(success => {
        alert("Success")
      })
      .catch(error => {
        alert("Failure")
      })
  }

  render() {
    return null
  }
}

AppRegistry.registerComponent("Fingerprints", () => Fingerprints)

This is from index.ios.js, in the app project

If you're unsure about the general structure of this, it's probably a good time to brush up on React development. There are plenty of great courses on the subject, ours included.

Continue reading %How to Scan Fingerprints with Async PHP and React Native%

by Christopher Pitt via SitePoint