엑스포 지문인증

생체 인식 프롬프트를 응용 프로그램의 보안 계층으로 사용하는 앱을 보았습니다.



엑스포에서 이것을 구현하는 것은 정말 쉽습니다. 이에 대한 전체 코드는 this link 에서 찾을 수 있습니다.

화면

이 앱에는 두 개의 화면이 있습니다.

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 패키지를 가져옵니다. 이 패키지를 사용하면 IOS 장치에서 faceID 및 TouchID를 사용하고 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 : 폴백 옵션을 비활성화하는 부울 값입니다. 여러 시도에서 지문 인증에 실패하면 disableDeviceFallback이 false로 설정된 경우 장치가 기본 암호로 돌아갑니다.

cancelLabel : 취소 버튼의 레이블입니다.

인증에 성공하면 Home 화면으로 이동합니다. navigation.replace는 사용자가 Start 화면으로 돌아가기 위해 뒤로가기 버튼이 보이지 않도록 하는 방법입니다. 현재 화면 위에 새 화면을 밀어 넣는 navigation.navigate와 달리 navigation.replace는 현재 화면을 새 화면으로 교체합니다.