Впровадження біометричної автентифікації в React Native для мобільних додатків

Впровадження біометричної автентифікації

Біометрична автентифікація стала важливою частиною сучасних мобільних додатків, забезпечуючи зручний та безпечний спосіб авторизації. Завдяки React Native розробники можуть легко додавати цю функціональність як на iOS, так і на Android, використовуючи одну кодову базу. У цій статті ми розглянемо, як впровадити біометричну автентифікацію в React Native, які інструменти для цього потрібні та які нюанси слід врахувати.

Що таке біометрична автентифікація?

Біометрична автентифікація використовує унікальні фізичні характеристики користувача (відбитки пальців, розпізнавання обличчя) для підтвердження його особи. Це дозволяє зробити процес авторизації швидшим, зручнішим і безпечнішим, ніж використання паролів.

Переваги біометричної автентифікації:

  1. Безпека: Біометричні дані неможливо забути чи вгадати.
  2. Швидкість: Авторизація займає всього кілька секунд.
  3. Зручність: Користувачам не потрібно запам’ятовувати складні паролі.

Що потрібно для впровадження біометричної автентифікації в React Native?

Для роботи з біометрією в React Native можна використовувати бібліотеки, які забезпечують доступ до нативного функціоналу пристрою. Найпопулярніші з них:

  1. react-native-biometrics: Бібліотека для роботи з біометрією (відбитки пальців, Face ID).
  2. expo-local-authentication: Якщо ви використовуєте Expo, ця бібліотека надає простий спосіб інтеграції біометрії.
  3. react-native-touch-id: Проста у використанні бібліотека для Touch ID та Face ID.

Впровадження біометрії з react-native-biometrics

1. Встановлення бібліотеки

Щоб додати підтримку біометрії, спочатку встановимо бібліотеку:

npm install react-native-biometrics

Після цього виконайте лінкування (для тих, хто не використовує автолінкування в React Native):

npx react-native link react-native-biometrics

2. Налаштування на iOS

У iOS потрібно додати дозволи в файл Info.plist:

<key>NSFaceIDUsageDescription</key>
<string>Ця функція потрібна для біометричної автентифікації</string>

3. Налаштування на Android

Для Android біометрія працює з мінімальною версією SDK 23 (Android 6.0). Переконайтеся, що ваш файл build.gradle має правильну версію:

minSdkVersion = 23

4. Реалізація біометричної автентифікації

Після налаштування середовища можна додати біометричну автентифікацію до додатка.

Ось приклад базової реалізації:

import React from 'react';
import { View, Button, Text, Alert } from 'react-native';
import ReactNativeBiometrics from 'react-native-biometrics';

const rnBiometrics = new ReactNativeBiometrics();

const App = () => {
  const handleBiometricAuth = async () => {
    const { available, biometryType } = await rnBiometrics.isSensorAvailable();

    if (!available) {
      Alert.alert('Біометрія недоступна');
      return;
    }

    if (biometryType === ReactNativeBiometrics.FaceID) {
      Alert.alert('Face ID доступний');
    } else if (biometryType === ReactNativeBiometrics.TouchID) {
      Alert.alert('Touch ID доступний');
    } else if (biometryType === ReactNativeBiometrics.Biometrics) {
      Alert.alert('Загальна біометрія доступна');
    }

    // Виклик біометричної автентифікації
    const { success } = await rnBiometrics.simplePrompt({
      promptMessage: 'Підтвердіть вашу особу',
    });

    if (success) {
      Alert.alert('Авторизація пройшла успішно!');
    } else {
      Alert.alert('Авторизація не вдалася');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Увійти за допомогою біометрії" onPress={handleBiometricAuth} />
    </View>
  );
};

export default App;

Як це працює?

  1. isSensorAvailable() — перевіряє, чи підтримує пристрій біометричну автентифікацію.
  2. simplePrompt() — викликає діалогове вікно для підтвердження біометрії.
  3. biometryType — визначає тип доступної біометрії (Face ID, Touch ID або інша).

Впровадження біометрії з Expo (expo-local-authentication)

Expo пропонує готову бібліотеку expo-local-authentication, яка спрощує процес інтеграції біометрії.

1. Встановлення бібліотеки

expo install expo-local-authentication

2. Реалізація біометричної автентифікації

Приклад роботи з бібліотекою:

import React from 'react';
import { View, Button, Text, Alert } from 'react-native';
import * as LocalAuthentication from 'expo-local-authentication';

const App = () => {
  const handleBiometricAuth = async () => {
    const isCompatible = await LocalAuthentication.hasHardwareAsync();

    if (!isCompatible) {
      Alert.alert('Пристрій не підтримує біометрію');
      return;
    }

    const isEnrolled = await LocalAuthentication.isEnrolledAsync();
    if (!isEnrolled) {
      Alert.alert('Біометричні дані не налаштовані');
      return;
    }

    const result = await LocalAuthentication.authenticateAsync({
      promptMessage: 'Увійдіть за допомогою біометрії',
    });

    if (result.success) {
      Alert.alert('Авторизація успішна!');
    } else {
      Alert.alert('Авторизація не вдалася');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Увійти за допомогою біометрії" onPress={handleBiometricAuth} />
    </View>
  );
};

export default App;

Кращі практики для біометричної автентифікації

  1. Перевірка доступності: Завжди перевіряйте, чи пристрій підтримує біометрію.
  2. Альтернативна автентифікація: Додайте резервний спосіб входу (наприклад, PIN-код).
  3. Чітке повідомлення: Використовуйте зрозумілі підказки у діалогових вікнах.
  4. Безпечне зберігання даних: Використовуйте такі технології, як SecureStore для збереження токенів чи конфіденційної інформації.

Висновок

Впровадження біометричної автентифікації у React Native дозволяє підвищити рівень безпеки та зручності мобільних додатків. Завдяки бібліотекам, таким як react-native-biometrics чи expo-local-authentication, цей процес стає максимально простим і доступним. Якщо ви прагнете створити додаток, який відповідає сучасним вимогам безпеки, біометрія — це важливий інструмент у вашому арсеналі.

Успішна інтеграція біометрії зробить ваш додаток привабливішим для користувачів та покращить їхній досвід.