RN第三方组件之react-native-touch-id

        本人还是个在RN道路上跌跌撞撞的技术小白,写文章也是第一次,所以有啥不对的,也请各位大大手下留情~对了,RN的项目都是IOS方向的,所以分享的都是IOS方向上的使用心得。

        前不久的项目需求刚好需要指纹锁这个功能,找了好多文章才看到react-native-touch-id(调用TouchID认证)。

react-native-touch-id,是调用TouchID认证的第三方组件。个人感觉这个第三方组件IOS方向,其实就是把苹果的LocalAuthentication认证封装起来。

        使用的方法可以参考react-native-touch-id的文档说明,里面也有example可以看这个组件的用法。当然,这个example是需要npm install装好环境才能跑的,如果npm install不行再考虑yarn install吧。

        本文只是粗略的说明了安装与使用,具体代码可以参考github的example吧。这个第三方组件默认是使用Touch id验证用户,没有使用设备密码来验证用户,详情看第三部分的“额外说明”。

        还有就是,对指纹验证的界面不满意的小伙伴,个人觉得要去组件里改。android的小伙伴,找到node_modules文件夹里的react-native-touch-id文件夹,在android文件夹-->src-->res-->layout-->fingerprint_dialog.xml进行修改,而Authentication Required这个标题则在react-native-touch-id文件夹下TouchID.android.js里修改。原谅我看不懂IOS原生代码,所以无从下手。

PS:只有在真机上运行,才能指纹验证,在模拟器上只会提示不支持指纹验证。其次,要保证真机设置了指纹

一、安装

npm install --save react-native-touch-id

文档提到了安装好第三方组件之后,需要Linking the Library。个人比较喜欢手动去Link。


手动Link步骤:

1⃣️ 如图一,在你的项目里找到Libraries,右键点击Libraries------Add Files to “你的项目名”...


RN第三方组件之react-native-touch-id_第1张图片
图一

2⃣️ 如图二,找到你项目的位置,打开node_modules,找到react-native-touch-id里的TouchID.xcodeproj文件,最后点击ADD按钮。


RN第三方组件之react-native-touch-id_第2张图片
图二

3⃣️ 如图三,可以看到已经把TouchID.xcodeproj文件ADD好了,但libTouchID.a文件是报红的,这就需要第四步、第五步的操作。


RN第三方组件之react-native-touch-id_第3张图片
图三

4⃣️ 如图四,点击你的项目,会看到右侧的界面,TARGETS面板选中的是你的项目名,在General中找到Linked Frameworks and Libraries,点击“+”。


RN第三方组件之react-native-touch-id_第4张图片
图四

5⃣️ 如图五,在弹出的界面里搜索“libTouchID”,选中文件,点击ADD,到此Link就完成了。

RN第三方组件之react-native-touch-id_第5张图片
图五


二、使用

        看github文档说明中洋洋洒洒写了一堆话,其实最主要的也就只是下面的代码。具体使用后的效果可以查看github中的example的运行效果。

import TouchID from 'react-native-touch-id';  //引入

...

check=()=>{    //点击事件

TouchID.isSupported()    //判断设备是否支持TouchID验证

    .then(success => {

        TouchID.authenticate()  //判断TouchID验证是否成功

            .then(success => {

                //验证成功后进行的操作

            })

            .catch(error => {

                //验证失败后进行的操作

            });

    })

    .catch(error => {

        //设备不支持TouchID验证后进行的操作

    });

}

...

三、额外说明

在这个第三方组件里使用了LAPolicyDeviceOwnerAuthenticationWithBiometrics,也就是使用Touch id来验证设备所有者,所以你指纹识别错误之后是弹不出让你输密码的界面。

要想实现“使用Touch id或者设备密码来验证用户”,只要将LAPolicyDeviceOwnerAuthenticationWithBiometrics替换成LAPolicyDeviceOwnerAuthentication就可以了,如图六。

RN第三方组件之react-native-touch-id_第6张图片
图六

四、总结

        react-native-touch-id的填坑之旅基本也讲的差不多了,希望能够帮到有需要的小伙伴们

你可能感兴趣的:(RN第三方组件之react-native-touch-id)