React Native集成Touch ID和Face ID

前言:

使用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 Android
    const optionalConfigObject = {
        title: "Authentication Required", // Android
        color: "#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 code
            if (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}>
                <TouchableHighlight
                    style={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提供钥匙串访问，使您的应用程序安全。