Добавить аутентификацию с использованием Touch ID пользователя или нового Face ID стало проще, чем когда-либо, в вашем приложении React Native.
Использование Touch ID, также известного как аутентификация по отпечатку пальца, чрезвычайно популярно в мобильных приложениях. Функция Touch ID защищает приложение и упрощает процесс аутентификации для пользователя.
Многие банковские приложения, такие как Bank of America, Discover, Chase, используют аутентификацию Touch ID, обеспечивая безопасную и беспроблемную аутентификацию.
Пользователям не нужно вводить длинные пароли каждый раз при входе в систему, разрешив им входить с помощью своего Touch ID.
В iPhone X есть возможность использовать аутентификацию Face ID. Как Touch ID, так и Face ID улучшили взаимодействие пользователя с мобильными приложениями, сделав их безопасными.
В этом посте мы собираемся интегрировать аутентификацию Touch ID и Face ID с помощью популярной библиотеки react-native-touch-id.
Установка
Установка довольно проста с библиотекой react-native-touch-id.
Если вы используете пряжу, выполните следующую команду:
yarn add react-native-touch-id
Если вы пользователь npm, выполните следующую команду:
npm i --save react-native-touch-id
Не забудьте связать библиотеку с помощью следующей команды:
react-native link react-native-touch-id
После завершения установки нам нужно будет добавить разрешения приложения для файлов Android и iOS.
В AndroidManifest.xml добавьте:
<uses-permission android:name="android.permission.USE_FINGERPRINT"/>
В Info.plist добавьте:
<key>NSFaceIDUsageDescription</key> <string>Enabling Face ID allows you quick and secure access to your account.</string>
После выполнения вышеуказанных шагов вы можете начать использовать библиотеку response-native-touch-id в своем приложении.
использование
В простом примере ниже мы создаем компонент FingerPrint.js.
Функция, которая используется для аутентификации Touch ID пользователя, - это функция аутентификации (причина, конфигурация) из библиотеки react-native-touch-id.
TouchID.authenticate (причина, конфигурация)
Эта функция аутентифицируется с помощью Touch ID или Face ID и возвращает объект обещания. причина - это необязательная строка, отображаемая пользователю. Он может предоставить информацию о том, зачем нужна аутентификация. config - это необязательный объект, который может содержать дополнительные сведения для отображения в диалоговом окне.
В приведенном выше примере вы можете заметить, что функция pressHandler () обрабатывает аутентификацию пользователя Touch ID с помощью функции TouchID.authentication (). Если аутентификация не удалась по какой-либо причине, возвращается код ошибки.
Все коды ошибок биометрической аутентификации доступны в официальной документации Apple:
TouchID.isSupported ()
Эта функция позволяет узнать, поддерживается ли биометрическая аутентификация. Он преобразуется в строку TouchID или FaceID.
В приведенном ниже примере показано использование функции isSupported ().
Библиотека response-native-touch-id поддерживает использование Face ID для устройств iPhone X. Функция isSupported () возвращает тип биометрии, который поддерживается и включен в устройстве. Если устройство не поддерживает Touch ID или Face ID, нам придется вернуться к использованию паролей или кода доступа.
Обратите внимание, что функция isSupported () должна быть вызвана до того, как мы вызовем функцию Authenticate (). Это гарантирует, что мы не аутентифицируемся с помощью этой библиотеки, когда биометрическая аутентификация недоступна. В этом случае можно использовать резервный механизм аутентификации.
Собираем все вместе
В приведенном ниже коде показана очищенная версия нашей аутентификации с использованием response-native-touch-id. Обратите внимание, что мы сохраняем biometryType в состояние компонента. Нам необходимо обеспечить правильное сообщение пользователю о том, аутентифицируются ли они с помощью Touch ID или Face ID.
Ура! Теперь вы интегрировали биометрическую аутентификацию в свое приложение React Native.
Теперь вы можете изучить пользовательский интерфейс и различные резервные варианты для своего приложения, когда Touch ID или Face ID недоступны на устройстве пользователя.
Помните, что когда вы сохраняете пароли пользователей и конфиденциальную информацию при входе в систему, вам придется хранить их в защищенной связке ключей. Библиотека react-native-keychain обеспечивает доступ к связке ключей для React Native, делая ваше приложение безопасным.
Я Адхити Равичандран, консультант по программному обеспечению, работающий над React Native Apps. Я также являюсь автором Pluralsight и люблю преподавать. Вы можете проверить мой последний курс по React Native из множественного числа ниже:
https://www.pluralsight.com/courses/react-native-big-picture
Для получения дополнительной информации и сообщений от меня посетите http://adhithiravichandran.com/ и подпишитесь на меня в твиттере @AdhithiRavi.
