Биометрическая аутентификация мобильного приложения - это подход к многофакторной аутентификации (MFA) для проверки личности человека, который использует владение мобильным устройством в качестве первого фактора и использование этого приложения для проверки уникального биометрического идентификатора в качестве второго фактора.

Пароли, безусловно, не так безопасны, как раньше. Поскольку кибербезопасность становится все более актуальной темой, а взломы становятся обычным явлением, для входа в мобильные приложения необходимо использовать новые способы защиты данных. Один из таких методов - мобильная биометрическая аутентификация.

Биометрическая аутентификация - это быстрая, безопасная и простая в использовании процедура. Пользователи любят аутентификацию по отпечатку пальца или по лицу, потому что эти механизмы аутентификации позволяют им безопасно получать доступ к своим устройствам с минимальными усилиями. Этот вид аутентификации в основном используется для мобильного банкинга и электронной коммерции.

Новое исследование EyeVerify, The Retail Banking Biometrics Confidence Report, показывает, что потребители не только считают, что биометрические технологии являются более безопасными аутентификаторами, чем пароли, но также хотели бы иметь больше вариантов биометрии для мобильного банкинга.

Эта статистика показывает долю владельцев мобильных биометрических устройств, которые загружают биометрические приложения во всем мире с 2016 по 2022 год. Владельцы биометрических устройств все чаще загружают приложения, использующие преимущества биометрических технологий. Ожидается, что к 2022 году 96,8% пользователей биометрических устройств будут загружать биометрические приложения.

Почему Экспо?

Expo - это платформа с открытым исходным кодом для создания универсальных нативных приложений для Android, iOS и Интернета с помощью JavaScript и React. Это своего рода расширение для ReactNative, оно предлагает множество уже включенных компонентов и библиотек для облегчения разработки мобильных приложений с помощью React Native; он дает вам доступ к дополнительным API-интерфейсам, обертывая собственный код для выполнения общих задач, чтобы вы могли оставаться в JavaScript, включая чтение контактов в телефоне, доступ к гироскопу телефона или вход пользователей в систему через Facebook.

Expo действительно хорош, когда вы начинаете с мобильных приложений и не знаете, что делать.

В этом посте мы собираемся интегрировать аутентификацию по отпечатку пальца в ваше приложение Expo с помощью библиотеки expo-local-authentication, чтобы показать, какие преимущества биометрической аутентификации и насколько проста реализация (эта реализация также работает для аутентификации по лицу).

Установка

Установка довольно проста с библиотекой expo-local-authentication.

Если вы используете пряжу, выполните следующую команду:

yarn add expo-local-authentication

Если вы используете установку npm, выполните следующую команду:

npm i —save expo-local-authentication

Обеспечение совместимости устройств

Сначала мы хотим убедиться, что устройство вашего пользователя поддерживает аутентификацию по отпечатку пальца. Нам необходимо импортировать LocalAuthentication из expo-local-authentication.

import * as LocalAuthentication from ‘expo-local-authentication’;

Мы можем очень легко обеспечить совместимость устройства, вызвав LocalAuthentication.hasHardwareAsync () в нашем componentDidMount (). Эта функция возвращает логическое значение, указывающее, есть ли у текущего устройства необходимое оборудование. Если он возвращает false, вам нужно убедиться, что у вас есть резервный вариант для аутентификации пользователя.

componentDidMount(){checkDeviceForHardware = async ()
 this.checkDeviceForHardware();=> {
 let compatible = await LocalAuthentication.hasHardwareAsync();
 if (compatible) {
 alert('Compatible Device!');
 }
 else alert('Current device does not have the necessary hardware!')
}; 
}

Проверка биометрических записей

Теперь, когда мы знаем, что устройство нашего пользователя поддерживает биометрическую аутентификацию, нам нужно убедиться, что биометрические данные пользователя записаны в их ОС. И снова мы можем добиться этого, вызвав метод LocalAuthentication.isEnrolledAsync (), который также возвращает логическое значение, указывающее, были ли найдены биометрические записи для пользователя.

checkForBiometrics = async () => {
 let biometricRecords = await LocalAuthentication.isEnrolledAsync();
 if (!biometricRecords) {
 alert('No Biometrics Found')
 } else {
 alert('Biometrics Found')
 }
 };

Биометрическое сканирование

Убедившись, что возможности устройства и у вашего пользователя установлены биометрические записи, мы можем приступить к сканированию биометрических данных.

Мы сканируем биометрические данные, вызывая метод LocalAuthentication.authenticateAsync (). Он вернет объект, содержащий ключ success с логическим значением, указывающим, была ли аутентификация успешной, и ошибку ключ, содержащий код ошибки в случае сбоя аутентификации (Andriod OS не предоставляет подсказку пользовательского интерфейса для сканирования, поэтому вам придется предоставить свое собственное; у iOS есть подсказка пользовательского интерфейса).

handleAuthentication= async() //handleLogin() is your function for Login=> {
handleLogin = async () => {
 this.props.navigation.navigate("HOME")
} 
 let result = await LocalAuthentication.authenticateAsync();
 if (result.success) {
 this.setState({scanned:true});
 this.handleLogin();
 }
 else alert ('Authentication Failed')
}

