Sito web bancario con accesso mediante riconoscimento facciale tesina

Istituto “Ernesto Breda”

ITI informatica e telecomunicazioni

(Articolazione informatica)

Progetto di un sito web bancario con accesso mediante riconoscimento facciale

Autori del progetto:

Spreafico Mattia

Vergani Marco

Anno scolastico 2014-2015

1

2

Sommario

Introduzione

Presentazione del progetto

Scopo del progetto

Hardware utilizzato

Software utilizzato

Capitolo 1: Rilevamento dei volti

1.1 Presentazione

1.2 Funzionamento

1.3 Codice

1.4 Test

Capitolo 2: Riconoscimento del volto

2.1 Presentazione

2.2 Funzionamento

2.3 Codice

2.4 Test

Capitolo 3: Sito web bancario

3.1 Presentazione

3.2 Funzionamento

3.3 Codice

3.4 Test

Capitolo 4: Applicativo Java per l’inserimento casuale di clienti

4.1 Presentazione

4.2 Funzionamento

4.3 Codice

4.4 Test

3

Capitolo 5: Database

5.1 Presentazione

5.2 Funzionamento

5.3 Codice

5.4 Test

Capitolo 6: Gestione della sessione

6.1 Presentazione

6.2 Funzionamento

6.3 Codice

6.4 Test

Conclusione

Risultato

Problematiche riscontrate

Fonti e bibliografia

Allegati

Specifica e analisi dei requisiti

Analisi funzionale

4

Introduzione

Presentazione del progetto

Il progetto consiste nella realizzazione di un prototipo di sito web bancario (Proof of Concept) con un elevato livello di sicurezza.

Per poter realizzare ciò si è implementato un sistema di sicurezza a riconoscimento facciale per permettere ai dipendenti della banca di accedere al sito web e poter visualizzare i dati sensibili dei clienti della banca.

Il sito web è composto da una pagina iniziale in cui sono presenti i servizi offerti dalla banca e le proprie caratteristiche. Un’interfaccia permetterà inoltre di poter accedere o come cliente o come dipendente alla rispettiva sezione del sito web.

Per quanto riguarda la gestione del software bancario si deve permettere l’inserimento e l’archiviazione dei dati dei clienti e dei dipendenti.

I clienti possono accedere al sistema mediante una mail e una password forniti dalla banca.

I clienti possono effettuare una richiesta di un conto, richiedere una carta di credito o un bancomat, visualizzare il proprio conto oppure effettuare un movimento. Tutto ciò che compie un cliente viene memorizzato in un database. Al momento dell’accesso il cliente potrà visualizzare tutti i movimenti e i conti.

Un dipendente accede al sito web mediante il riconoscimento facciale. Per poter accedere deve avere a disposizione una webcam. Nell’istante in cui vuole accedere si scatterà una fotografia e, se il viso è memorizzato nel sistema bancario, allora potrà visualizzare l’elenco di tutti i clienti. Successivamente potrà scegliere il cliente da visualizzare e verranno mostrati i movimenti e le operazioni da esso effettuati. Un dipendente della banca non può compiere nessun tipo di operazione, ma potrà solamente visualizzare i clienti e tutto quello che l’affiliato ha compiuto.

Scopo del progetto

Lo scopo del progetto è quello di garantire la sicurezza dei propri clienti adottando gli standard più avanzati nell’accesso alle informazioni.

Tale sistema permette di avere un alto livello di sicurezza perché consente a tutti i dipendenti di visualizzare i dati di tutti gli affiliati.

5

Hardware utilizzato

L’hardware utilizzato per questo progetto è composto da un computer, una webcam e un server.

Per quanto riguarda il computer si è scelto di utilizzare un PC portatile con la webcam integrata per avere una maggiore efficienza dell’immagine rilevata e per non dover affrontare problematiche relative alla compatibilità tra la webcam e il sistema operativo del computer.

Il server invece viene utilizzato per usufruire della possibilità di utilizzare il database e si ipotizza che sia collocato nella stessa rete locale della banca.

Software utilizzato

I software utilizzati sono stati NetBeans IDE 8.0.2 e MySQL Workbench.

NetBeans è un ambiente di sviluppo integrato (IDE) multi-linguaggio scritto interamente in Java ed è stato utilizzato per la creazione e l’implementazione dell’applicativo del rilevamento dei volti, dell’applicativo del riconoscimento facciale, del sito web bancario e dell’applicativo Java per l’inserimento casuale di clienti.

MySQL Workbench è uno strumento visuale di progettazione per database, che integra sviluppo SQL, gestione, modellazione dati, creazione e manutenzione di database MySQL.

