前言:
使用Touch ID也称为指纹身份验证在移动应用程序中非常流行。Touch ID功能可保护应用程序并使其成为用户的无缝身份验证流程。
许多银行应用程序，如美国银行，发现，大通，使用Touch ID身份验证，实现安全和无缝的身份验证。
用户无需在每次登录时键入长密码，只需允许他们使用Touch ID登录即可。
使用iPhone X，我们可以使用Face ID身份验证。Touch ID和Face ID身份验证都改善了用户与移动应用的互动，使其更加安全。
在这篇文章中，我们将使用流行的react-native-touch-id库集成Touch ID和Face ID身份验证。
安装
使用react-native-touch-id库安装相当简单。
如果您正在使用yarn运行以下命令：
yarn add react-native-touch-id
如果您是npm用户，请运行以下命令：
npm i --save react-native-touch-id
确保使用以下命令链接库：
react-native link react-native-touch-id
安装完成后，我们需要将应用程序权限添加到android和iOS文件中。
在AndroidManifest.xml中添加：
<uses-permission android：name =“android.permission.USE_FINGERPRINT”/>
在Info.plist中添加：
<key> NSFaceIDUsageDescription </ key> <string>启用Face ID可让您快速安全地访问您的帐户。</ string>
完成上述步骤后，您就可以开始在应用程序中使用react-native-touch-id库了。
用法
在下面的简单示例中，我们将创建一个组件FingerPrint.js。
用于验证用户Touch ID的函数是来自react-native-touch-id库的authenticate（reason，config）函数。
TouchID.authenticate（原因，配置）
此功能使用Touch ID或Face ID进行身份验证，并返回promise对象。reason是显示给用户的可选字符串。它可以提供有关需要身份验证的原因的信息。config是可选的对象，可以有更多的细节在对话框中显示。
import React, {Component} from 'react';import {AlertIOS,StyleSheet,Text,TouchableHighlight,View,NativeModules} from 'react-native';import TouchID from 'react-native-touch-id'class FingerPrint extends ponent {//config is optional to be passed in on Androidconst optionalConfigObject = {title: "Authentication Required", // Androidcolor: "#e00606", // Android,fallbackLabel: "Show Passcode" // iOS (if empty, then label is hidden)}pressHandler() {TouchID.authenticate('to demo this react-native component', optionalConfigObject).then(success => {AlertIOS.alert('Authenticated Successfully');}).catch(error => {AlertIOS.alert('Authentication Failed');});}render() {return (<View><TouchableHighlight onPress={this.pressHandler}><Text>Authenticate with Touch ID</Text></TouchableHighlight></View>);}};
在上面的示例中，您可以观察到pressHandler（）函数使用TouchID.authentication（）函数处理用户的Touch ID身份验证。如果由于某种原因验证失败，则返回错误代码。
所有生物识别身份验证错误代码都可以在 官方苹果文档 中找到
TouchID.isSupported()
此功能可让您知道是否支持生物识别身份验证。它解析为一串TouchID或FaceID。
下面的示例显示了isSupported（）函数的用法。
clickHandler(){TouchID.isSupported().then(biometryType => {// Success codeif (biometryType === 'FaceID') {console.log('FaceID is supported.');} else if (biometryType === 'TouchID') {console.log('TouchID is supported.');} else if (biometryType === true) {// Touch ID is supported on Android}}).catch(error => {// 如果用户的设备未启用touchID或faceID，则为失败代码console.log(error);});}
react-native-touch-id库支持使用Face ID for iPhone X设备。
isSupported（）函数返回设备支持和启用的生物统计类型。
如果设备不支持Touch ID或Face ID，那么我们将不得不回退使用密码或密码。
请注意，在调用authenticate（）函数之前，需要调用isSupported（）函数。这可确保在生物识别身份验证不可用时，我们不会使用此库进行身份验证。在这种情况下可以使用回退认证机制。
把它们放在一起
下面的代码显示了使用react-native-touch-id进行身份验证的已清理版本。请注意，我们将biometryType保存到组件的状态。我们需要确保向用户提供正确的消息，告知他们是否使用Touch ID或Face ID进行身份验证。
'use strict';import React, {Component} from 'react';import {AlertIOS,StyleSheet,Text,TouchableHighlight,View,} from 'react-native';import TouchID from "react-native-touch-id";export default class FingerPrint extends Component<{}> {constructor() {super()this.state = {biometryType: null};}componentDidMount() {TouchID.isSupported().then(biometryType => {this.setState({biometryType});})}render() {return (<View style={styles.container}><TouchableHighlightstyle={styles.btn}onPress={this.clickHandler}underlayColor="#0380BE"activeOpacity={1}><Text style={{color: '#fff',fontWeight: '600'}}>{`Authenticate with ${this.state.biometryType}`}</Text></TouchableHighlight></View>);}clickHandler() {TouchID.isSupported().then(authenticate).catch(error => {AlertIOS.alert('TouchID not supported');});}}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF'},btn: {borderRadius: 3,marginTop: 200,paddingTop: 15,paddingBottom: 15,paddingLeft: 15,paddingRight: 15,backgroundColor: '#0391D7'}});function authenticate() {return TouchID.authenticate().then(success => {AlertIOS.alert('Authenticated Successfully');}).catch(error => {console.log(error)AlertIOS.alert(error.message);});}
搞定！您现在已将生物识别身份验证集成到React Native应用程序中。
现在，当用户设备上没有Touch ID或Face ID时，您可以浏览应用的UI和不同后备选项。
请记住，当您在登录时存储用户密码和敏感信息时，您必须将它们存储在安全的钥匙串中。react-native-keychain库为React Native提供钥匙串访问，使您的应用程序安全。
