Использование FaceID и TouchID в React Native и Expo
В этом руководстве по биометрической аутентификации мы покажем вам, как аутентифицировать пользователей с помощью Face ID и Touch ID в простых приложениях React Native и Expo.
Мы будем использовать Expo SDK, expo-local-authentication,чтобы реализовать биометрическую аутентификацию в нашем приложении. При этом используются API платформы для доступа к оборудованию устройства, поэтому утечка какой-либо личной информации с устройства исключена.
С помощью этого SDK мы реализуем локальную аутентификацию с распознаванием лиц и сканированием отпечатков пальцев в наших приложениях React Native.
Что такое биометрическая аутентификация?
Биометрическая аутентификация - это тип многофакторной аутентификации (MFA), который использует данные, полученные из биологических характеристик пользователя устройства, таких как характеристики лица, распознавание голоса и отпечатки пальцев, для защиты личной информации и конфиденциальных активов.
Все виды мобильных приложений используют локальную биометрическую аутентификацию. Лучшее в биометрической аутентификации - это то, что она полностью выполняется на устройстве пользователя, поэтому нет риска утечки конфиденциальных данных в сторонний API.
Помимо проверки личности пользователя, биометрия также может служить дополнительным уровнем безопасности наряду с традиционными методами входа, такими как электронная почта / пароль.
Реализация биометрической аутентификации в приложении Expo
Чтобы начать наше руководство, давайте рассмотрим шаги по установке, импорту и настройке биометрической аутентификации в приложении Expo.
Монтаж
Выполните следующую команду, чтобы установить библиотеку expo-local-authentication:
// with yarn
yarn add expo-local-authentication
// with npm
npm install expo-local-authenticationИмпортируйте пакет, добавив следующую строку в файл JavaScript или TypeScript, в котором вы хотите реализовать биометрическую аутентификацию:
import * as LocalAuthentication from 'expo-local-authentication'Проверить совместимость устройства
Во-первых, мы должны проверить, поддерживает ли оборудование устройства биометрию. Мы будем использовать метод hasHardwareAsync, предоставленный пакетом Expo LocalAuthentication, который мы только что импортировали при монтировании страницы:
// где бы ни находился useState
const [isBiometricSupported, setIsBiometricSupported] = React.useState(false);
// Проверьте, поддерживает ли оборудование биометрию
useEffect(() => {
(async () => {
const compatible = await LocalAuthentication.hasHardwareAsync();
setIsBiometricSupported(compatible);
})();
});
// В нашем JSX мы условно визуализируем текст, чтобы сообщить пользователям, поддерживает ли их устройство
<Text> {isBiometricSupported ? 'Your device is compatible with Biometrics'
: 'Face or Fingerprint scanner is available on this device'}
</Text>Метод hasHardwareAsync возвращает обещание, которое решает логическое значение hasHardwareAsync(): Promise<boolean>, указывающее, поддерживает ли устройство пользователя биометрию.
В случаях, когда на устройстве пользователя нет биометрической поддержки, вам следует рассмотреть возможность включения альтернативных методов, таких как пароли, для аутентификации пользователей.
Проверить биометрические записи
Чтобы проверить, сохранены ли биометрические данные на устройстве пользователя, воспользуемся методом isEnrolledAsync. Этот метод возвращает обещание isEnrolledAsync(): Promise<boolean>, которое преобразуется в логическое значение:
const handleBiometricAuth = async () => {
const savedBiometrics = await LocalAuthentication.isEnrolledAsync();
if (!savedBiometrics)
return Alert.alert(
'Биометрическая запись не найдена',
'Пожалуйста, подтвердите свою личность с помощью пароля',
'OK',
() => fallBackToDefaultAuth()
);
}Обратите внимание, как мы настроили приложение для возврата к альтернативному методу аутентификации, когда на устройстве пользователя нет записи о возможностях идентификации лица или отпечатков пальцев.
Как работает биометрическая аутентификация
Чтобы действительно аутентифицировать пользователей с помощью сканирования отпечатков пальцев или Touch ID / Face ID, мы воспользуемся методом LocalAuthentication.authenticateAsync. Это возвращает обещание, разрешающее объект, содержащий success, который может быть true или false.
Вот пример полезной нагрузки, возвращаемой при success это false:
Object {
"error": "lockout",
"message": "Too many attempts. Try again later.",
"success": false,
},AuthenticateAsync принимает в качестве аргумента параметры типа LocalAuthenticationOptions. Вот что принимают варианты:
LocalAuthenticationOptions = {
promptMessage?: string;
cancelLabel?: string;
disableDeviceFallback?: boolean;
fallbackLabel?: string;
}promptMessage
promptMessage это сообщение, которое отображается рядом с подсказкой TouchID или FaceID:
cancelLabel
cancelLabel позволяет настроить метку Cancel по умолчанию, закрывающую запрос биометрических данных. Обратите внимание, как значение Cancel по умолчанию изменилось на Close biometrics prompt.
Чтобы это работало на некоторых устройствах Android, вам может потребоваться установить значение disableDeviceFallback в true.
disableDeviceFallback
disableDeviceFallback позволяет вам решить, должно ли приложение после нескольких попыток распознавания лица или идентификатора отпечатка пальца вернуться к аутентификации пользователей с помощью пароля устройства. Для этого параметра установлено значение false по умолчанию.
Возможно, вам потребуется установить для параметра disableDeviceFallback значение true, чтобы пользователи имели доступ к API биометрии распознавания лиц.
fallbackLabel
fallbackLabel позволяет настроить метку кода доступа по умолчанию. Этот параметр необходим только в том случае, если значение disableDeviceFallback равно false.
Вот пример того, как использовать метод authenticateAsync:
const handleBiometricAuth = async () => {
const biometricAuth = await LocalAuthentication.authenticateAsync({
promptMessage: 'Login with Biometrics',
disableDeviceFallback: true,
});
}Разрешения
На устройствах Android разрешения добавляются автоматически. В iOS вам нужно будет добавить InfoPlist.NSFaceIDUsageDescription в файл app.json в приложении Expo.
Вы должны поместить описание NSFaceIDUsageDescription в файл ios.InfoPlist.NSFaceIDUsageDescription в файле app.json. Значение может быть что - то вроде APP_NAME needs to use Face ID / Touch ID to authenticate you
NSFaceIDUsageDescription - это сообщение, которое сообщает пользователю, почему приложение запрашивает возможность аутентификации с помощью Face ID.
Реализация биометрической аутентификации в приложении React Native
Чтобы использовать этот пакет в простом приложении React Native, вам необходимо установить react-native-unimodules, что, по сути, позволяет использовать модули Expo в приложении React Native.
После успешной установки Unimodule React Native вы можете реализовать локальную аутентификацию так же, как мы это сделали с Expo.
Разрешения в React Native
Для iOS вам нужно добавить NSFaceIDUsageDescription в свой файл info.plist:
// info.plist
<key>NSFaceIDUsageDescription</key>
<string>$(PRODUCT_NAME) Authentication with TouchId or FaceID</string>Этот ключ необходим, если ваше приложение использует API-интерфейсы для доступа к Face ID.
Для Android вам нужно добавить в файл AndroidManifest.xml следующие строки кода:
<uses-permission android:name="android.permission.USE_BIOMETRIC" />
<uses-permission android:name="android.permission.USE_FINGERPRINT" />Заключение
Локальная аутентификация имеет множество вариантов использования, и я надеюсь, что это руководство упростит вам реализацию биометрической аутентификации с помощью отпечатка пальца (Touch ID) и распознавания лица (Face ID) в ваших приложениях Expo и React Native.
Полный код, используемый в этом руководстве, доступен на GitHub.
