Scriptie ingediend tot het behalen van de graad van PROFESSIONELE BACHELOR IN DE ELEKTRONICA-ICT
Camera Security, Timesheet and Access Automation Tim Bevers Departement Wetenschappen en Techniek Opleiding Elektronica-ICT Academiejaar 2014-2015
Interne promotor: Tom Peeters Externe promotor: Nick Hofstede
Versie: 12 juni 2015
Dankwoord
Als eerste wil ik hier mijn stagebedrijf, Inventive Designers, bedanken voor de stageplaats. Zeker wil ik mijn promotors Tom Peeters en Nick Hofstede bedanken. Daarnaast zijn er nog een aantal mensen die zeker een vermelding verdienen; Nico Brys, Erik Vanherck, Kurt Smolderen en Ken Boone. Dit voor goede begeleiding en hulp tijdens de stage. Antwerpen, 12 juni 2015 Tim Bevers
i
Abstract Voor mijn bachelorproef heb ik verschillende projecten met verschillende technologieën uitgevoerd. Als eerste project heb ik een User Interface gemaakt voor IP camera’s dat beschikbaar is op de desktop en mobiel over het internet. Het tweede project bestond uit de ontwikkeling van een applicatie als alternatief voor de software die toelaat om de kloktijden uit te lezen en deze te exporteren voor verdere verwerking. Voor de camera applicatie was er eerst gewerkt aan een manier om via de server de beelden geschaald aan te bieden (gebeurt via PHP). Daarna is er met Material Angular een web applicatie gemaakt om beelden te bekijken en de camera’s in de applicatie te beheren. Voor de kloktijden is er gewerkt met de SDK van de fabrikant om een eigen service te voorzien voor een zelfgeschreven web applicatie. Het resultaat is een complete en gebruiksklare applicatie voor de IP camera’s, en een alternatief voor het werken met de kloktijden.
ii
Inhoudsopgave
Dankwoord
i
Abstract
ii
1 Situering 1.1 Camera applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Timesheet applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1 1 2
2 Bespreking 2.1 Probleem . . . . . . . . . . . . 2.1.1 Basis vereisten . . . . . 2.2 Keuze technologieën . . . . . . 2.2.1 Gebruikte Technologieën 2.2.2 Ubuntu . . . . . . . . . 2.2.3 Apache HTTP server . 2.2.4 PHP . . . . . . . . . . 2.2.5 MySQL . . . . . . . . . 2.2.6 Angular.js . . . . . . . 2.2.7 Material Angular . . . . 2.2.8 HTML5 & CSS6 . . . . 2.3 Gebruikte Tools . . . . . . . . 2.4 Functionaliteit . . . . . . . . . 2.4.1 Dashboard . . . . . . . 2.4.2 Configuratie . . . . . . 2.4.3 Logging . . . . . . . . 2.5 Communicatie Componenten .
. . . . . . . . . . . . . . . . .
3 3 4 4 5 5 6 7 8 9 11 12 13 14 14 16 18 20
3 Resultaten 3.1 Applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2 Opstelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22 22 23
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
iii
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
iv
INHOUDSOPGAVE 3.2.1 3.2.2 3.2.3
Opstelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Installatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hardening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4 Besluit A Timesheet Automation A.1 Opstelling . . . . . . . . . . . A.2 WCF REST Service . . . . . . A.2.1 Requests . . . . . . . . A.2.2 Adressen . . . . . . . . A.3 Web UI . . . . . . . . . . . . . A.3.1 Users en Departementen A.3.2 Overzicht en Exporteren A.4 Resultaat . . . . . . . . . . . .
23 24 24 25
. . . . . . . .
26 27 27 27 28 28 29 29 31
B Installatie & Configuratie Servers B.1 Web based camera view and access control . . . . . . . . . . . . . . . . . . . B.1.1 Webserver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . B.1.2 Ubuntu Server Hardening . . . . . . . . . . . . . . . . . . . . . . . .
32 32 32 36
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
Lijst van figuren
2.1 2.2 2.3 2.4
Schermafbeelding Schermafbeelding Schermafbeelding Schermafbeelding
van van van van
het dashboard . . . . . . de configuratie pagina . . het detail van een camera de Log pagina . . . . . .
. . . .
. . . .
. . . .
. . . .
15 16 18 19
3.1
Schema van de opstelling voor de camera applicatie . . . . . . . . . . . . . .
23
A.1 A.2 A.3 A.4
Schema van de opstelling voor Onderdeel voor User selectie . Voorbeeld van het overzicht . Detail van een User . . . . .
27 29 30 30
de timesheet applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
v
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
Hoofdstuk
1
Situering De stage vond plaats bij Inventive Designers [1], een software bedrijf, dat zich bevindt in Antwerpen. Zij richten zich op het helpen van andere organisaties om beter te communiceren met hun klanten door software voor multichannel klantcommunicatie. De projecten waar ik aan gewerkt heb zijn enkel bedoeld voor intern gebruik en niet gerelateerd met de producten van het stagebedrijf. Tijdens de stage is er gewerkt aan twee projecten, een groter project dat het meest uitgebreid beschreven gaat worden en een kleiner project waaraan gewerkt is na het afronden van het eerste project. De situering voor beiden wordt hieronder voorzien. De projecten zijn uitgevoerd door mijzelf als enige ontwikkelaar voor een klant, in dit geval het stagebedrijf.
1.1
Camera applicatie
In het bedrijf stond dit project al langer op de to-do lijst. Hier was vooral vraag naar door de oprichter van het bedrijf. Dit project dient als vervanging van een bestaande webpagina die enkel drie camera’s weergeeft. Dit project omvat een web applicatie creëren om camerabeelden van IP camera’s te bekijken en te beheren. De applicatie moet ook via het web bereikbaar zijn.
1
HOOFDSTUK 1. SITUERING
1.2
2
Timesheet applicatie
Deze timesheet web applicatie is een 2de project dat beantwoordt aan de vraag naar een eenvoudiger alternatief voor het huidige programma dat door de fabrikant van de hardware voorzien wordt. Dit project omvat een web applicatie creëren die via de .NET SDK van de fabrikant de timesheet data van de werknemers kan weergeven en exporteren in een leesbare vorm. Dit project wordt apart beschreven in appendix B maar er wordt af en toe wel naar gerefereerd in het camera project.
Hoofdstuk
2
Bespreking 2.1
Probleem
Het project is ontstaan door de afwezigheid van een applicatie om gemakkelijk de camerabeelden van de aanwezige IP camera’s te kunnen bekijken op de desktop en mobiele apparaten. De grootste vraag was er naar mogelijkheden voor iPad [2] en iPhone [3]. De applicatie moet de mogelijkheid bieden om alle camera’s te bekijken in een simpele en overzichtelijke interface. Ook het beheren van de camera’s zoals toevoegen, aanpassen en verwijderen moet mogelijk zijn. Het beheren moet via de desktop of mobiel kunnen gebeuren. De toegang tot camerabeelden moet ook beperkt worden omwille van privacy, intern en naar de buitenwereld. Het is namelijk niet gewenst dat eender welke persoon de camerabeelden kan bekijken. De toegangscontrole heeft vooral betrekking op camera’s die binnen het gebouw gemonteerd zijn en daarbij de werknemers in beeld brengt. Het beperken van de toegang moet gebeuren via paswoord authenticatie. Het huidige systeem dat gebruikt wordt heeft integratie met LDAP [4]. LDAP wordt intern al gebruikt om authenticatie te voorzien voor meerdere applicaties en platformen. Gezien het beheerd dan niet op verschillende plaatsen moet gebeuren is dit een goede keuze voor implementatie in de applicatie. Het registreren van de toegang tot de applicatie is ook belangrijk, dit ook weer in de context van privacy. Aangezien de camerabeelden heel het gebouw omvatten worden er ook veel mensen zichtbaar gemaakt op de beelden. De toegang tot het bekijken van mensen geeft de mogelijkheid misbruik te maken van deze beelden. Omwille van voorgaande zaken, of eventuele andere toepassingen, is het nodig logging toe te passen zodat er een overzicht van de toegangen gemaakt kan worden. 3
HOOFDSTUK 2. BESPREKING
4
Het beschikbaar maken van de logs in de applicatie is dan ook vereist om deze gemakkelijk te kunnen raadplegen op een overzichtelijke en duidelijke manier. Het filteren van deze logs is ook een begeerde functie om snel de relevante items terug te kunnen vinden. Bovenop de hiervoor vernoemde zaken is de gebruikte bandbreedte ook een aandachtspunt, aangezien de applicatie een groot deel van de tijd mobiel gebruikt zal worden. Er zal veel gebruik gemaakt worden van een mobiel netwerk, wat datakosten met zich meebrengt. Daarom moet er een manier voorzien worden om de redelijk grote afbeeldingen van de camera’s mobiel en bandbreedte vriendelijk te maken.
2.1.1
Basis vereisten
Hieronder een samenvatting van de grootste vragen omtrent het probleem, of met andere woorden de opdracht samengevat: • Web applicatie • Mobiel bruikbaar op e.g. iPad en iPhone • Authenticatie via LDAP • Registreren van toegangen • Maatregelen om de bandbreedte te beperken Deze zijn de grote punten volgens welke de applicatie ontworpen moest worden, maar daar komen nog veel kleine punten bij. (Deze kleinere punten worden aangehaald en verduidelijkt bij de uitwerking ervan in een volgend deel van het document.) Tot zover het probleem dat, ons een ruwe schets geeft van de nodige features in de applicatie.
2.2
Keuze technologieën
In dit onderdeel bespreek ik technologieën die gebruikt zijn, maar ook deze die in aanmerking kwamen. Eigenlijk was dit de eerste stap in de ontwikkeling van de applicatie, de keuze naar technologie. Ik ga vooral de nadruk leggen op de vergelijking tussen twee JavaScript frameworks, namelijk Angular.js en Polymer.
HOOFDSTUK 2. BESPREKING
2.2.1
5
Gebruikte Technologieën
• Ubuntu [5] • Apache HTTP Server [6] • PHP [7] • MySQL [8] • Angular.js [9] • Material Angular [10] • HTML [11] en CSS [12]
2.2.2
Ubuntu
Ubuntu is het besturingssysteem waarop de webserver voor de applicatie geïnstalleerd is. Gemaakte keuze De keuze om dit besturingssysteem te gebruiken lag niet zo zeer bij mezelf, maar bij het bedrijf (Inventive Designers) waar de stage plaatsvond, deze Linux Distributie op een virtuele machine aanbood. Versie De versie van Ubuntu die gebruikt wordt loopt gelijk met de LTS (Long Time Support) versie. Gebruikte versie: 14.04 LTS Dit is ook de laatste versie van de Ubuntu Server. Het server type van de distributie is headless en daarom dus de ideale versie voor een server. Alternatieven Windows als besturingssysteem biedt ook de LAMP stack aan, maar zoals aangehaald zal worden in onderdeel 2.3 kon deze niet gebruikt worden.
HOOFDSTUK 2. BESPREKING
6
Onderbouw keuze Ook al lag de keuze niet bij mezelf, toch sta ik er volledig achter, dit door eigen ervaring en de reputatie van het besturing systeem. De grootste voordelen zijn de open source opbouw en de lange ondersteuning die verbonden is aan het besturingssysteem. Ook het beschikbaar zijn van juiste software, de moeilijkheidsgraad om deze te installeren en te gebruiken spelen een grote rol. Voor de applicatie zijn bijvoorbeeld Apache, MySQL en PHP gebruikt, deze packages kunnen zonder probleem als een totaal pakket of individueel geïnstalleerd worden. De installatie gebeurt op Ubuntu en andere Linux besturing systemen door het pakket van de LAMP Stack (Linux Apache MySQL PHP) te installeren. Bij het installeren van de server zelf wordt er bij Ubuntu ook al meteen de mogelijkheid gegeven om dit pakket mee te installeren.
2.2.3
Apache HTTP server
Aangezien de applicatie web gebaseerd is, hebben we een web server nodig waarop we deze kunnen implementeren. Bij deze is er gekozen voor de Apache web server omdat die op Ubuntu gemakkelijk te voorzien is en ik er al voor simpele websites met gewerkt heb. Apache biedt daarnaast ook de modules aan die gebruikt zijn in de applicatie. Versie De versie die gebruikt is komt neer op de laatste release van Apache. Deze versie voorziet ons van alle nodige modules. Gebruikte versie: 2.4 Als deze versie vergeleken wordt met de vorige, zijn de grootste relevante veranderingen een paar authenticatie modules die verwijderd zijn. Deze functionaliteit is opgenomen in andere modules. Alternatieven Een andere veelgebruikte webserver op Linux systemen is nginx. Deze had een goed alternatief geweest.
HOOFDSTUK 2. BESPREKING
7
Onderbouw keuze Voor apache was er vanuit het bedrijf al een goed voorbeeld voorzien voor LDAP authenticatie. Aangezien LDAP al nieuw voor me was heb ik verder gewerkt met Apache.
2.2.4
PHP
PHP (PHP: Hypertext Preprocessor) is vereist in de applicatie om als simpele brug te dienen naar de database, maar misschien nog belangrijker zal PHP ook het schalen van afbeeldingen aan de server zijde verrichten. Het schalen van de afbeeldingen gebeurt door middel van de GD Graphics Library. [13] Deze library laat onder andere toe om de grootte van een afbeelding aan te passen, maar heeft nog veel meer mogelijkheden. Voor onze toepassing gebruiken we PHP ook als een brug om de afbeeldingen mee aan te bieden. De afbeeldingen die op het interne netwerk beschikbaar zijn worden op deze manier aan de buitenwereld beschikbaar gemaakt. Versie De versie van PHP is de laatste release. Het enige waar rekening mee gehouden moet worden is dat de nodige PHP bibliotheken compatibel zijn met de huidige versie van PHP. Gebruikte versie: PHP 5.5.9 Als alle packages geïnstalleerd zijn via de package manager zullen de correcte / compatibele versies automatisch gebruikt worden. Dit geldt ook voor andere geïnstalleerde packages. Alternatieven Ook voor PHP zijn er een aantal server-based alternatieven. Een die bij mijzelf direct opkwam was Node.js [14]. Node.js werkt met een ander principe dat mij niet zo zeer aansprak voor deze toepassing. Dit is dus meer een persoonlijke keuze. Er wordt bij Node.js een server opgezet die altijd wacht op een request, PHP daartegen gaat een individueel script uitvoeren. Het schalen van afbeeldingen is ook perfect mogelijk met Node.js en vele andere server-based opties.
HOOFDSTUK 2. BESPREKING
2.2.5
8
MySQL
MySQL is gebruikt als database voor de applicatie. De database slaagt de instellingen van de camera’s en logs op. Deze database is onderdeel van de LAMP Stack en wordt veel gebruikt voor web applicaties. Het werken met MySQL en het opbouwen van query’s is ook al tijdens de lessen aan bod gekomen. Door de al vergaarde kennis over deze database was dit mijn eerste idee. Het beheren van een MySQL database is ook gekend door de mensen die de applicatie moeten onderhouden voor het bedrijf. Doordat dit database type gekend is, is er bij enige problemen of veranderingen aan de applicatie al minder werk nodig. Een volledig nieuwe soort van database waar zij nog geen kennis mee hebben gemaakt zou dan duurder zijn in onderhoud. Voor de manier van implementeren bij deze opdracht moet de database ook op een headless machine geïnstalleerd worden, dit geeft de mogelijkheid MySQL configuratie via CLI te leren kennen. Het werken via / en begrijpen van de console van deze zaken spreekt mij ook erg hard aan. Versie De gebruikte versie is net zoals PHP de versie die voorzien is via de package manager en heeft daarnaast geen speciale modules of uitbreidingen nodig voor deze toepassing. Gebruikte versie: mysqld Ver 5.5.43 Alternatieven Later tijdens het ontwikkelen van de applicatie ben ik terecht gekomen bij MongoDB [15], een NoSQL database technologie die me ook wel zeker interessant leek. NoSQL werkt met een ander principe dan dat van de tabellen in SQL. De manier van data opslag bij NoSQL kan verschillende vormen aannemen waardoor het voor bepaalde operaties sneller of trager kan zijn dan SQL. MongoDB leek vooral interessant omdat deze technologie nieuw is voor mij en dit database type meer een meer gebruikt wordt. Voor deze opdracht was MySQL al in gebruik genomen maar voor een eventueel volgend project lijkt het verstandig om NoSQL in het achterhoofd de houden.
HOOFDSTUK 2. BESPREKING
2.2.6
9
Angular.js
In dit onderdeel zal er eerst, zoals bij de vorige onderdelen, uitleg gegeven worden over de gemaakte keuze en de versie gebruikt in de applicatie. Daarnaast wordt ook de vergelijking gemaakt met andere opties en wordt uitgelegd waarom die niet gekozen zijn. In het volgende onderdeel 2.2.7 zal er deels over dezelfde alternatieven gesproken worden, dit omdat bij deze technologieën sommige van de door ons gekozen onderdelen gecombineerd worden en als één framework aangeboden worden. Angular.js Het gebruiken van een JavaScript framework wordt tegenwoordig meer en meer gedaan, dit omdat het veel voordelen heeft en handige functies kan aanbieden. Voor deze applicatie is Angular.js gebruikt. Dit framework biedt features aan zoals data binding, directives en de mogelijkheid om andere modules toe te voegen. Modules kunnen zelf geschreven zijn of door anderen online gedeeld zijn. Veel van deze modules zijn beschikbaar via tools zoals npm [16] en bower [17]. Installatie Het Angular framework kan op verschillende manieren geïnstalleerd worden, daarvoor zijn npm of bower een gemakkelijke optie. Het installeren via deze tools geeft ook de mogelijkheid de frameworks met alle libraries te installeren vanuit de configuratie files, op developement en zelfs productie apparaten. Ook het updaten van de frameworks kan zo gemakkelijk gebeuren. (Beide genoemde tools bieden bijvoorbeeld de update functie aan.) Daarnaast zijn er ook downloads beschikbaar op de officiële site of kan er gebruik gemaakt worden van de CDN versies bij veel van de grote frameworks. Versie Gebruikte versie: angular Ver 1.3.15 De versie is bepaald door Material Angular en kan verschillen mocht er een nieuwe versie beschikbaar zijn bij het updaten via e.g. bower. Material Angular legt via de configuratie files een minimum Angular.js versie op van 1.3.0.
HOOFDSTUK 2. BESPREKING
10
Alternatieven Polymer Het alternatief dat voor Angular.js met Material Angular het beste in aanmerking komt is het Polymer Project [18]. Dit framework biedt veel functies aan die ook het gekozen framework voorziet. Polymer wordt vaak gebruikt omdat deze databinding ondersteund. Databinding wil zeggen dat de variabele in de achterliggende code in het UI gebruikt kunnen worden. Het Polymer Project biedt op het vlak van beschikbare elements en design hetzelfde als Material Angular, daarover meer in een eigen sectie 2.2.7. In plaats van directives en modules bij Angular wordt er bij Polymer gebruik gemaakt van Custom elements. Deze elements worden zowel voor UI onderdelen als andere herbruikbare functies gebruikt. Deze Custom elements vallen onder de categorie van Web components. Een voorbeeld van een custom element is e.g.
Dit is een element dat asynchroon data van een locatie kan verkrijgen. Geen Framework Er kan ook zonder framework gewerkt worden. Deze manier van werken biedt geen speciale functies zoals databinding aan, maar heeft als voordeel dat het geen bestanden als deel van de framework nodig heeft. Aangezien databinding niet mogelijk is moeten alle velden individueel een waarde krijgen in de JavaScript code, dit kan resulteren in een minder overzichtelijke code structuur. Bootstrap Bootstrap is een framework dat als belangrijkste feature responsive design aanbiedt. (Repsonsive design staat voor het reageren van de pagina’s op de grootte van het browser venster zodat de inhoud correct wordt weergegeven.) Daarnaast heeft Bootstrap ook een groot aantal aan eigen elementen. Als onderdeel van deze elementen bied Bootstrap Glyphicons aan, dit zijn iconen die in een applicatie gebruikt kunnen worden. Data binding is niet voorzien in Bootstrap.
HOOFDSTUK 2. BESPREKING
11
Dit framework bestaat ook als een module voor Angular.js en is verwerkt in het project. E.g. twee plaatsen waar elementen van Bootstrap gebruikt zijn in het project zijn, het dropdown menu rechtsboven in de toolbar en de kalenders als onderdeel van de log filter. Web Components Web components worden bij Angular.js en Material Angular niet gebruikt, deze worden op een andere manier toegepast dan Angular features en worden daarom niet verder besproken. Onderbouw keuze Een framework ging zeker gebruikt worden, aangezien daarmee resposive design veel beter te realiseren is. Voor dit project is er gekozen voor Material Angular en daarbij dus ook Angular.js omdat er in een groepsproject al eens met het Polymer project gewerkt was. In het groepsproject was dit niet mijn onderdeel maar, heb ik hierbij wel geholpen en zo al de kans gehad om het Polymer project al wat te verkennen. Tijdens dat project is gebleken dat er voor het Polymer Project veel documentatie ontbreekt en er in online communities weinig antwoorden terug te vinden zijn. Als men daartegen naar Angular.js kijkt, valt het op dat er veel meer documentatie, voorbeelden, modules, directives en communitie help te vinden is. Dit is waarschijnlijk te wijten aan het feit dat het Polymer Project zich nog in een ontwikkelingsfase bevindt. Daarnaast is Angular al meer gebruikt, ook omdat het al langer bestaat dan het Polymer Project. De keuze voor Material Angular is dus gemaakt om twee redenen: • Het werken met een technologie die nieuw was voor mij. • De aanwezigheid en de hoeveelheid van de documentatie.
2.2.7
Material Angular
Material Angular is een project dat Google Material Design naar het web brengt, in dit geval is dit gebouwd op het Angular.js framework. Naast implementatie van Material Design, is Material Angular ook responsive en daarom een goede keuze voor applicaties die ook mobiel gebruikt worden. Responsiveness werkt op zich al heel goed met de elementen die door Material Angular voorzien worden, voor andere elementen zijn er ook vele oplossingen voorzien.
HOOFDSTUK 2. BESPREKING
12
Voor de layout zijn er Angular.js directives voozien die e.g. de richting van de layout bepaalt (Rijen of kolommen) of de uitlijning van de Child elementen. Versie Gebruikte versie: angular-material Ver 0.7.1 Voor het afgerond project was dit de versie van Angular Material. Het project is nog volop in ontwikkeling en krijgt regelmatig updates. De updates hebben sinds het afronden van het project ook nog een aantal extra elementen toegevoegd, sommige van deze elementen zijn gebruikt in het ander project dat na dit project werd uitgevoerd. (Dit 2de project wordt nog verder beschreven in een eigen onderdeel) Alternatieven Het Polymer Project is in dit geval ook weer een goed alternatief, het voorziet ook Material Design en responsiveness. Van de elementen voorzien door Material Angular zijn er ook veel beschikbaar in dit project. Het grootste verschil is in dit geval ook het feit dat er gebruikt gemaakt wordt van Web Components die een andere werkwijze hebben. Onderbouw Keuze De keuze voor Material Angular is dezelfde als de keuze die aangehaald werd in Angular.js 2.2.6. De reden hiervan is, zoals hiervoor al aangehaald, dat Material Angular en Angular.js samen nodig zijn om ze te vergelijken met het Polymer Project.
2.2.8
HTML5 & CSS6
De basis bouwstenen voor het web zijn HTML en CSS. Daarom is het logisch dat deze gebruikt zijn. Deze zijn voor de andere gebruikte technologïen ook een vereiste. Dat ze hier vermeld worden, is vooral om duidelijk te maken dat er gebruikt gemaakt wordt van de laatste versies en hun functies. HTML Voor HTML is er niet zozeer een voorbeeld, maar de laatste versie laat ons toe om indien nodig canvas features te gebruiken in plaats van bijvoorbeeld Adobe Flash [19] of Microsoft
HOOFDSTUK 2. BESPREKING
13
Silverlight. [20] Versie Gebruikte versie: HTML 5 Voor deze laatste features is dit de versie die vereist is. CSS CSS is nodig voor de layout, maar de laatste versie biedt ook de mogelijkheid voor effecten om bijvoorbeeld transities te voorzien en het gebruik van de applicatie in het algemeen aangenamer te maken. Ook het gebruikte framework (Material Angular) maakt op zich veel gebruik van animaties en styling voor de componenten die het aanbiedt. Versie Gebruikte versie: CSS 6 Dit is de versie die het gebruik van de effecten zelf kan voorzien en hiervoor niet samen met JavaScript gebruikt moet worden.
2.3
Gebruikte Tools
Voor het creeëren van de camera applicatie zijn er verschillende tools gebruikt. Deze waren bij voorkeur open source. Voor het werken met HTML en JavaScript files is er vooral gebruik gemaakt van Brackets [21], een editor voor vele web gerelateerde talen geschreven in JavaScript. Voor PHP is er Notepad++ [22] gebruikt, deze geeft voor vele talen een simpele code completion die het ontwikkelen vlotter en aangenamer maakt. De applicatie is tijdens de ontwikkeling getest in een virtuele machine met Ubuntu Server waarop de nodige applicaties geinstalleerd zijn. Dit houdt als een minimum de LAMP stack in. De software hiervoor was Oracle VM VirtualBox [23] Voor het testen van de applicatie tijdens ontwikkeling was er eerst gekozen voor een Apache server op Windows samen met PHP en een MySQL database via de EasyPHP Development
HOOFDSTUK 2. BESPREKING
14
Server [24]. Deze biedt de zelfde services aan als de LAMP stack voor Ubuntu, maar voldeed niet voor onze toepassing. De implementatie van het inloggen in onze applicatie maakt gebruik van de auth_form module voor Apache. Maar tijdens het testen is gebleken dat deze module voor Windows incorrect gecompileerd is en niet gebruikt kon worden. Daarom is er gekozen om over te stappen naar een virtuele opstelling met de exacte software die gebruikt gaat worden voor de applicatie.
2.4
Functionaliteit
De applicatie bestaat uit drie hoofd pagina’s met elk hun eigen doel, daarbij zijn er ook een aantal algemene pagina’s nodig om de applicatie bruikbaar te maken. Hoofdpagina’s Dashboard De pagina waar de camera’s bekeken kunnen worden. Configuratie Het toevoegen, verwijderen en configureren gebeurt hier. Logging Alle aanpassingen aan de camera’s en het bekijken ervan wordt hier weergegeven. Andere Pagina’s Login Pagina die een login formulier aanbiedt in de zelfde stijl als de rest van de applicatie. (Door een apache module aangeboden.) 401 Unauthorized Eigen error pagina met links om terug naar het dashboard te gaan.
2.4.1
Dashboard
Het dashboard wordt bedient door een menu dat opties en een lijst met de camera’s weergeeft.
HOOFDSTUK 2. BESPREKING
15
Figuur 2.1: Schermafbeelding van het dashboard Opties In het opties onderdeel van het menu kunnen de volgende dingen geconfigureerd worden: De grootte van de afbeelding in de webpagina. (Onafhankelijk van de resolutie.) De resolutie van de gedownloade afbeeldingen. Deze wordt bij de server geschaald. Op deze manier moet er minder data verstuurd worden, wat optimaal is voor mobiel gebruik. De snelheid waarmee nieuwe afbeeldingen worden opgehaald. Dit gaat ook de hoeveelheid data beperken. Een schakelaar die wisselt tussen manueel vernieuwen van de afbeeldingen of met een tijdsinterval. In deze modus komt er ook een manuele vernieuw knop tevoorschijn rechts onderaan. Camerabeelden De camerabeelden worden in een raster weergegeven en hebben elk de naam van de camera links boven over de afbeelding. Een camerabeeld kan ook uitvergroot worden door te erop te dubbelklikken of via touch met een double tap. Terugkeren naar het overzicht kan op dezelfde manier of door uit de afbeelding te klikken.
HOOFDSTUK 2. BESPREKING
2.4.2
16
Configuratie
Op de configuratie pagina krijg je een lijst van de camera’s. Elke camera heeft een voorbeeld zodat een probleem snel opgemerkt kan worden. (Of een melding bij geen verbinding.) Bovenaan de pagina wordt er ook weergegeven hoeveel camera’s er geconfigureerd zijn en hoeveel daarvan zichtbaar zijn in het dashboard.
Figuur 2.2: Schermafbeelding van de configuratie pagina Het detailvenster is hetzelfde voor het toevoegen als voor het aanpassen. Het voorziet de nodige velden voor een werkende camera. Er is eveneens een knop om de verbinding met de camera te testen tijdens het aanmaken of aanpassen.
HOOFDSTUK 2. BESPREKING
17
Het venster bestaat uit: Naam Naam van de camera. IP IP adres van de camera op het interne netwerk. Test knop Geeft in een notificatie weer of er verbinding gemaakt kan worden met de camera op het gegeven IP adres. Index De index van de camera bepaalt de volgorde op het dashboard. De eerste vrije index wordt voorgesteld bij het toevoegen van een camera. Beschrijving Een optionele beschrijving. Authenticatie: Gebruiker Gebruiker voor de http beveiliging. (Optioneel) Authenticatie: Wachtwoord Wachtwoord voor de http beveiliging. (Optioneel) Enable Checkbox om de camera beschikbaar te maken. Schakelaar om de camera te kunnen verwijderen Deze schakelaar verandert de huidige actie van aanpassen naar verwijderen. Hierna volgt nog een dialoog voor bevestiging. Alle velden worden gevalideerd bij het sluiten van het venster. Visuele feedback wordt voorzien door Material Angular.
HOOFDSTUK 2. BESPREKING
18
Figuur 2.3: Schermafbeelding van het detail van een camera
2.4.3
Logging
Logs worden opgeslagen voor de toegang tot de beelden en alle wijzigingen aan de configuratie. Filteren van deze logs is ook mogelijk op verschillende criteria. Deze zijn de periode, gebruiker of inhoud. Het aantal logs in de lijst kan ook gekozen worden.
HOOFDSTUK 2. BESPREKING
19
Figuur 2.4: Schermafbeelding van de Log pagina Voor de toegangscontrole worden de bekeken camera’s als één lijst in de logs weergegeven per sessie. Voor alle aanpassingen aan de camera’s wordt een nuttige log opgeslagen, mocht de aanpassing omgekeerd moeten worden. De volgende gegevens worden opgeslagen: Aanmaken De gegevens ingevuld bij het aanmaken. Aanpassen De gegevens voor de aanpassingen en de uitkomst van de aanpassing. Verwijderen De gegevens van de camera die verwijderd is. Andere Pagina’s De andere pagina’s bieden niets extra aan dan gelijkaardige stijl en links naar het dashboard.
HOOFDSTUK 2. BESPREKING
2.5
20
Communicatie Componenten
In dit onderdeel zal er worden uitgelegd hoe de gebruikte technologieën samenwerken en onderling verweven zijn om de applicatie op een juiste manier aan te bieden. Dit gaat van basisbouwstenen zoals de cookies in de browsers tot de onderdelen van het besturing systeem die vitaal zijn voor de applicatie. Angular & Apache Cookies worden voor verschillende zaken gebruikt in de applicatie. Zowel de applicatie zelf als Apache in de achtergrond maken er gebruik van. De applicatie zelf slaat via cookies de persoonlijke voorkeuren op per gebruiker. Als bijkomende functie worden cookies gebruikt om de gebruiker te verwittigen bij een gefaalde login poging. Apache gaat zelf ook cookies gebruiken voor de login sessie. Omdat de toegangscontrole gebeurt via de mod_auth_core module zal deze op deze manier de credentials (geëncrypteerd via de module mod_session_crypto) opslaan. Door middel van de cookies kunnen we in de applicatie de naam van de ingelogde gebruiker opvragen. Met de volgende apache modules wordt de toegang verleend tot bepaalde mappen op de server. mod_authn_core De basis module voor authenticatie. mod_auth_form Via deze module kan Apache een HTML formulier aanbieden (met eigen styling) om mee in te loggen. mod_session; mod_session_crypto, mod_session_cookie, mod_session_dbd Modules nodig om de sessie met een geëncrypteerde cookie op te slagen. mod_request Een vereiste voor de LDAP module. mod_authnz_ldap Integratie met het LDAP protocol. PHP & MySQL De connectie met de MySQL database gebeurt via PHP scripts. Om op een veilige manier verbinding te maken met de database moet er ook rekening gehouden worden met zaken zoals SQL Injectie.
HOOFDSTUK 2. BESPREKING
21
Om injectie te voorkomen is er gewerkt met PDO Objecten bij het verbinden met de database. Apache & ModSecurity Voor de veiligheid naar de buitenwereld toe moet er beveiliging opgezet worden. Daarom is de server gehardened met behulp van een Apache module voor veiligheid. ModSecurity is Web Application Firewall in de vorm van een apache module. Deze module geeft de mogelijkheid om regels toe te voegen. Er zijn regels die van de module zelf komen of je kan deze zelf opstellen. OWASP [25] biedt een groep met regels aan voor ModSecurity. OWASP is mij al bekend van een presentatie tijdens de opleiding. Dit project is een goed praktisch voorbeeld van OWASP en toont mij het nut van deze module aan in dit project. Dit kan beschreven worden als het beschermen tegen alle veiligheidsrisico’s gedefinieerd in de regels.
Hoofdstuk
3
Resultaten 3.1
Applicatie
De applicatie biedt een platform aan om, via het dashboard, de camera’s op een overzichtelijke manier te bekijken. En laat via een configuratie pagina toe de camera’s in de applicatie ook te beheren. Ook wordt er logging toegepast voor de toegangen en aanpassingen aan de configuratie. De verschillende pagina’s zijn beschreven in sectie 2.4 van de bespreking.
22
23
HOOFDSTUK 3. RESULTATEN
3.2
Opstelling
Material Angular
Apache Http Server
Ubuntu Server
PHP
...
MySQL
Figuur 3.1: Schema van de opstelling
3.2.1
Opstelling
De applicatie is volgens de bovenstaande opstelling geïmplementeerd bij het stagebedrijf en ook in gebruik genomen. Ubuntu server Het besturingssysteem waarop de webserver geïnstalleerd is. Het besturingssysteem is ook Hardened (Dit wil zeggen dat er voor de beveiliging extra maatregelen genomen zijn.) Apache server De webserver waarop de PHP module is ingeschakeld. Ook wordt de LDAP authenticatie via een Apache module gedaan. Deze is ook Hardened voor extra veiligheid. PHP Deze wordt gebruikt om verbinding te maken met de camera’s op het interne netwerk en
HOOFDSTUK 3. RESULTATEN
24
zo de beelden aan te bieden. De beelden worden ook door het script geschaald voor deze naar de applicatie gestuurd worden. Database acties gebeuren ook via PHP scripts. Deze is ook Hardened voor extra veiligheid. MySQL Database In de database wordt de configuratie voor alle aanwezige camera’s opgeslagen alsook alle logs voor de applicatie. Camera’s De camera’s op het netwerk. Deze moeten de beelden kunnen aanbieden als aparte afbeeldingen voor een bepaald tijdstip. Deze beelden kunnen dan via HTTP benaderd worden vanuit het PHP script. Angular Web Applicatie Interface van de applicatie zoals uitgelegd in 2.4.
3.2.2
Installatie
De installatie van de applicatie is grondig uitgelegd (voor een Ubuntu besturingssysteem) en en terug te vinden in appendix B. Om de applicatie te kunnen gebruiken moet deze toegang hebben tot het netwerk met de camera’s. De camera’s moeten ook via hetzelfde principe de beelden kunnen aanbieden.
3.2.3
Hardening
Het hardenen van de server bevat het aanzetten van automatische updates, de netwerktoegang beveiligen, de geïnstalleerde pakketten correct instellen en ModSecurity configureren. Daarnaast kan er nog veel extra gedaan worden maar dat is in dit project niet gebeurd. Alle stappen om de server te hardenen zijn terug te vinden in de installatie handleiding (bijgevoegt als appendix B).
Hoofdstuk
4
Besluit Voor het project zijn de doelstellingen behaald door alle vereiste functies te verwerken in de applicatie. Deze zijn vooral: • Mobiel beschikbaar • Weinig dataverbruik. • Beschikbaar via een webbrowser. De applicatie, een User Interface voor camera’s werkt en is reeds in gebruik bij Inventive Designers. Tijdens het ontwikkelproces zijn geen eisen opgelegd vanuit het bedrijf, wat betekent dat ik alle technologieën zelf gekozen heb. Ik heb zo veel mogelijk gebruik proberen te maken van Open Source software. Regelmatig ben ik problemen tegen gekomen, wat eigen is aan software ontwikkeling, maar voor mij persoonlijk was dit ook een stimulans op deze op te lossen en bij te leren. Na afloop van deze stage kan ik dan ook zeggen dat ik veel bijgeleerd heb over werken met JavaScript frameworks, vooral Angular.js. Door Material Angular te leren kennen in dit project was het gemakkelijk om dit bij het volgende project snel en efficiënt te implementeren. Ook het beveiligen (Hardenen) van de server en services daarop, zijn zaken die zeker van pas kunnen komen in de toekomst. Tijdens het beveiligen ben ik ook OWASP voor ModSecurity tegengekomen wat mij dan weer een praktisch voorbeeld gaf van wat ons door gastsprekers verteld werd. 25
Bijlage
A
Timesheet Automation Naast de web applicatie voor de camera’s is er ook gevraagd naar een applicatie die het werken met de data van de tijdsregistratie gemakkelijker maakt. De tijdsregistratie gebeurt via Net2 van Paxton [26]. Dit is de software die gebruikt wordt voor de toegangscontrole en tijdsregistratie bij het stagebedrijf. Deze software is beschikbaar voor Windows (zowel client als server) en bestaat uit een aantal programma’s om het systeem te beheren en gebruiken. Voor sommige toepassingen hebben gebruikers niet al deze programma’s nodig en is een alternatief welkom. Daarom was er als 2de project gevraagd om, via de .NET SDK voorzien door Paxton, een web applicatie te ontwikkelen die als alternatief kan dienen voor het grote programma van Paxton zelf. Dit alternatief kan dan eveneens gebruikt worden op niet Windows apparaten.
26
27
BIJLAGE A. TIMESHEET AUTOMATION
A.1
Opstelling
Net 2 Server
Rest Service Net2 SDK
Web UI
... 
