前言:

使用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 React.Component {//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提供钥匙串访问，使您的应用程序安全。

React Native集成Touch ID和Face ID相关推荐

React Native集成友盟推送
React Native集成友盟推送 android推送集成 1.导入SDK: (1)push文件夹位置: (2)将push文件夹直接复制粘贴到rn项目android目录下,目录结构如下: 2.添加修 ...
React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)
期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!! 在我们常用的App中经常会看到分享与第三方登录的功能,可以说分享与第三方 ...
将React Native 集成进现有OC项目中（过程记录）、jsCodeLocation 生成方式总结
将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目.又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native ...
React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
React Native 集成极光推送 jpush-react-native
转载:https://www.jianshu.com/p/a71512a8f921 概述 jpush-react-native 是极光推送官方开发的 React Native 版本插件,可以快速集成推 ...
React Native集成极光推送
推送作为手机应用的基本功能,是手机应用的重要部分,如果自己实现一套推送系统费时费力,所以大部分的应用都会选择使用第三方的推送服务,如极光推送.下面就以React Native项目集成jpush-rea ...
React Native集成极光消息推送
极光IOS消息推送证书一键生成地址:https://onesignal.com/provisionator 一.申请激光账号并创建应用:地址:https://www.jiguang.cn 二.IOS推 ...
React Native集成CodePush热更新
作为一款以JavaScript语音为基础跨平台开发框架,React Native本身已经具备了动态更新的能力,不过官方却没有提供一套标准的动态更新方案.因为一个标准的动态更新方案,除了需要客户端具备动 ...
android微信支付插件,React Native集成微信支付【Android】
wechat.jpg 本次博客主要讲解主要在RN中集成微信支付以及被我踩平的坑,需要一定的原生集成经验! 一. 导入微信SDK 用Android Studio打开RN项目中的android部分,在ap ...

React Native集成Touch ID和Face ID

前言:

安装

用法

TouchID.authenticate（原因，配置）

TouchID.isSupported()

把它们放在一起

React Native集成Touch ID和Face ID相关推荐

最新文章

热门文章