I linguaggi utilizzati sono descritti nella seguente tabella:

6

Capitolo 1: Rilevamento dei volti

1.1 Presentazione

Il rilevamento dei volti consiste in un applicativo Java chiamato FaceDetection attraverso il quale si riesce a rilevare i volti che vengono visualizzati a video.

Per poter rilevare i volti si deve avere una webcam collegata al computer oppure, come nel nostro caso, si deve disporre di un computer portatile con la webcam integrata.

Il rilevamento dei volti, nel nostro prototipo di applicazione web bancaria, verrà utilizzato dai dipendenti per accedere al sito web e poter visualizzare i dati sensibili dei clienti della banca.

1.2 Funzionamento

Al momento dell’avvio dell’applicazione, dopo aver premuto il bottone denominato “Avvia”, viene automaticamente avviata la webcam.

L’applicativo Java riesce a individuare i volti che vengono visualizzati a video dalla webcam e per ognuno di essi viene disegnato un rettangolo avente un contorno di colore verde.

Quando l’applicazione ha rilevato il volto desiderato, si preme il bottone denominato “Conferma” e il viso che è stato evidenziato in quell’istante viene memorizzato nel formato .jpg nella cartella contenente l’applicativo per il riconoscimento dei volti.

Automaticamente viene avviato quest’ultimo applicativo che confronta il volto memorizzato nel database con quello visualizzato dall’applicativo FaceDetection e salvato nell’apposita cartella.

Dopo tale confronto, il cui funzionamento verrà spiegato dettagliatamente nel prossimo capitolo, viene aperta con il browser Firefox una pagina web nella quale viene visualizzato se il dipendente potrà accedere o meno ai dati degli affiliati della banca.

7

1.3 Codice

Nell’applicativo Java è stata importata la libreria OpenCV. Questa è una libreria di funzioni volte al real-time computer vision ed è scritta nel linguaggio C e C++.

Questa applicazione è formata, oltre che dal programma Java chiamato FaceDetection, anche da un file XML chiamato haarcascade_frontalface_alt.

Nel file haarcascade_frontalface_alt.xml è contenuto tutto il codice XML che serve per rilevare un volto.

Nell’applicativo FaceDetection, oltre alla libreria OpenCV, si sono importate le seguenti librerie:

• Java.awt.*; (per la grafica)
• Java.io.* (per le eccezioni)
• Java.util.* (per i log)

Si è creata la classe FaceDetection che estende da javax.swing.JFrame per poter utilizzare i contenuti grafici.

In tale classe sono stati creati i seguenti oggetti:

• VideoCapture (per la cattura del video)
• Mat (per la memorizzazione di matrici)
• MatofByte
• MatOfRect
• Rect
• CascadeClassifier (per il rilevamento di oggetti e nel nostro caso gli viene passato il file haarcascade_frontalface_alt.xml per il rilevamento dei volti)
• DaemondThread (per eseguire un ciclo infinito di attesa di richieste ed esecuzione delle stesse)

Nella classe FaceDetection è stata creata una classe interna avente nome DaemondThread che implementa l’interfaccia Runnable e quindi si deve utilizzare il metodo run ( ) nel quale si definisce il codice che costituisce il thread.

Nel metodo run ( ), mediante il metodo retrive dell’oggetto VideoCapture, si recuperano le immagini che la webcam visualizza a video.

Con il metodo rectangle della classe Core si sono date le coordinate delle dimensioni del rettangolo, mentre con il metodo imwrite della classe Highgui si è potuto inserire una stringa con la directory nella quale si salva l’immagine rilevata.

8

Invece con il metodo exec della classe RunTime viene aperto il browser Firefox che avvia l’applicazione del riconoscimento dei volti per vedere l’accesso o meno del dipendente dopo che tale applicazione ha confrontato le immagini.

Sempre nella classe FaceDetection, che è la classe “principale”, è presente un costruttore non parametrizzato nel quale si richiama il metodo initComponents ( ) per inizializzare la finestra.

Inoltre in questa classe si trovano due metodi chiamati jButton2ActionPerformed e jButton1ActionPerformed che servono, il primo metodo per gestire il bottone “Avvia” mentre il secondo metodo per la gestione del bottone “Conferma”.

Nel metodo principale main ( ) si crea e si visualizza la finestra con il metodo run ( ) nel quale la si rende visibile.

1.4 Test

Quando si avvia l’applicazione viene visualizzata una schermata e due bottoni: “Avvia” e “Conferma”.

9

Al momento che si preme il bottone “Avvia” viene visualizzato quello che si vede dalla webcam.