Собираем все вместе

В приведенном ниже коде компонент входа в систему показан как очищенная версия нашей аутентификации с использованием библиотеки expo-local-authentication.

Помимо функций компонента, о которых мы уже упоминали ранее, основное внимание уделяется функции handleAuthentication (). После сканирования ваших биометрических данных в переменной USER в AsyncStorage фактически указано ваше имя пользователя, которое вы отправляете в запросе POST для входа в приложение. Если биометрические данные не сканируются, вы должны ввести свои данные в поля ввода, и процедура будет стандартной для процесса входа в систему.

import React, { Component } from "react";
import { Button } from "../components";
import { Input } from "../components";
import axios from "axios";
import { AsyncStorage } from "react-native";
import { _storeToken, _clearToken, _storeUser } from "../helpers/asyncStorage";
import * as LocalAuthentication from 'expo-local-authentication';
const AUTH_KEY = "@AUTH_TOKEN_KEY";
const USER = "@USER";
export default class Login extends Component {
 constructor(props) {
        super(props);
        this.state = {
           username: "",
           password: "",  
           incorrect: false,
           sccaned:false};
    }
componentDidMount() {
       this.checkDeviceForHardware();
       this.checkForBiometrics();     
       if(!this.state.scanned)
       this.handleLoginPress();}
checkDeviceForHardware = async () => {
    let compatible = await LocalAuthentication.hasHardwareAsync();
    if (compatible) {
    alert('Compatible Device!');}
    else alert('Current device does not have the necessary hardware!')
};
checkForBiometrics = async () => {
    let biometricRecords = await.LocalAuthentication.isEnrolledAsync();
    if (!biometricRecords) {
    alert('No Biometrics Found')
    } 
    else {
    alert('Biometrics Found')
    }
};
handleLoginPress =async () => {
    this.handleAuthentication();
};
handleAuthentication= async() => {
    let result = await LocalAuthentication.authenticateAsync();
    if (result.success) {
    this.setState({sccaned:true})
    const data = {
    username:"username", //login data for your account
    password:"password"}
    const headers = { 
         "Content-Type": "application/json",};
    var temp= this;
    axios.post("https://mywebsite.com/login", data,                      {headers:headers}).then(function (result) {
     if (result && result.data) {
     const AUTH_TOKEN = result.data.token; 
     const AUTH_USER = result.data.username;
     _storeUser(AUTH_USER);
     _storeToken(AUTH_TOKEN);
     if (AUTH_TOKEN){
        temp.props.navigation.navigate("HOME");}
     else {
        temp.setState({ incorrect: true });}}
}).catch(function (error) {
    temp.setState({ incorrect: true });
    console.log(error);});}
    else {
       alert('Error! Enter your username and password!');}};
_login = async () => {
     const { name, password } = this.state;
     const data = {name, password}; 
     const headers = {"Content-Type": "application/json"};
     var temp= this;
     axios.post("https://mywebsite.com/login", data,                 {headers:headers}).then(function (result) {
     if (result && result.data) {
     const AUTH_TOKEN = result.data.token;
     const AUTH_USER = result.data.username;
     _storeUser(AUTH_USER);
     _storeToken(AUTH_TOKEN); 
     if (AUTH_TOKEN){
        temp.props.navigation.navigate("HOME");
     }
    else {temp.setState({ incorrect: true });}}})
    .catch(function (error) {
    temp.setState({ incorrect: true });
    console.log(error);});
};
render() {
return (
     <View style={styles.container}>
     <Input placeholder="Username" autoCompleteType="username" onChangeText={(text) => this.setState({ username: text })}></Input>
     <Input placeholder="Password" autoCompleteType="password" secureTextEntry={true} onChangeText={(text) => this.setState({ password: text })}></Input>
      {this.state.incorrect ? <Text>Inccorect username or password</Text> : null}
     <Button onPress={this._login}>Login</Button>
</View>
);}}
const styles = {
    container: {
       flex: 1, 
       backgroundColor: "white",
       justifyContent: "flex-start",
       alignItems: "center",
       padding: 10}
}

Теперь вы интегрировали биометрическую аутентификацию в свое приложение Expo.

После запуска вашего приложения вы можете увидеть преимущества биометрической аутентификации:

  • Больше никаких украденных паролей
  • Защита конфиденциальности
  • Легкость использования
  • Удобный

Биометрическая аутентификация для мобильных приложений быстрее и безопаснее по сравнению с другими аутентификациями. Не боясь хакеров и не опасаясь ложной идентичности, пользователям больше не нужно бояться того, что кто-то может получить доступ к их информации.

Если вы хотите чем-то поделиться или добавить, не стесняйтесь оставлять комментарии ниже, я буду рад услышать от вас.

Для получения дополнительной информации о библиотеке expo-local-authentication посетите https://docs.expo.io/versions/latest/sdk/local-authentication/.

Я Берина Омерашевич, студентка электротехнического факультета в Сараево.