Giap Hiep

I'm Giap Hiep

I'm a web developer, a gymer. I enjoy share something i know that help people's work!
Giap Hiep

Tích hợp Touch ID và Face ID trong React Native App

Việc thêm xác thực bằng Touch ID hoặc Face ID của người dùng trở nên dễ dàng hơn bao giờ hết đối với React Native.

Sử dụng Touch ID còn được gọi là xác thực vân tay phải nói là rất phổ biến trong các ứng dụng di động. Tính năng Touch ID giúp bảo mật cho ứng dụng và biến nó thành một luồng xác thực liền mạch cho người dùng.

Trên các iPhone thế hệ mới như iPhone X, iPhone 11... sẽ được hỗ trợ bảo mật nhận dạng khuôn mặt Face ID.

Trong bài viết này, chúng ta sẽ cùng tích hợp Touch ID và Face ID sử dụng thư viện react-native-touch-id nhé.

Cài đặt

Nếu bạn đang sử dụng yarn hãy chạy lệnh sau:

yarn add react-native-touch-id

Nếu bạn đang sử dụng npm hãy chạy lệnh sau:

npm i --save react-native-touch-id

Nếu bạn sử dụng phiên bản React Native < 0.60 hãy đảm bảo là đã liên kết thư viện nhé:

react-native link react-native-touch-id

Sau khi cài đặt thư viện thành công, chúng ta cần thêm permisson cho cả Android và iOS nhé.

Ở trong file AndroidManifest.xml hãy thêm:

<uses-permission android:name="android.permission.USE_FINGERPRINT"/>

Ở trong file Info.plist hãy thêm:

<key>NSFaceIDUsageDescription</key>
<string>Enabling Face ID allows you quick and secure access to your account.</string>

Xong các bước trên thì chúng ta bắt đầu đi vào sử dụng thôi.

Sử dụng

Thông thường khi sử dụng một tính năng liên quan đến permisson, trước hết chúng ta cần phải kiểm tra xem tính năng đấy có hỗ trợ và khả dụng để sử dụng hay không.

TouchID.isSupported()

Đây chính là hàm giúp ta biết liệu thiết bị có hỗ trợ xác thực sinh trắc học không.

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 => {
        // Nếu thiết bị của người dùng không hỗ trợ Touch ID và Face ID
        console.log(error);
      });
    }

Hàm này sẽ trả về biometryType được hỗ trợ và khả dụng trên thiết bị.
Nếu thiết bị không hỗ trợ Touch ID hoặc Face ID thì ta sẽ dùng fallback để sử dụng xác thực bằng mật khẩu.

TouchID.authenticate(reason, config)

Đây chính là hàm xác thực Touch ID hoặc Face ID và trả về một Promise Object. Tham số reasonlà một chuỗi tùy chọn sẽ được hiển thị cho người dùng. Nó có thể cung cấp thông tin về lý do tại sao cần xác thực. Tham số config là một đối tượng tùy chọn có thể với nhiều chi tiết hơn.

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>
    );
  }
};

Trong ví dụ trên, bạn sẽ thấy hàm pressHandler() xử lý xác thực Touch ID của người dùng bằng cách sử dụng hàm TouchID.authentication(). Nếu xác thực không thành công vì một số lý do, error code sẽ được trả về.

Tất cả các error code xác thực sinh trắc học đều có sẵn trong tài liệu chính thức của apple.

Kết hợp sử dụng 2 function

Chúng ta sẽ lưu biometryType vào state của Component để cung cấp đúng thông điệp cho người dùng về việc họ đang xác thực bằng Touch ID hay Face ID.

import React, { Component } from 'react';
import {
  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 => {
        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 => {
      alert('Authenticated Successfully');
    })
    .catch(error => {
      console.log(error)
      alert(error.message);
    });
}

Kết luận

Như vậy là chúng ta đã tích hợp thành công việc xử lý xác thực Touch ID và Face ID cho React Native rồi đấy, tuy nhiên vẫn còn trường hợp Touch ID và Face ID không hỗ trợ cho device thì hãy tìm hiểu thêm về fallback option nhé.

Tài liệu tham khảo:

https://medium.com/react-native-training/integrate-touch-id-and-face-id-to-your-react-native-app-707e7db17edc