<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Beiträge von Malek Morad - Mobile USTP MKL</title>
	<atom:link href="https://mobile.fhstp.ac.at/author/it221514/feed/" rel="self" type="application/rss+xml" />
	<link>https://mobile.fhstp.ac.at/author/it221514/</link>
	<description>Die &#34;Mobile Forschungsgruppe&#34; der USTP, sie  sammelt hier alles zu den Themen Design, UX und Entwicklung mobiler Applikationen</description>
	<lastBuildDate>Sun, 26 Mar 2023 18:54:45 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://mobile.fhstp.ac.at/wp-content/uploads/2025/03/icon-120x120.webp</url>
	<title>Beiträge von Malek Morad - Mobile USTP MKL</title>
	<link>https://mobile.fhstp.ac.at/author/it221514/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>JWT Authentication mit Nodejs (Express)</title>
		<link>https://mobile.fhstp.ac.at/workshop/jwt-authentication-mit-nodejs-express/</link>
		
		<dc:creator><![CDATA[Malek Morad]]></dc:creator>
		<pubDate>Sun, 26 Mar 2023 18:32:01 +0000</pubDate>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Dokumentation]]></category>
		<category><![CDATA[Workshop]]></category>
		<category><![CDATA[Authentifizierung]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JWT]]></category>
		<category><![CDATA[Node.js]]></category>
		<category><![CDATA[Webentwicklung]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=10915</guid>

					<description><![CDATA[<p>Da die Themen Authentifizierung und Authorisierung weiterhin von außerordentlich großer Wichtigkeit sind und im laufe des Bachelor- und Masterstudiums angeteased bzw. vorgestellt wurden, habe ich beschlossen dazu ein Workshop zu machen. In diesem Workshop wurden grundsätzlich folgende Themen behandelt: Mir war besonders wichtig, dass Aspekte wie &#8220;Wie funktioniert ein JWT (anhand eines Beispiels!)&#8221; und &#8220;Warum <a class="read-more" href="https://mobile.fhstp.ac.at/workshop/jwt-authentication-mit-nodejs-express/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/workshop/jwt-authentication-mit-nodejs-express/">JWT Authentication mit Nodejs (Express)</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Da die Themen Authentifizierung und Authorisierung weiterhin von außerordentlich großer Wichtigkeit sind und im laufe des Bachelor- und Masterstudiums angeteased bzw. vorgestellt wurden, habe ich beschlossen dazu ein Workshop zu machen. In diesem Workshop wurden grundsätzlich folgende Themen behandelt:</p>



<ul class="wp-block-list">
<li>Was ist JWT?</li>



<li>Wie wird JWT angewandt?</li>



<li>Wie setzt sich ein JWT zusammen?</li>



<li>Was ist O Auth (2.0)?</li>



<li>Kleine Umsetzung mit Node.Js (+Express)</li>
</ul>



<p>Mir war besonders wichtig, dass Aspekte wie &#8220;Wie funktioniert ein JWT (anhand eines Beispiels!)&#8221; und &#8220;Warum JWT&#8221; genauer betrachtet und erläutert werden, weshalb besonders auf visuelle Darstellungen zurückgegriffen wurde.</p>



<p>Das Beispiel-Projekt kann <a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/node_express_jwt_beispiel_morad.zip">hier</a> heruntergeladen werden.</p>



<h2 class="wp-block-heading">Wie funktioniert ein JWT?</h2>



<p>Hier wurde anhand eines Beispieles demonstriert, wie ein simpler JWT workflow aussehen kann, um eingeloggte User zu authentifizieren. <br>Die Abbildung zeigt folgenden Workflow:</p>



<ol class="wp-block-list">
<li>Bereits registrierter User versucht sich mit Login Daten einzuloggen.</li>



<li>Hat der User korrekte Login Daten mitgesendet, so wird er &#8220;eingeloggt&#8221;. Sprich: ein JWT wird generiert und beim Response zurückgesendet.</li>



<li>Der Client (Browser, App, etc.) speichert nun den JWT und sendet diesen bei jedem weiteren Request absofort mit, um sich zu authentifizieren bzw. authorisieren. Ist der JWT valide, so wird dem Client Zugang zur jeweiligen Resource gewährt.</li>
</ol>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-7.png"><img fetchpriority="high" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-7.png" alt="" class="wp-image-10916" width="577" height="364"/></a><figcaption class="wp-element-caption">Abbildung 1: Beispiel für eine einfache Anwendung von JWT zum Authentifizieren</figcaption></figure></div>


<h2 class="wp-block-heading">Warum JWT?</h2>



<p>Viele Studierende wissen, was ein JWT ist und wie er ungefähr funktioniert, aber wieso eigentlich ausgerechnet ein Json Web Token und nicht beispielsweise SAML oder eine andere Authentifizierungsmethode?</p>



<p>Dazu wurde die Struktur von JWT und SAML verglichen, um auch hier visuell Darzustellen, welche Besonderheiten JWT vorweist und warum/wann diese Authentifizierungsmethode überhaupt sinn macht.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-8.png"><img decoding="async" width="686" height="360" data-id="10917" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-8.png" alt="" class="wp-image-10917"/></a></figure>



<figure class="wp-block-image size-large"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-9.png"><img decoding="async" width="689" height="361" data-id="10918" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-9.png" alt="" class="wp-image-10918"/></a></figure>
<figcaption class="blocks-gallery-caption wp-element-caption">Abbildung 2: Ein Vergleich zwischen JWT und SAML</figcaption></figure>



<h2 class="wp-block-heading">Aufsetzen und Umsetzen mit Node Express</h2>



<p>Für das schnelle Umsetzen eines JWT Authentifizierungssystems habe ich mich für das Aufsetzen einer kleinen Node (Express) Applikation entschieden, da dass Erfahrungsgemäß sehr flott geht und schnell getestet werden kann.</p>



<p>Folgende Entwicklungsumgebung, Tools, Technologien und NPM Pakete sind hierfür verwendet worden, wobei einige optional sind:</p>



<ul class="wp-block-list">
<li>VSC</li>



<li>Node</li>



<li>XAMPP (für die lokale DB)</li>



<li>Postman</li>



<li>Angular CLI (global installiert)</li>



<li>NPM packages:<ul><li>express</li></ul><ul><li>jsonwebtoken</li></ul><ul><li>dotenv</li></ul><ul><li>bcryptjs</li></ul><ul><li>mysql2</li></ul><ul><li>cookie-parser</li></ul><ul><li>nodemon -D</li></ul><ul><li>typescript -D</li></ul><ul><li>ts-node -D</li></ul><ul><li>@types/node -D</li></ul><ul><li>@types/bcryptjs -D</li></ul><ul><li>@types/jsonwebtoken -D</li></ul>
<ul class="wp-block-list">
<li>@types/mysql2</li>
</ul>
</li>
</ul>



<h3 class="wp-block-heading">Struktur</h3>



<p>Nach ein paar wenigen Befehlen und installation der jeweiligen Tools und Packages wurde folgende Struktur angelegt:</p>



<figure class="wp-block-image size-large"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-10.png"><img loading="lazy" decoding="async" width="1142" height="800" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-10-1142x800.png" alt="" class="wp-image-10926"/></a><figcaption class="wp-element-caption">Abbildung 3: die Struktur</figcaption></figure>



<p>Wie in Abbildung 3 in Code-Zeile 17 und 18 gut zu sehen ist, existieren hauptsächlich zwei Routen: die &#8220;User&#8221; und &#8220;Auth&#8221; Route. In der User Route werden Aktionen wie Register/Login durchgeführt, während in der Auth Route die Authentifizierung und Authorisierung stattfinden.</p>



<h3 class="wp-block-heading">Konfiguration</h3>



<p>In der unten angeführten Abbildung 4 wird der cookie-parser konfiguriert, für die Nutzung von Http-Only Cookies. Mehr dazu etwas später.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-11.png"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-11.png" alt="" class="wp-image-10928" width="447" height="243"/></a><figcaption class="wp-element-caption">Abbildung 4: App-config</figcaption></figure></div>


<h3 class="wp-block-heading">User &#8211; Endpoint</h3>



<p>Wie bereits erwähnt und in Abbildung 5 dargestellt, gibt es zwei Routes: &#8220;/register&#8221; &amp; &#8220;/login&#8221;. In Abbildung 6 hingegen wird demonstriert, wie eine vereinfachte form der Logik für ein login und register aussehen kann.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-18.png"><img loading="lazy" decoding="async" width="653" height="671" data-id="10940" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-18.png" alt="" class="wp-image-10940"/></a><figcaption class="wp-element-caption">Abbildung 5: User-Endpoint (Route)</figcaption></figure>



<figure class="wp-block-image size-full"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-19.png"><img loading="lazy" decoding="async" width="685" height="825" data-id="10936" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-19.png" alt="" class="wp-image-10936"/></a><figcaption class="wp-element-caption">Abbildung 6: UserService (Logik)</figcaption></figure>
</figure>



<p>Beim registrieren wird eine User Entity erstellt und mit den vom Client abgesendeten Daten befüllt. Anschließend wird der User registriert, indem die Entity den tieferen Schichten übergeben und schlussendlich in die Datenbank gespeichert wird.</p>



<p>Im &#8220;/login&#8221; Endpoint (Route) wird zuerst überprüft, ob der User existiert. Existiert der User, so wird das gehashte Passwort aus der DB mit dem Passwort vom Client verglichen, ob beide übereinstimmen. Stimmen beide Passwörter überein, so wird ein JWT und ein Refresh Token generiert. Der JWT wird im Body der Response, und der refresh-token im Header als HTTP-Only Cookie angehängt, sodass nur der Server diesen wieder auslesen kann.</p>



<h3 class="wp-block-heading">Auth &#8211; Endpoint</h3>



<p>Die Auth Route ist für das Authentifizieren und generieren von neuem Refresh Token. Wie in Abbildung 7 zu sehen ist, wird bei &#8220;/&#8221; der &#8220;Bearer-Token&#8221;, sprich der JWT aus dem Request gezogen und validiert. Bei &#8220;/refresh&#8221; wird zuerst der HTTP-Only Cookie validiert und im Falle, dass er valide ist, gleich ein neuer Refresh-Token und JWT generiert und auf gleicher Weise wie beim Login zurückgeschickt.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-17.png"><img loading="lazy" decoding="async" width="756" height="770" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-17.png" alt="" class="wp-image-10939"/></a><figcaption class="wp-element-caption">Abbildung 7: Authentifizierung und Refresh-Token</figcaption></figure></div>


<h3 class="wp-block-heading">AuthService</h3>



<p>Zum Schluss, noch ein kleiner Einblick, wie JWTs mit hilfe von der &#8220;jsonwebtoken&#8221; library erstellt und validiert werden:</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-23.png"><img loading="lazy" decoding="async" width="519" height="455" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-23.png" alt="" class="wp-image-10944"/></a><figcaption class="wp-element-caption">Abbildung 8: Authentifizierung und validierung mit jsonwebtoken</figcaption></figure></div>


<p></p>
<p>The post <a href="https://mobile.fhstp.ac.at/workshop/jwt-authentication-mit-nodejs-express/">JWT Authentication mit Nodejs (Express)</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Moderne Authentifizierungsmethoden (SOTA Paper)</title>
		<link>https://mobile.fhstp.ac.at/studium/wissenschaftliche-arbeit/moderne-authentifizierungsmethoden/</link>
		
		<dc:creator><![CDATA[Malek Morad]]></dc:creator>
		<pubDate>Mon, 13 Feb 2023 14:12:47 +0000</pubDate>
				<category><![CDATA[Wissenschaftliche Arbeit]]></category>
		<category><![CDATA[Authentifizierung]]></category>
		<category><![CDATA[Sicherheit]]></category>
		<category><![CDATA[SOTA]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=10670</guid>

					<description><![CDATA[<p>ABSTRACT Es gibt mittlerweile eine Vielzahl von Authentifizierungsmethoden, die sich stark voneinander unterscheiden können. Technische Herausforderungen forderten kreative und sichere Lösungen, wodurch neue Methoden zur Authentifizierung entwickelt wurden.&#160; In dieser Arbeit werden diverse, &#160;und vor allem moderne, &#160;Authentifizierungsmethoden erläutert und aufgezeigt, warum diese in bestimmten Szenarien nützlich sind und wo ihre Stärken und Schwächen jeweils <a class="read-more" href="https://mobile.fhstp.ac.at/studium/wissenschaftliche-arbeit/moderne-authentifizierungsmethoden/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/studium/wissenschaftliche-arbeit/moderne-authentifizierungsmethoden/">Moderne Authentifizierungsmethoden (SOTA Paper)</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p></p>



<div class="wp-block-file"><a id="wp-block-file--media-2f5fb97a-6a83-4b64-b3b3-2702966b7587" href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/SOTA_MalekMorad.pdf">SOTA_MalekMorad</a><a href="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/SOTA_MalekMorad.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-2f5fb97a-6a83-4b64-b3b3-2702966b7587">Herunterladen</a></div>



<h2 class="wp-block-heading"><strong>ABSTRACT</strong></h2>



<p>Es gibt mittlerweile eine Vielzahl von Authentifizierungsmethoden, die sich stark voneinander unterscheiden können. Technische Herausforderungen forderten kreative und sichere Lösungen, wodurch neue Methoden zur Authentifizierung entwickelt wurden.&nbsp; In dieser Arbeit werden diverse, &nbsp;und vor allem moderne, &nbsp;Authentifizierungsmethoden erläutert und aufgezeigt, warum diese in bestimmten Szenarien nützlich sind und wo ihre Stärken und Schwächen jeweils liegen.</p>



<h2 class="wp-block-heading"><strong>EINLEITUNG</strong></h2>



<p>Die Wichtigkeit von Authentifizierung und Autorisierung ist in der heutigen Zeit jedem bekannt. Die Authentifizierung ist der Prozess der Identifikation von Benutzern, sei es im Internet oder innerhalb eines privaten Netzwerkes. Dazu gibt es diverse Authentifizierungsmechanismen, die zum Teil stark voneinander abweichen können und unterschiedliche Komplexitätsgrade aufweisen. Bei vielen Authentifizierungsmethoden findet innerhalb des Prozesses in einer Datenbank ein Datenabgleich statt, bei dem überprüft wird, ob die Identität eines Benutzers der Echtheit entspricht. Wie diese Überprüfung im genauen stattfindet und welche Daten verglichen werden, entscheidet die jeweilige Authentifizierungsmethode selbst [1]. In den letzten Jahrzehnten entwickelte sich die Form der Authentifizierung stark weiter. Viele technische Hürden konnten überwunden, und viele Sicherheitslücken geschlossen werden. Nachdem Zugänge gegen 1970 mithilfe von lokal gespeicherten Passwortdateien gewährt wurde, war schnell klar, dass Sicherheitslücken bei der Authentifizierung von Benutzern fatale Auswirkungen haben können [2]. Obwohl sich existierende Authentifizierungsprozesse und Methoden stark voneinander unterscheiden können, so greifen diese hauptsächlich auf drei Parameter zurück. Der erste Parameter bezieht sich auf Informationen, die der User selbst besitzt. Meist verlangt diese Form der Authentifizierung das Eingeben eines Benutzernamens und Passworts für die Identifikation der jeweiligen Person [1]. Der zweite Parameter bezieht sich auf Identifikationstools oder einer Identifikationsinformation im Besitz des zu authentifizierenden Users, wie beispielsweise ein Token, ein Cookie, oder ein physisches Gerät [3]. Die Charakteristik eines Benutzers stellt den dritten Parameter dar, den sich neuerlich Systeme zur Authentifizierung zunutze machen können. Mithilfe der Benutzercharakteristik, oder auch oft Qualifikation des Benutzers genannt, kann der jeweilige Benutzer innerhalb eines Systems passwortlos identifiziert werden. Hierbei zählen unter anderem die Gesichtserkennung, Gestenerkennung und der Scan des Fingerabdrucks, sprich Biometrische Detektion [2], [3]. Diese Parameter können beliebig kombiniert werden, um eine stärkere, multifaktorielle Authentifizierung möglich zu machen. In dieser Arbeit werden zunächst gängige Authentifizierungsmethoden inklusive ihrer Stärken und Schwächen erläutert, um Verständnis zu schaffen und Unterschiede zu modernen Methoden aufzeigen zu können. Anschließend werden moderne Authentifizierungsmodelle, ebenfalls&nbsp;jeweils mit ihren Stärken und Schwächen präsentiert.</p>



<h2 class="wp-block-heading"><strong>AUTHENTIFIZIERUNG MIT PASSWORT</strong></h2>



<p>Das wohl bekannteste Authentifizierungsmodell ist das traditionelle Authentifizieren mit einem Passwort, das nur dem Benutzer selbst bekannt ist. Bei dieser Methode existieren unterschiedliche Sicherheitsstufen, die abhängig von der Stärke des Passworts sind. Die Stärke des Passworts wird wiederum von unterschiedlichen Faktoren beeinflusst. Ein Beispiel für ein starkes Passwort ist jenes, welches Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen nutzt und eine gewisse Länge vorweisen kann [1]. Diese Methode der Authentifizierung ist weit verbreitet und meist zusätzlich zu anderen Authentifizierungsarten als Option verfügbar, bietet aber aufgrund der relativ schnellen Hackbarkeit eine geringe Sicherheit [4]. Zusätzlich zum Passwort wird eine Referenz benötigt, die meist entweder aus einer beliebigen Kombination aus Buchstaben und Zahlen oder der E-Mail des Benutzers besteht. Diese Referenz wird in der Datenbank genutzt, um während des Authentifizierungsprozesses das eingetippte Passwort des Benutzers zu validieren [4].</p>



<h3 class="wp-block-heading">A.&nbsp;&nbsp;&nbsp; Nachteile und Schwächen</h3>



<p>Um die Lesbarkeit eines Passworts zu schützen, wird das Passwort, bevor es in die Datenbank gespeichert wird, unter anderem durch einen von verschiedenen Algorithmen in eine Zeichenkette umgewandelt. Diesen Prozess nennt man auch „Hashen“ [2]. Das Problem mit dieser Methode ist, dass Hacker dieses Passwort theoretisch wieder in seine eigentlichen Werte umwandeln können, auch wenn es je nach Passwortstärke äußerst zeitintensiv sein kann [5]. Abgesehen davon, muss sich der Benutzer sein Passwort merken und bei einer Sicherheitslücke sind eventuell weitere Bereiche gefährdet, wenn dieser Benutzer dasselbe Passwort mehrfach verwendet hat [6].</p>



<h3 class="wp-block-heading">B.&nbsp;&nbsp;&nbsp; Vorteile und Stärken</h3>



<p>Die relativ simple Implementierung und Handhabung dieser Authentifizierungsmethode macht dieses Modell beliebt und weitverbreitet. Grundsätzlich wird dazu nur eine Methode zum „Hashen“, Validieren und ein Datensatz in der Datenbank benötigt. Das simplifiziert diesen Authentifizierungsprozess nicht nur für den Programmierer, sondern auch für den Benutzer, da das Identifizieren an einer zentralen Stelle ohne weitere Faktoren erledigt werden kann [5].</p>



<h2 class="wp-block-heading"><strong>PASSWORTLOSE AUTHENTIFIZIERUNG</strong></h2>



<p>Die Hackerangriffe auf Authentifizierungsmethoden mit Passwörtern nehmen seit Jahren konstant zu und bilden somit weiterhin ein ernstzunehmendes Problem [7]. Alternativ zur klassischen Authentifizierung mit Benutzernamen und Passwort gibt es mittlerweile eine Vielzahl von neuen, innovativen und sichereren Methoden zur Authentifizierung von Benutzern. Die sogenannten „Passwordless“ Authentifizierungsmethoden erlauben das passwortlose Identifizieren in Applikationen und Webanwendungen [6]. Beispiele für Passwortlose Authentifizierungsmöglichkeiten ist die Authentifizierung durch „Single Sign-On“ (SSO), „Magic Link“ und einmalige Codes [7]. In diesem Kapitel werden diese unterschiedlichen passwortlosen Authentifizierungsmethoden erläutert und auch hier wieder die Stärken und Schwächen dieser beschrieben.</p>



<h3 class="wp-block-heading">A.&nbsp;&nbsp;&nbsp; Single Sign-On</h3>



<p>Single Sign-On ist ein Authentifizierungssystem, das es Benutzern ermöglicht, sich mit nur einem Passwort für verschiedene Anwendungen und Websites sicher zu authentifizieren. Somit müssen sich Benutzer nur einmal bei ihrem Konto anmelden, um Zugang zu allen Anwendungen zu erhalten [2]. SSO basiert auf einer Vertrauensvereinbarung zwischen einem Dienstanbieter und einem Identitätsanbieter. In der Regel basiert diese Vertrauensvereinbarung auf einem Zertifikat, das zwischen dem Identitätsanbieter und dem Dienstanbieter ausgetauscht wird [8]. Ein bekanntes Beispiel ist Google, wo man sich bei Gmail anmelden kann und Zugriff auf alle Google Drive-Anwendungen hat. Wenn ein Nutzer beispielsweise versucht, Google Forms zu verwenden und dieser bereits angemeldet ist, sendet Google eine Anfrage an den Google Forms Dienst, der wiederum einen Authentifizierungsdienst aufruft. Dieser Authentifizierungsdienst stellt sicher, ob dieser Benutzer auch tatsächlich angemeldet ist. Ist er das nicht, so wird dieser zu einem Anmeldebildschirm weitergeleitet, um seine Identität zu überprüfen [2]. Vorteilhaft an dieser Authentifizierungsmethode ist der vereinfachte Benutzerzugriff auf Anwendungen und der reduzierte Aufwand durch das Wegfallen mehrerer Passwörter. Nachteilig an dieser Authentifizierung ist wiederum die Verwendung eines einzigen Passworts für die Feststellung der Identität bei mehreren Anwendungen [8].</p>



<h3 class="wp-block-heading">B.&nbsp;&nbsp;&nbsp; Magic Link</h3>



<p>Ziel und Zweck dieses Authentifizierungssystems ist es, dem Benutzer die Eingabe und das Merken eines Passwortes zu ersparen. In solch einem System muss der Benutzer nur eine E-Mail-Adresse eingeben, um sich anzumelden [9]. Diese angegebene Adresse wird benutzt, um einen Identifizierungsschlüssel für eine nachträgliche Referenz zu generieren [8]. Eine E-Mail mit einem eindeutigen Link (dem so genannten &#8220;Magic Link&#8221;), der als Token verwendet werden kann, wird dann an die angegebene Adresse geschickt. Mit diesem Link kann sich der Nutzer durch Anklicken des Links authentifizieren [9]. Vorteil dieser Authentifizierungsmethode ist die gute Benutzerfreundlichkeit, da die Benutzer auf unterschiedlichen Geräten den Link öffnen können und sich keine Passwörter merken müssen oder vergessen können. Problematisch kann jedoch das Versenden und Erhalten der E-Mails sein, da diese aus den verschiedensten Gründen fehlschlagen, zurückgewiesen, abgefangen und somit einfach missbraucht werden könnten [8].</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/Magic_Link-1.png" alt="" class="wp-image-10904" width="843" height="300"/><figcaption class="wp-element-caption"><em>Abbildung 1 Magic link Authentifizierungsfluss [10]</em></figcaption></figure></div>


<h2 class="wp-block-heading"><strong>BENUTZERCHARAKTERISTISCHE AUTHENTIFIZIERUNG</strong></h2>



<p>Biometrische Daten wurden bereits relative früh von Behörden traditionell für die Zugangsverwaltung im militärischen Bereich sowie für die Authentifizierung im straf- oder zivilrechtlichen Bereich eingesetzt, beides unter strenger rechtlicher und technischer Überwachung. Heute zeigen Unternehmen wie Banken, Online-Shopping und Einzelhandel eine starke Nachfrage diesbezüglich. Vor allem öffnen immer mehr Mobilfunknutzer ihre Telefone mit einem Fingerabdruck oder einem Gesicht-Scan, was in den letzten Jahren zu einem Anstieg der Anerkennung und Akzeptanz dieser Authentifizierungsmethode geführt hat &nbsp;[10]. Biometrische, bzw. benutzercharakteristische Daten basieren auf die einzigartigen Eigenschaften der jeweiligen Benutzer und sind daher individuell auf diesen zugeschnitten. Dadurch bietet diese Form der Authentifizierung einen hochgradig personalisierten und sicheren Authentifizierungsmechanismus [2]. Hierbei zählen unter anderem Fingerabdruck, Gesichtserkennung, Iris-Scan, Handgeometrie, Retina-Scan und ähnliches zur physiologischen Biometrie. Auf der anderen Seite umfasst die Verhaltensbiometrie unter anderem Stimmerkennung, Gangbild, Unterschriftenscan und Tastendruck-Scan [1]. </p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/Biometric_authentication.png" alt="" class="wp-image-10905" width="838" height="473"/><figcaption class="wp-element-caption"><em>Abbildung 2 Übersicht über gängige Biometrische Authentifizierungsmethoden [16]</em></figcaption></figure>



<p>Biometrische Authentifizierungsmethoden haben generell folgende Stärken:</p>



<ul class="wp-block-list">
<li>Befreit den Benutzer von der Aufgabe, sich Passwörter merken zu müssen.</li>



<li>Biometrische Authentifizierungsmechanismen sind deutlich sicherer, da biometrische Merkmale nicht verloren gehen und sehr schwer zu fälschen sind.</li>



<li>Die meisten biometrischen Authentifizierungsmethoden sind sehr genau [1].</li>
</ul>



<p>Ein generelles Problem besteht bei biometrischer Authentifizierung weiterhin bezüglich des Datenschutzes aufgrund der Aufbewahrung dieser Daten. Abgesehen davon, wird zur Validierung dieser biometrischen Daten oft zusätzliche der Zugriff auf Hardware wie Kamera, Scanner und andere Geräte benötigt [10].</p>



<h3 class="wp-block-heading">A.&nbsp;&nbsp;&nbsp; Fingerabdruck</h3>



<p>Die gebräuchlichste biometrische Authentifizierungsmethode ist der Scan des Fingerabdrucks. Der Fingerabdruckscanner identifiziert das Bild auf dem Finger des Benutzers und gleicht es dann mit den Daten in der Datenbank ab. Jeder Benutzer hat unterschiedliche Merkmale des Fingermusters. Wenn das Fingerabdruckmuster des Benutzers in der Datenbank gespeichert ist, wandelt das System es in binäre Daten um [1]. Der Prozess des Fingerabdruckscans wurde über die Jahrzehnte immer wieder verbessert und wird in mehreren Schritten umgesetzt, die je nach Algorithmus unterschiedliche Reihenfolgen haben können [11].</p>



<p>Als ersten Schritt müssen die eingefangenen Fotos vom Fingerabdruck für weitere Aufgaben im Gesamtprozess vorbereitet werden. Diese Vorbereitung umfassen das Anpassen der Ausrichtung der gescannten Fotos an die Ausrichtung der in der Datenbank gespeicherten Fotos. Abgesehen davon müssen einige weitere Zwischenschritte getätigt werden, wie beispielsweise Rauschentfernung. Diese Vorverarbeitungsschritte werden durchgeführt, um eine ausreichende Genauigkeit des Endergebnisses zu erreichen [11].</p>



<p>In einem weiteren Schritt findet eine sogenannte „Ausdünnung“ statt, bei dem versucht wird, das eingescannte Bild, um gewisse Nachbarpixel mit minimalem Verlust zu reduzieren. Dieser Schritt vereinfacht in weiterer Folge die Extraktion von Merkmalen des Bildes [12].</p>



<p>Bevor der eingescannte Fingerabdruck mit dem in der Datenbank befindlichen Bildes für die Identitätsüberprüfung abgeglichen werden kann, muss vorerst die Extraktion der Merkmale stattfinden. Dieser Prozess gilt als der Schwerpunkt des gesamten Systems und ist weitgehend von der Vorverarbeitung und Ausdünnung abhängig. Er wird auch als empfindlich angesehen und soll Minutienmerkmale extrahieren. Minutien sind definiert als die Schlüsselpunkte in jedem Fingerabdruckbild und werden sowohl aus dem Originalbild als auch aus den Datensätzen ausgewählt, die eine Reihe übereinstimmender Punkte liefert [11].</p>



<p>Der letzte Schritt umfasst grundsätzlich das Abgleichen des eingescannten und bearbeiteten Fingerabdruckbildes mit dem Bild aus der Datenbank für die endgültige Authentifizierung des Benutzers. Bei diesem Prozess gibt es wiederum unterschiedliche Methoden, die in dieser Arbeit jedoch nicht weiter erläutert werden, um den Rahmen dieser Arbeit nicht zu sprengen [12].</p>



<h3 class="wp-block-heading">B.&nbsp;&nbsp;&nbsp; Gesichtserkennung</h3>



<p>Während und nach der Covid-19-Pandemie hat sich die Gesichtserkennung aufgrund der kontaktlosen Authentifizierungsmethode als potenzielle biometrische Erkennungsmethode herauskristallisiert. Die meisten Organisationen, die kontaktbasierte biometrische Systeme wie z. B. Fingerabdrücke verwendet haben, entschieden sich während der Covid-19-Pandemie dafür, diese nicht mehr für die tägliche Anwesenheitskontrolle einzusetzen [13]. Die Technologie der Gesichtserkennung erstellt Gesichtsabdrücke, indem sie Hunderte von unterschiedlichen Maßen einer zugelassenen Maske mit dem Gesicht einer Person vergleicht, die sich Zugang verschaffen will. Wie bei der Fingerabdruckerkennung wird der Zutritt gewährt, wenn genügend Maße eines Benutzers mit dem autorisierten Gesicht übereinstimmen. Die Gesichtserkennung wurde bei einer Vielzahl von Smartphones und anderen gängigen Produkten eingesetzt, kann aber ungenau sein, wenn Gesichter aus verschiedenen Blickwinkeln betrachtet werden oder wenn versucht wird, zwischen Personen zu unterscheiden, die sich ähnlichsehen, wie z. B. nahe Verwandte [10]. Ähnlich wie beim Fingerabdruckscan findet auch hier erst eine Vorverarbeitung und Filterung statt, bevor Merkmale aus dem Bild extrahiert und mit dem Bild aus der Datenbank verglichen werden können [13].</p>



<p>Vorteil dieser Authentifizierungsmethode ist die breite Verfügbarkeit der dazu benötigten Hard- und Software für die Gesichtserkennung. Die meisten Mobilgeräte sind mit Kameras ausgestattet, müssen kaum konfiguriert werden und besitzen oft bereits die für die Gesichtserkennung benötigten Funktionen. Auf der anderen Seite sind Gesichtserkennungsalgorithmen nicht trivial und weisen daher auch unterschiedlich große Erfolge bei unterschiedlichen Anbietern vor. Beispielsweise sind Drittanbieter oder proprietäre Implementierungen oft erfolgreicher als geräteeigene Lösungen [10].</p>



<h3 class="wp-block-heading">C.&nbsp;&nbsp;&nbsp; Stimmenerkennung</h3>



<p>Die Stimmauthentifizierung benötigt keine speziellen biometrischen Geräte, wie Fingerscanner oder Gesichtserkennung. Die Sprache einer Person ist das gleiche eindeutige Identifikationsmerkmal wie ihr Gesicht, oder ihre Fingerabdrücke [14]. Mit Hilfe von Stimmerkennungstechnologien können die stimmlichen Merkmale unterschieden werden. Diese Merkmale dienen als Informationen über den Benutzer und werden genutzt, um ein Stimmprofil zu erstellen, das ähnlich wie bei Gesichtsscannern in eine Datenbank gespeichert werden kann. Stimmerkennungssysteme zeichnen sich dadurch aus, dass sie den Mund und die Kehle eines Sprechers bewerten und analysieren, um einzigartige Klangeigenschaften zu erzeugen, anstatt einer Stimme &#8220;zuzuhören&#8221;. Diese Methode beseitigt die Gefahren, die mit dem Versuch verbunden sind, einen Klang zu verbergen oder zu imitieren, sowie allgemeine Faktoren wie Unwohlsein oder Tageszeit, die die akustischen Eigenschaften einer Stimme für das Ohr einer Person verändern können [10]. Stimmenerkennungssysteme sind jedoch stark von der Umgebung des Nutzers abhängig, wodurch die Genauigkeit dieser Systeme durch Veränderung der Stimme durch Krankheit oder Altersunterschied als auch laute Umgebungsgeräusche [14].</p>



<h3 class="wp-block-heading">D.&nbsp;&nbsp; Augenscanner</h3>



<p>Im Handel sind verschiedene Arten von Augenscannern erhältlich, z. B. Iris-Scanner und Retina-Scanner. Retina-Scanner arbeiten, indem sie ein blendendes Licht durch die Augen reflektieren, wodurch auffällige Gefäßformen entstehen, die vom Scanner gelesen und mit akzeptierten, in einer Datenbank gespeicherten Daten abgeglichen werden können [14]. Eine weitere Methode der Augenerkennung ist ein biometrischer Identifikator, der ein Bild der Iris aufnimmt. Diese Methode analysiert Daten aus diesem Bild und entwickelt daraus individuelle Muster. Die Technik umfasst die Identifizierung der Grenzen, der Form und der Kontur der Iris sowie die Ermittlung der Position der Pupille [2]. Dieses komplexe Muster kann sich um eine Kombination spezifischer Merkmale handeln. Diese Kombination wird dazu genutzt, um eine Zusammenfassung von Merkmalen zu erstellen [15]. Um bei der Authentifizierung das richtige Bild aus der Datenbank zu finden, ist eine sehr hochauflösende Kamera erforderlich. Moderne Kameras, die für die Iriserkennung verwendet werden, beleuchten die Iris mit Infrarot (IR). Die Netzhautanalyse ist eine weitere Technik der Augenerkennung. Bei diesem Verfahren werden die Blutgefäße im hinteren Teil des Auges erfasst und analysiert. In einem Hochsicherheitskontext gilt die Netzhautabtastung als eine der effizientesten und robustesten Methoden zur Authentifizierung von Benutzern, allerdings ist sie mit hohen Kosten verbunden [2]. Beide Arten von Augenscannern eignen sich gut für eine freihändige Überprüfung und können in einigen Fällen genauso schnell und präzise sein wie die Gesichtserkennung. Andererseits können sie aber auch ungenau sein, wenn die Personen Kontaktlinsen oder eine Brille tragen. Auch ist es bekannt, dass Fotos die Augenscanner täuschen können [10].</p>



<h2 class="wp-block-heading">Fazit</h2>



<p>Mit moderner Technologie und kreativer Lösungsansätze konnten bisher eine Vielzahl von neuer Authentifizierungsmethoden implementiert und verbessert werden. Traditionelle Authentifizierungsmethoden wie das eingeben eines Benutzernamens und eines Passworts weisen grobe Sicherheitslücken auf und werden immer öfter gehackt. Auf der anderen Seite scheinen biometrische Authentifizierungssysteme vielversprechend und schnell zu sein. Beispielsweise weisen Fingerabdruckscanner eine relativ hohe Sicherheit, gute Benutzerfreundlichkeit und wenige Nachteile auf. Aufgrund dieser Tatsachen und den aktuellen Entwicklungen haben diese Authentifizierungsmodelle ein hohes Potenzial.</p>



<h2 class="wp-block-heading">LITERATUR</h2>



<p>[1]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; N. A. Lal, S. Prasad, and M. Farik, “A Review Of Authentication Methods,” vol. 5, no. 11, p. 4, 2016.</p>



<p>[2]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; “Modern Authentication Methods: A Comprehensive Survey.” https://www.intechopen.com/journals/1/articles/100 (accessed Nov. 13, 2022).</p>



<p>[3]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; S. Z. Syed Idrus, E. Cherrier, C. Rosenberger, and J.-J. Schwartzmann, “A Review on Authentication Methods,” <em>Aust. J. Basic Appl. Sci.</em>, vol. 7, no. 5, pp. 95–107, Mar. 2013.</p>



<p>[4]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; L. Dostalek and J. Safarik, “Strong password authentication with AKA authentication mechanism,” in <em>2017 International Conference on Applied Electronics (AE)</em>, Sep. 2017, pp. 1–6. doi: 10.23919/AE.2017.8053581.</p>



<p>[5]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; S. Biswas and S. Biswas, “Password security system with 2-way authentication,” in <em>2017 Third International Conference on Research in Computational Intelligence and Communication Networks (ICRCICN)</em>, Nov. 2017, pp. 349–353. doi: 10.1109/ICRCICN.2017.8234533.</p>



<p>[6]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; M. Morii <em>et al.</em>, “Research on Integrated Authentication Using Passwordless Authentication Method,” in <em>2017 IEEE 41st Annual Computer Software and Applications Conference (COMPSAC)</em>, Jul. 2017, vol. 1, pp. 682–685. doi: 10.1109/COMPSAC.2017.198.</p>



<p>[7]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; I. Gordin, A. Graur, S. Vlad, and C. I. Adomniței, “Moving forward passwordless authentication: challenges and implementations for the private cloud,” in <em>2021 20th RoEduNet Conference: Networking in Education and Research (RoEduNet)</em>, Nov. 2021, pp. 1–5. doi: 10.1109/RoEduNet54112.2021.9638271.</p>



<p>[8]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; “A guide to magic links: how they work and why you should use them — WorkOS.” https://workos.com/blog/a-guide-to-magic-links (accessed Nov. 13, 2022).</p>



<p>[9]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; I. Matiushin and V. Korkhov, “PASSWORDLESS AUTHENTICATION USING MAGIC LINK TECHNOLOGY,” in <em>9th International Conference “Distributed Computing and Grid Technologies in Science and Education,”</em> Dec. 2021, pp. 434–438. doi: 10.54546/MLIT.2021.89.13.001.</p>



<p>[10]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; V. Parmar, H. A. Sanghvi, R. H. Patel, and A. S. Pandya, “A Comprehensive Study on Passwordless Authentication,” in <em>2022 International Conference on Sustainable Computing and Data Communication Systems (ICSCDS)</em>, Apr. 2022, pp. 1266–1275. doi: 10.1109/ICSCDS53736.2022.9760934.</p>



<p>[11]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; S. Hemalatha, “A systematic review on Fingerprint based Biometric Authentication System,” in <em>2020 International Conference on Emerging Trends in Information Technology and Engineering (ic-ETITE)</em>, Feb. 2020, pp. 1–4. doi: 10.1109/ic-ETITE47903.2020.342.</p>



<p>[12]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; G. Aguilar, G. Sanchez, K. Toscano, M. Salinas, M. Nakano, and H. Perez, “Fingerprint Recognition,” in <em>Second International Conference on Internet Monitoring and Protection (ICIMP 2007)</em>, Jul. 2007, pp. 32–32. doi: 10.1109/ICIMP.2007.18.</p>



<p>[13]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; M. Vasanthi and K. Seetharaman, “Facial image recognition for biometric authentication systems using a combination of geometrical feature points and low-level visual features,” <em>J. King Saud Univ. &#8211; Comput. Inf. Sci.</em>, vol. 34, no. 7, pp. 4109–4121, Jul. 2022, doi: 10.1016/j.jksuci.2020.11.028.</p>



<p>[14]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; S. V. Melnik and N. I. Smirnov, “Voice Authentication System for Cloud Network,” in <em>2019 Systems of Signals Generating and Processing in the Field of on Board Communications</em>, Mar. 2019, pp. 1–4. doi: 10.1109/SOSG.2019.8706794.</p>



<p>[15]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; D. Bhattacharyya, R. Ranjan, F. Alisherov, and C. Minkyu, “Biometric Authentication: A Review,” <em>Int. J. U- E- Serv. Sci. Technol.</em>, vol. 2, Sep. 2009.</p>
<p>The post <a href="https://mobile.fhstp.ac.at/studium/wissenschaftliche-arbeit/moderne-authentifizierungsmethoden/">Moderne Authentifizierungsmethoden (SOTA Paper)</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Print2Mobile &#8211; Vom QR-Code zum Mini-Game</title>
		<link>https://mobile.fhstp.ac.at/dokumentation/mini-game/</link>
		
		<dc:creator><![CDATA[Malek Morad]]></dc:creator>
		<pubDate>Sat, 15 Oct 2022 11:08:26 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Dokumentation]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=10245</guid>

					<description><![CDATA[<p>Das Initialprojekt &#8220;Print2Mobile&#8221; soll den Einstieg in die Masterklasse &#8220;Mobile&#8221; und unsere momentanen Stand in der Entwicklung mit verschiedenen Technologien widerspiegeln. Dabei war die Auswahl der jeweiligen Technologie uns freigestellt, um die Vielfalt der Projekte und unsere Selbstständigkeit zu fördern. Ziel dieses Initialprojektes ist es, anhand eines abscannbaren QR-Codes eine sinnhaftige Weiterleitung zu einer Applikation <a class="read-more" href="https://mobile.fhstp.ac.at/dokumentation/mini-game/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/dokumentation/mini-game/">Print2Mobile &#8211; Vom QR-Code zum Mini-Game</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Das Initialprojekt &#8220;Print2Mobile&#8221; soll den Einstieg in die Masterklasse &#8220;Mobile&#8221; und unsere momentanen Stand in der Entwicklung mit verschiedenen Technologien widerspiegeln. Dabei war die Auswahl der jeweiligen Technologie uns freigestellt, um die Vielfalt der Projekte und unsere Selbstständigkeit zu fördern. Ziel dieses Initialprojektes ist es, anhand eines abscannbaren QR-Codes eine sinnhaftige Weiterleitung zu einer Applikation oder Webseite bereitzustellen. Was einen anschließend nach der Weiterleitung erwartet, ist jedoch jedem selbst überlassen worden. Ich habe mich für ein Mini-Game entschieden, das unter der folgenden URL zu finden ist:<br><a href="http://it221514.students.fhstp.ac.at/print2mobile/app" target="_blank" rel="noreferrer noopener">it221514.students.fhstp.ac.at/print2mobile/app</a></p>



<p>..oder hier abscannen! <strong>TIPP:</strong> im Landscape Modus neustarten! (querformat)</p>



<figure class="wp-block-image size-full is-resized is-style-default"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2022/10/QR.png" alt="QR-Code Mini-Game" class="wp-image-10250" width="154" height="150"/></figure>



<p></p>



<h2 class="wp-block-heading">Die 11 Gebote der QR-Codes</h2>



<p>Obwohl bei diesem Projekt keine spezifischen Anforderungen gegeben waren, so gab es dennoch einige Aspekte die berücksichtigt werden mussten. Einer dieser Aspekte sind die sogenannten 11 Gebote der QR-Codes. Kurzgefasst erklären diese wie QR-Codes am sinnvollsten eingesetzt und welche Punkte bei der Generierung, Darstellung und Weiterleitung von diesen QR-Codes berücksichtigt werden sollten. Diese Aspekte sollen eine gute Usability und User Experience sicherstellen. </p>



<p></p>



<h2 class="wp-block-heading">Vorbereitungen</h2>



<p>Da ich ursprünglich auf Native Funktionalitäten mobiler Geräte zugreifen wollte, entschied ich mich für das Framework &#8220;Ionic&#8221; in Kombination mit Angular. Da ich jedoch kurz darauf zum Entschluss kam, doch keine Nativen Funktionalitäten zu nutzen, sind die Ionic-spezifischen Komponenten und Methoden kaum genutzt worden. Nichtsdestotrotz vereinfachten die Ionic Komponenten und die Ionic CLI (Command Line Interface) das schnelle zusammen bauen der HTML Komponenten und das anschließende Builden der Web-Applikation. Gleichzeitig erlaubte die Verwendung von Angular &amp; Typescript die strukturierte und komplexe Programmierung des Mini-Games mit Web-Komponenten. Der wichtigste Teil dieser Applikation war jedoch selbstverständlicher Weise die Library, die die schnelle Implementierung dieses Mini-Games erst möglich gemacht hat. Diese Library nennt sich &#8220;Phaser.js&#8221;.</p>



<p></p>



<h2 class="wp-block-heading">Umsetzung</h2>



<p>Zuerst wurde die Projektstruktur aufgebaut, die aus einer Seite und mehreren &#8220;Scenen&#8221; bestand. Das erste (linke) Bild zeigt die Projektstruktur, das zweite (rechte) Bild den Code für eine Szene. Eine Szene musste die Klasse von der Library Phaser.Scene &#8220;extenden&#8221;, sprich erweitern. Hier können nun unter anderem folgende Methoden implementiert werden: preload, create und update. Preload lädt beispielsweise Bilder und bereitet sie für die weitere verwendung in &#8220;create&#8221; oder &#8220;update&#8221; vor. In &#8220;create&#8221; werden typischerweise alle Objekte, Bilder, Kameras, etc. kreiert und positioniert. Die Methode &#8220;update&#8221; stellt im Endeffekt einen loop dar, in der interaktive und situationsbedingte Veränderungen stattfinden.</p>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2022/10/Folder_structure-1.png" alt="" class="wp-image-10247" width="369" height="362"/><figcaption>Projektstruktur</figcaption></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2022/10/Scene_structurte.png" alt="" class="wp-image-10248" width="404" height="364"/><figcaption>Codestruktur einer &#8220;Szene&#8221;</figcaption></figure>
</div>
</div>
</div></div>



<h2 class="wp-block-heading">Das Ergebnis</h2>



<p>..und hier endlich ein Einblick in das Mini-Game!</p>



<figure class="wp-block-video"><video autoplay loop muted src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2022/10/Game_Preview-1.mp4"></video></figure>
<p>The post <a href="https://mobile.fhstp.ac.at/dokumentation/mini-game/">Print2Mobile &#8211; Vom QR-Code zum Mini-Game</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		<enclosure url="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2022/10/Game_Preview-1.mp4" length="6759871" type="video/mp4" />

			</item>
	</channel>
</rss>
