feat: add biometrics auth

Phecda
Commit c290a4ee1af35b67d027644cd2527084115f2082 c290a4ee 1 parent 36b8a151
Showing 8 changed files with 49 additions and 3 deletions
android/app/src/main/AndroidManifest.xml
android/build.gradle
ios/NGPlay/Info.plist
ios/Podfile.lock
ios/zh-Hans.lproj/InfoPlist.strings
package.json
src/screen/Login.tsx
yarn.lock
--- a/android/app/src/main/AndroidManifest.xml
View file @c290a4e
+++ b/android/app/src/main/AndroidManifest.xml
View file @c290a4e
@@ -27,6 +27,7 @@
   <!--  <uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" />-->
   <!--  <uses-permission android:name="android.permission.RECORD_AUDIO" />-->
   <!--  <uses-permission android:name="android.permission.SEND_SMS" />-->
+  <uses-permission android:name="android.permission.USE_BIOMETRIC" />
   <!--  <uses-permission android:name="android.permission.USE_SIP" />-->
   <!--  <uses-permission android:name="android.permission.WRITE_CALENDAR" />-->
   <!--  <uses-permission android:name="android.permission.WRITE_CALL_LOG" />-->
--- a/android/build.gradle
View file @c290a4e
+++ b/android/build.gradle
View file @c290a4e
@@ -2,10 +2,10 @@
 buildscript {
     ext {
-        buildToolsVersion = "28.0.3"
+        buildToolsVersion = "29.0.2"
         minSdkVersion = 16
-        compileSdkVersion = 28
+        compileSdkVersion = 29
-        targetSdkVersion = 28
+        targetSdkVersion = 29
     }
     repositories {
         google()
--- a/ios/NGPlay/Info.plist
View file @c290a4e
+++ b/ios/NGPlay/Info.plist
View file @c290a4e
@@ -52,6 +52,8 @@
 	</dict>
 	<key>NSCameraUsageDescription</key>
 	<string>Use your camera to take a photo or scan codes</string>
+	<key>NSFaceIDUsageDescription</key>
+	<string>Allow you a quick and secure access</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string>Use your location to check security</string>
 	<key>NSPhotoLibraryAddUsageDescription</key>
--- a/ios/Podfile.lock
View file @c290a4e
+++ b/ios/Podfile.lock
View file @c290a4e
@@ -249,6 +249,8 @@ PODS:
     - React
   - react-native-code (1.0.0-1):
     - React
+  - react-native-fingerprint-scanner (4.0.0):
+    - React
   - react-native-netinfo (5.7.1):
     - React
   - react-native-safe-area-context (0.7.3):
@@ -381,6 +383,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-camera (from `../node_modules/react-native-camera`)
   - "react-native-code (from `../node_modules/@phecdas/react-native-code`)"
+  - react-native-fingerprint-scanner (from `../node_modules/react-native-fingerprint-scanner`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-webview (from `../node_modules/react-native-webview`)
@@ -466,6 +469,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-camera"
   react-native-code:
     :path: "../node_modules/@phecdas/react-native-code"
+  react-native-fingerprint-scanner:
+    :path: "../node_modules/react-native-fingerprint-scanner"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
   react-native-safe-area-context:
@@ -554,6 +559,7 @@ SPEC CHECKSUMS:
   React-jsinspector: f74a62727e5604119abd4a1eda52c0a12144bcd5
   react-native-camera: 1b52abea404d04e040edb3e74b7c5523c01a3089
   react-native-code: 8e0e693b36c1d928a9d00f8e90feb443c3e8aa15
+  react-native-fingerprint-scanner: 03f3d966edacf2f515e361595b6778d3502db4fb
   react-native-netinfo: 4fa023c153d582aeae8435df95c9a975c5986449
   react-native-safe-area-context: e200d4433aba6b7e60b52da5f37af11f7a0b0392
   react-native-webview: 0633fd7861a9bd7a80bacaee7da763c3afc248fa
--- a/ios/zh-Hans.lproj/InfoPlist.strings
View file @c290a4e
+++ b/ios/zh-Hans.lproj/InfoPlist.strings
View file @c290a4e
@@ -9,3 +9,4 @@
 "NSLocationWhenInUseUsageDescription" = "为保证安全，需要定位";
 "NSPhotoLibraryAddUsageDescription" = "向照片图库中添加照片";
 "NSPhotoLibraryUsageDescription" = "诸如扫码、设置头像等功能需要从照片图库中读取图片";
+"NSFaceIDUsageDescription" = "快速安全地支付";
--- a/package.json
View file @c290a4e
+++ b/package.json
View file @c290a4e
@@ -31,6 +31,7 @@
     "react-native-dark-mode": "^0.2.2",
     "react-native-device-info": "^5.5.4",
     "react-native-elements": "^1.2.7",
+    "react-native-fingerprint-scanner": "https://github.com/Phecda/react-native-fingerprint-scanner#release",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-image-crop-picker": "^0.28.0",
     "react-native-localize": "^1.4.0",
--- a/src/screen/Login.tsx
View file @c290a4e
+++ b/src/screen/Login.tsx
View file @c290a4e
@@ -3,12 +3,17 @@ import { BGScroll, Card, ListItem, Divider } from '../component/View';
 import { useReduxDispatch, useReduxState } from '../store/hooks';
 import { rootActions } from '../store';
 import { Alert } from 'react-native';
+import BioAuth, {
+  Biometrics,
+  FingerprintScannerError,
+} from 'react-native-fingerprint-scanner';
 const LoginScreen = () => {
   const { list, current } = useReduxState('user');
   const dispatch = useReduxDispatch();
   const [userName, setUserName] = useState(current?.name);
+  const [biometricType, setBiometricType] = useState<Biometrics>();
   const onLogin = useCallback(() => {
     const newToken = userName ? 'yes!' + userName : 'no:(';
@@ -25,6 +30,23 @@ const LoginScreen = () => {
     dispatch(rootActions.userActions.setToken(newToken));
   }, [userName, dispatch, list]);
+  const authWithBio = useCallback(async () => {
+    try {
+      await BioAuth.authenticate({});
+      Alert.alert('Success');
+    } catch (err) {
+      const { message, name }: FingerprintScannerError = err;
+      Alert.alert(name, message);
+    }
+    BioAuth.release();
+  }, []);
+
+  React.useEffect(() => {
+    BioAuth.isSensorAvailable()
+      .then(setBiometricType)
+      .catch(() => {});
+  }, []);
+
   return (
     <BGScroll>
       <Card round>
@@ -37,6 +59,15 @@ const LoginScreen = () => {
         />
         <Divider />
         <ListItem title="login" onPress={onLogin} />
+        {!!biometricType && (
+          <>
+            <Divider />
+            <ListItem
+              title={`Auth with ${biometricType}`}
+              onPress={authWithBio}
+            />
+          </>
+        )}
       </Card>
     </BGScroll>
   );
--- a/yarn.lock
View file @c290a4e
+++ b/yarn.lock
View file @c290a4e
@@ -7109,6 +7109,10 @@ react-native-elements@^1.2.7:
     react-native-ratings "^6.3.0"
     react-native-status-bar-height "^2.2.0"
+"react-native-fingerprint-scanner@https://github.com/Phecda/react-native-fingerprint-scanner#release":
+  version "4.0.0"
+  resolved "https://github.com/Phecda/react-native-fingerprint-scanner#98e1b397ff45985e243dc13318433bfd9c323fbd"
+
 react-native-gesture-handler@^1.6.1:
   version "1.6.1"
   resolved "https://registry.npm.taobao.org/react-native-gesture-handler/download/react-native-gesture-handler-1.6.1.tgz#678e2dce250ed66e93af409759be22cd6375dd17"