Se la webcam visualizza a video dei volti, il volto viene rilevato dall’applicativo Java FaceDetection e viene evidenziato mediante il disegno di un rettangolo avente il contorno di colore verde.

Quando il volto rilevato è quello desiderato si preme il bottone “Conferma”. In questo istante il viso rilevato viene salvato nella cartella contenente l’applicativo del riconoscimento dei volti e viene avviato il browser Firefox che mostra una pagina web con l’accesso o meno nell’area dedicata del sito web bancario dopo che l’applicativo del riconoscimento dei volti ha effettuato il confronto tra la faccia rilevata e quella memorizzata nel database.

10

Capitolo 2: Riconoscimento dei volti

2.1 Presentazione

Per il riconoscimento del volto abbiamo trovato un progetto di analisi delle immagini che utilizza jquery, un framework JavaScript. Abbiamo cercato di studiare quanto più possibile il codice, interpretarlo e poi modificarlo e aggiungere alcune porzioni di codice laddove era necessario ai nostri scopi.

2.2 Funzionamento

Il progetto si compone principalmente di 2 pagine JavaScript aventi nome main.js e resemble.js. Questo progetto utilizza alcune librerie come “PhantomCSS” e “Html File Api”. PhantomCSS è in grado di analizzare i dati delle immagini, ad esempio togliendo l’anti-aliasing che comporterebbe differenze tra immagini derivanti da dispositivi (webcam) diversi. In particolare PhantomCSS verifica le differenze RGB tra immagini, qualora dovessero esserci.

Html File API invece è stato aggiunto al DOM in HTML 5 e con esso ora è possibile chiedere all’utente di selezionare dei file locali e quindi di leggere il contenuto di tali file.

Il programma del riconoscimento facciale confronta due foto presenti nella cartella di tale applicativo, una avente nome “face.jpg” che è stata rilevata dall’applicativo FaceDetection e quella memorizzata nel database.

Si è deciso di utilizzare come margine di errore al massimo il 15 % di differenza tra i due volti.

Nel caso in cui la percentuale di differenza è minore di tale soglia, allora viene creato un popup di risposta e quest’ultimo mostra la foto del volto riconosciuto e la percentuale di somiglianza.

Altrimenti, se la percentuale è maggiore della soglia prestabilita, verrà mostrato un popup di risposta negativa.

11

2.3 Codice

La funzione principale che abbiamo modificato maggiormente è situata nella pagina denominata main.js. Sotto si riporta una porzione di codice che si ritiene più utile.

$(function(){

// metodo che restituisce la percentuale di differenza

function onComplete(data){

s // se la percentuale è minore di 15 si può proseguire

if(data.misMatchPercentage<=15){

// popup di risposta

$('body').html("Percentuale di differenza:

"+data.misMatchPercentage);

}else{ // popup di risposta

$('body').html("Percentuale di differenza:

"+data.misMatchPercentage + "Riprova");

}

}

// oggetto di tipo resemble che confronta le due immagini

resembleControl =

resemble('img/provas.jpg').compareTo('img/prova3.jpg').onComplete(onComplete);

});

12

Questa è la funzione principale del progetto di riconoscimento del volto.

L’oggetto resembleControl viene creato comparando due immagini salvate nella cartella “img” situata nel nostro progetto con il metodo “compareTo”. Dopo aver effettuato il confronto viene invocato a sua volta il metodo “onComplete” (vedi sopra) che ha come parametro in ingresso “data”, ovvero il numero che rappresenta la differenza tra le immagini confrontate.

La funzione onComplete controlla se la percentuale di differenza tra i volti è minore di 15.

2.4 Test

Al momento che si preme il bottone “Conferma” dall’applicativo FaceDetection viene avviato automaticamente il programma del riconoscimento dei volti.

Tale applicativo confronta la foto del volto rilevato in questo istante, che è stata salvata nella cartella del programma del riconoscimento facciale ed ha nome “face.jpg”, con la foto già presente nella cartella avente nome “db.jpg”.

13

Il programma del riconoscimento dei volti svolge la sua funzione e automaticamente viene aperto il browser Firefox con il risultato di tale confronto. In questo caso, siccome le foto differiscono del 4.89 %, viene dato l’accesso al dipendente. Altrimenti viene mostrata una finestra nella quale è scritto che l’accesso non è consentito.

14

Capitolo 3: Sito web bancario

3.1 Presentazione

Il sito web su cui interfaccia il riconoscimento facciale simula un gestionale bancario a doppia possibilità di accesso: dipendente o cliente. Il gestionale è realizzato sotto forma di Web Application, al quale entrambe le tipologie di utente possono accedere, con differenti privilegi.