指纹使用 React-Native Expo

Question

我想知道是否有任何方法可以使用expo将用户指纹存储在数据库中。 我使用了 本地身份验证指纹，但它不起作用。

Answer 1

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';
import * as LocalAuthentication from 'expo-local-authentication';

const fingerPrintImage = require('../../assets/images/fingerPrint.png');

const LocalAuth=(props)=>{
    const [compatible, isCompatible] = useState(false);
    const [fingerPrints, setFingerPrints] = useState(false);


    useEffect(()=>{
        checkDeviceForHardware();
        checkForFingerprints();
     },[])
 
     const checkDeviceForHardware= async()=>{
         let compatible = await LocalAuthentication.hasHardwareAsync();
         isCompatible(compatible);
         console.log('compatible',compatible);
     }
 
     const checkForFingerprints = async () => {
         let fingerprints = await LocalAuthentication.isEnrolledAsync();
         setFingerPrints( fingerprints );
         console.log('fingerPrints', fingerprints)
       };
 
     const  scanFingerprint = async () => {
          await LocalAuthentication.authenticateAsync()
          .then(res=>{
              if(res.success===true){
                props.navigation.navigate('FLayout',{screen:'Home'})
              }})
     };

    return(
        <View style={ styles.fingerPrint }>
            <TouchableOpacity onPress={ ()=>scanFingerprint()}>
                {/* <Text allowFontScaling={ false }>SCAN</Text> */}
                <Image width={ Dimensions.get('window').width / 8 } style={ styles.fpImage } source={ fingerPrintImage } />
                <Text style={ styles.fpText } allowFontScaling={ false }>One-Touch Login</Text>
            </TouchableOpacity>
        </View>
    )
}

export default LocalAuth;

const styles = StyleSheet.create({
    fingerPrint: {
        alignItems: "center",
        marginTop: 25
    },
    fpImage: {
        alignSelf: "center",
        marginBottom: 8
    },
    fpText: {
        fontFamily: "pl",
        fontSize: 15,
        color: "#341931"
    }
});

Answer 2

这里是小吃，下面是简单的代码：

https://snack.expo.io/@adamjnav/biometrics-api

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Platform,
  Alert,
  Image,
} from 'react-native';
import Expo, { Constants } from 'expo';
import DropdownAlert from 'react-native-dropdownalert';

export default class App extends Component {
  state = {
    compatible: false,
  };

  componentDidMount() {
    this.checkDeviceForHardware();
  }

  checkDeviceForHardware = async () => {
    let compatible = await Expo.Fingerprint.hasHardwareAsync();
    this.setState({ compatible });
    if (!compatible) {
      this.showIncompatibleAlert();
    }
  };

  showIncompatibleAlert = () => {
    this.dropdown.alertWithType(
      'error',
      'Incompatible Device',
      'Current device does not have the necessary hardware to use this API.'
    );
  };

  checkForBiometrics = async () => {
    let biometricRecords = await Expo.Fingerprint.isEnrolledAsync();
    if (!biometricRecords) {
      this.dropdown.alertWithType(
        'warn',
        'No Biometrics Found',
        'Please ensure you have set up biometrics in your OS settings.'
      );
    } else {
      this.handleLoginPress();
    }
  };

  handleLoginPress = () => {
    if (Platform.OS === 'android') {
      this.showAndroidAlert();
    } else {
      this.scanBiometrics();
    }
  };

  showAndroidAlert = () => {
    Alert.alert('Fingerprint Scan', 'Place your finger over the touch sensor.');
    this.scanBiometrics();
  };

  scanBiometrics = async () => {
    let result = await Expo.Fingerprint.authenticateAsync('Biometric Scan.');
    if (result.success) {
      this.dropdown.alertWithType(
        'success',
        'You are you!',
        'Bio-Authentication succeeded.'
      );
    } else {
      this.dropdown.alertWithType(
        'error',
        'Uh oh!',
        'Bio-Authentication failed or canceled.'
      );
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.logo}
          source={require('./assets/expo.symbol.white.png')}
        />
        <TouchableOpacity
          onPress={
            this.state.compatible
              ? this.checkForBiometrics
              : this.showIncompatibleAlert
          }
          style={styles.button}>
          <Text style={styles.buttonText}>
            Bio Login
          </Text>
        </TouchableOpacity>
        <DropdownAlert
          ref={ref => (this.dropdown = ref)}
          closeInterval={5000}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#056ecf',
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 200,
    height: 60,
    backgroundColor: 'transparent',
    borderRadius: 5,
    borderWidth: 1.5,
    borderColor: '#fff',
  },
  buttonText: {
    fontSize: 30,
    color: '#fff',
    textShadowColor: 'rgba(0,0,0,0.30)',
    textShadowOffset: { width: 0, height: 1 },
    textShadowRadius: 2,
  },
  logo: {
    height: 128,
    width: 128,
  },
});

Answer 3

这是小吃，下面是简单的代码：
https://snack.expo.dev/@rafiullahkh/指纹示例

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Alert, Platform } from 'react-native';
import Expo, { Constants } from 'expo';
import * as LocalAuthentication from 'expo-local-authentication'

export default class App extends Component {
  
  state = {
    compatible: false,
    fingerprints: false,
    result: ''
  }
  
  componentDidMount() {
    this.checkDeviceForHardware();
    this.checkForFingerprints();
  }
  
  checkDeviceForHardware = async () => {
    let compatible = await LocalAuthentication.hasHardwareAsync();
    console.log(compatible);
    this.setState({compatible})
  }
  
  checkForFingerprints = async () => {
    let fingerprints = await LocalAuthentication.isEnrolledAsync();
    console.log(fingerprints);
    this.setState({fingerprints})
  }
  
  scanFingerprint = async () => {
   let result = await LocalAuthentication.authenticateAsync();
   console.log('Scan Result:', result)
  }
  
  showAndroidAlert = () => {
    Alert.alert(
      'Fingerprint Scan',
      'Place your finger over the touch sensor and press scan.',
      [
        {text: 'Scan', onPress: () => {
          this.scanFingerprint();
        }},
        {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
      ]
    )
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
        Compatible Device? {this.state.compatible === true ? 'True' : 'False' }
        </Text>
        <Text style={styles.text}>
        Fingerprings Saved? {this.state.fingerprints === true ? 'True' : 'False'}
        </Text>
        <TouchableOpacity onPress={Platform.OS === 'android' ? this.showAndroidAlert : this.scanFingerprint} style={styles.button}>
          <Text style={styles.buttonText}>
            SCAN
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    backgroundColor: '#ecf0f1',
  },
  text: {
    fontSize: 18,
    textAlign: 'center'
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 150,
    height: 60,
    backgroundColor: '#056ecf',
    borderRadius: 5
  },
  buttonText: {
    fontSize: 30,
    color: '#fff'   
  }
});