Cordova/Mobile: App ejemplo para autenticar con huella digital.

PHOTO EMBED

Mon Nov 04 2024 00:53:45 GMT+0000 (Coordinated Universal Time)

Saved by @marcopinero #html #javascript #cordova 

// config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.fingerprintauth" version="1.0.0" xmlns="http://www.w3.org/ns/widgets">
    <name>FingerprintAuth</name>
    <description>Aplicación de autenticación por huella digital</description>
    <author email="dev@example.com" href="http://example.com">
        Tu Nombre
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-fingerprint-aio" spec="^4.0.0" />
    <access origin="*" />
</widget>

// www/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autenticación por Huella Digital</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>Bienvenido</h1>
        <button id="authenticateButton">Autenticar con Huella Digital</button>
        <p id="status"></p>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

// www/css/style.css
.container {
    padding: 20px;
    text-align: center;
}

button {
    padding: 15px 30px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    margin: 20px 0;
    cursor: pointer;
}

#status {
    margin-top: 20px;
    font-weight: bold;
}

// www/js/index.js
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    document.getElementById('authenticateButton').addEventListener('click', authenticate);
    
    // Verificar si el dispositivo soporta la autenticación biométrica
    Fingerprint.isAvailable(function(result) {
        // result contiene el tipo de biometría disponible
        console.log("Tipo de biometría: " + result);
    }, function(error) {
        console.error("Error al verificar biometría: " + error);
        document.getElementById('status').textContent = 
            "Tu dispositivo no soporta autenticación por huella digital";
    });
}

function authenticate() {
    Fingerprint.show({
        title: 'Autenticación Biométrica', // título opcional
        subtitle: 'Por favor, autentícate usando tu huella digital', // subtítulo opcional
        description: 'Toca el sensor de huella digital', // descripción opcional
        fallbackButtonTitle: 'Usar alternativa', // título del botón alternativo
        disableBackup: false // permitir autenticación alternativa
    }, successCallback, errorCallback);
}

function successCallback() {
    document.getElementById('status').textContent = 
        "¡Autenticación exitosa!";
    // Aquí puedes agregar la lógica para después de una autenticación exitosa
}

function errorCallback(error) {
    document.getElementById('status').textContent = 
        "Error en la autenticación: " + error.message;
}
content_copyCOPY

npm install -g cordova cordova create fingerprint-auth com.example.fingerprintauth FingerprintAuth cd fingerprint-auth cordova plugin add cordova-plugin-fingerprint-aio cordova platform add android # y/o cordova platform add ios Copia los archivos del artefacto en sus respectivas ubicaciones en tu proyecto: El contenido del config.xml en la raíz del proyecto Los archivos de la carpeta www en la carpeta www de tu proyecto La aplicación proporciona: Una interfaz de usuario simple y responsive Verificación de disponibilidad de huella digital Manejo de errores y mensajes de estado Personalización del diálogo de autenticación Para iOS, necesitarás agregar estas configuraciones en tu archivo <platform name="ios"> <config-file target="*-Info.plist" parent="NSFaceIDUsageDescription"> <string>Esta app requiere autenticación biométrica para verificar tu identidad</string> </config-file> </platform>