Аутентификация по отпечаткам пальцев в expo

Мы видели приложения, использующие биометрические подсказки в качестве уровня безопасности в приложении.

Реализовать это в expo очень просто. Вы можете найти полный код для этого по этой ссылке.

Экраны

В этом приложении будет два экрана.

• Home
• Start.

Вкратце, экран Start будет содержать кнопку аутентификации. Когда пользователь нажимает на эту кнопку, приложение запрашивает биометрический запрос. Если пользователь успешно пройдет аутентификацию, приложение перейдет на экран Home.

App.js

App.js используется для настройки нашего стекового навигатора между двумя экранами Home и Start.

<NavigationContainer>
    <Stack.Navigator initialRouteName="Start">
        <Stack.Screen
            name="Start"
            component={Start}
            options={{ headerShown: false }}
        />
        <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
</NavigationContainer>

Start.js

Мы импортируем пакет expo-local-authentication . Этот пакет позволяет использовать faceID и TouchID в устройствах IOS и Biometric Prompt в устройствах Android.

import * as LocalAuthentication from "expo-local-authentication";

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

const [isBiometricSupported, setIsBiometricSupported] = useState(false);
const [fingerprint, setFingerprint] = useState(false);

Мы используем метод hasHardwareAsync, чтобы проверить, поддерживает ли устройство биометрическую аутентификацию. Метод isEnrolledAsync проверяет, сохранен ли в устройстве отпечаток пальца.

useEffect(() => {
    (async () => {
        const compatible = await LocalAuthentication.hasHardwareAsync();
        setIsBiometricSupported(compatible);
        const enroll = await LocalAuthentication.isEnrolledAsync();
        if (enroll) {
            setFingerprint(true);
        }
    })();
}, []);

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

<View style={styles.start}>
    <View style={{ justifyContent: "center", flex: 1, alignItems: "center" }}>
        {isBiometricSupported && fingerprint ? (
            <TouchableOpacity onPress={handle}>
                <Text style={styles.button}>Go to home</Text>
            </TouchableOpacity>
        ) : (
            <View>
                <Text>fingerprint not supported/ allocated</Text>
            </View>
        )}
    </View>
</View>

handle — это функция, которая будет аутентифицировать пользователя.

const handle = async () => {
    try {
        const biometricAuth = await LocalAuthentication.authenticateAsync({
            promptMessage: "Login with Biometrics",
            disableDeviceFallback: true,
            cancelLabel: "Cancel",
        });
        if (biometricAuth.success) {
            navigation.replace("Home");
        }
    } catch (error) {
        console.log(error);
    }
};

aunthenticateAsync — это метод, который будет аутентифицировать пользователя. мы передаем следующие параметры.

• promptMessage: Это сообщение, которое будет показано пользователю.
• disableDeviceFallback: Это булево значение, которое отключит опцию fallback. Когда нам не удается пройти аутентификацию по отпечатку пальца в течение нескольких попыток, устройство возвращается к паролю по умолчанию, если disableDeviceFallback установлено в false.
• cancelLabel: Это метка для кнопки отмены.

Если аутентификация прошла успешно, мы переходим на экран Home. navigation.replace — это метод, который мы используем для того, чтобы пользователь не видел кнопку «Назад» для возврата к экрану Start. В отличие от navigation.navigate, который перемещает новый экран поверх текущего, navigation.replace заменяет текущий экран новым.