KeyTrac Schnellstart

Die Integration von KeyTrac im Schnelldurchlauf. Für alle Entwickler die im Nu fertig sein möchten.

Registrieren Sie sich einen Zugang

Bevor Sie mit der Integration von KeyTrac beginnen können, müssen Sie sich zunächst einen persönlichen Zugang erstellen und Ihre E-Mail Adresse bestätigen. Die KeyTrac-API verwendet einen API-Token in den HTTP-Headers um Ihre Anfragen zu authentifizieren. Diesen API-Token finden Sie nach der Registrierung in Ihrer persönlichen Management-Konsole. Ohne Zugang können Sie KeyTrac nicht verwenden!

Integrieren Sie den KeyTrac Recorder

Der KeyTrac Recorder ist ein einfach zu nutzendes JavaScript, das notwendig ist, um das Tippverhalten Ihrer Anwender aufzuzeichnen. Dazu muss es in Ihre Website bzw. alle Websites integriert werden, wo etwas aufgezeichnet werden soll.

1) Laden Sie das KeyTrac Recorder JavaScript

Fügen Sie den folgenden Script-Tag, vorzugsweise, in die head Sektion Ihrer Website ein. Diese Anweisung lädt und integriert den KeyTrac Recorder. Wenn Sie das Recorder JavaScript erfolgreich integriert haben, kann der KeyTrac Recorder auch schon genutzt werden.

<script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>

2) Binden Sie den Recorder an Eingabefelder

Damit der KeyTrac Recorder arbeiten kann, muss er an die Eingabefelder gebunden werden, dir für KeyTrac verwendet werden sollen. Dies erfolgt durch die Angabe eines Arrays der DOM-Bezeichner der Eingabefelder, die bei denen KeyTrac genutzt werden soll. Der DOM-Bezeichner muss der Keytrac.configure Funktion mit dem Präfix # übergeben werden.

Der Einfachheit halber verwenden wir hier nur die Option anytextFields um den KeyTrac Recorder für die Aufzeichnung des Tippverhaltens im AnyText Modus zu konfigurieren. Eingabefelder die nicht in der Konfiguration enthalten sind werden vom Recorder ignoriert. Die u.g. Vorgehensweise eignet sich nur für AnyText. (Für Password Hardening klicken Sie hier)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Enrolment Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
  </head>
  <body>
    <!-- Das Formular beinhaltet alle Eingabefelder -->
    <form action="/enrol" method="post">
      <p>This is the text users need to enter in the textarea below</p>
      <textarea name="textArea1" id="textArea01"></textarea>
      <p>This is the text users need to enter in the textarea below</p>
      <textarea name="textArea2" id="textArea02"></textarea>
      <input type="submit" value="Enrol me!">
    </form>

    <!-- Konfiguration des KeyTrac Recorders -->
    <script type="text/javascript">
      KeyTrac.configure({
        anytextFields: ['#textArea01', '#textArea02'] // <-- AnyText mode
      });
    </script>
  </body>
</html>

3) Überprüfen Sie den Status des KeyTrac Recorders

Wurde der KeyTrac Recorder erfolgreich in die Website integriert und die Website neu geladen, müsste der Recorder nun automatisch versteckte Felder unterhalb eines jeden der konfigurierten Eingabefelder eingefügt haben. Sollten diese Felder nicht vorhanden sein, dann war die Integration des JavaScripts nicht fehlerhaft. Zur Kontrolle verwenden Sie am einfachsten das Inspektor-Tool Ihres Browsers.Hier überprüfen Sie einfach, ob versteckte Eingabefelder mit Präfix keytrac_ im Namen unterhalb der entsprechenden Eingabefelder existieren.

...
<!-- In dieses Textfeld tippen Benutzer etwas -->
<textarea name="textArea1" id="textArea01"></textarea>
<!-- Das versteckte Eingabefeld, dass das Tippverhalten aufzeichnet -->
<input type="hidden" name="keytrac_textArea01" id="keytrac_textArea01">
...
<!-- In dieses Textfeld tippen Benutzer etwas -->
<textarea name="textArea2" id="textArea02"></textarea>
<!-- Das versteckte Eingabefeld, dass das Tippverhalten aufzeichnet -->
<input type="hidden" name="keytrac_textArea02" id="keytrac_textArea02">
...

Erstellen Sie einen KeyTrac Benutzer

Faustregel: Für jeden Benutzer in Ihrer Anwendung müssen Sie auch in KeyTrac einen Benutzer erstellen.

Sequenz-Diagramm zur Benutzererstellung

  1. Ein Benutzer registriert sich einen Zugang auf Ihrer Website.
  2. Sie erzeugen nun für diesen Benutzer einen KeyTrac-Benutzer.
  3. Die KeyTrac API antwortet mit einem Bezeichner, der mit den anderen Benutzerdaten gespeichert werden muss.

1) Einen Benutzer erzeugen

Ein Benutzer in KeyTrac spiegelt einen tatsächlichen Benutzer in Ihrer Webanwendung wieder. Einen solchen KeyTrac-Benutzer können Sie sich als eine Art Speichereinheit vorstellen, mit der die jeweiligen Tippverhalten verbunden sind.

$ curl -d '' -H "Authorization: <<IHR API-TOKEN>>" https://api.keytrac.net/users

{"id":"8f5a2308-90b5-4afa-8847-ebf2b99f4082"}

Die Benutzer-ID 8f5a2308-90b5-4afa-8847-ebf2b99f4082 wird exemplarisch in der gesamten Dokumentation verwendet und muss nicht einer tatsächlichen Benutzer-ID entsprechen!

Da ein solcher Benutzer essentiell für KeyTrac ist, muss er mit den anderen Benutzerdaten in Ihrer Datenbank gespeichert werden. Um die Erstellung solcher Benutzer zu automatisieren, bietet es sich an diesen Aufruf in den Registrierungsablauf Ihrer Webanwendung zu integrieren. Wurde ein Anwender erfolgreich in Ihrer Anwendung erstellt, wurde im selben Aufruf ein Benutzer bei KeyTrac erzeugt!

Zeichnen Sie das Tippverhalten auf

Lassen Sie uns der Einfachheit halber davon ausgehen, dass Sie bereits erfolgreich einen entsprechenden Benutzer bei KeyTrac erstellt haben (beispielsweise mit dem Bezeichner 8f5a2308-90b5-4afa-8847-ebf2b99f4082). Um nun fortfahren zu können, muss der Anwender nur noch etwas in die, wie in der Sektion Binden Sie den Recorder an Eingabefelder angegeben, für KeyTrac vorbereiteten Textfelder eintippen. Während der Anwender nun etwas tippt, zeichnet der KeyTrac Recorder im Hintergrund as Tippverhalten auf und wandelt es in das für KeyTrac verarbeitbare Format um.

Benutzereingaben

Hat der Anwender die Eingabe abgeschlossen und das Formular mit einem POST Aufruf an Ihre Webanwendung gesendet, übernimmt nun Ihr Code die Kontrolle. Verwenden Sie nun einfach die Werte des keytrac_textArea01 sowie des keytrac_textArea02 Parameter und behalten Sie sie für den Zeitpunkt wo Sie KeyTrac mit dem Tippverhalten trainieren.

KeyTrac mit dem Tippverhalten trainieren

Faustregel: Bevor Sie einen Benutzer trainieren können, müssen Sie diesen zunächst anlegen!

Damit KeyTrac Benutzer zuverlässig identifizieren kann, muss KeyTrac zunächst die Art und Weise erlernen wie der eben erzeugte Benutzer etwas auf der Tastatur eingetippt hat. Dieses Training wird mittels eines eigenen Prozesses durchgeführt. Hier wird das Tippverhalten in ein Profil überführt, das später für die Authentifizierung verwendet wird.

Sequenz-Diagramm zum Training

  1. Ihre Website, wo der KeyTrac JavaScript Recorder integriert ist, wird geladen.
  2. Beim Absenden des Formulars wird das aufgezeichnete Tippverhalten an Ihr Backen gesendet.
  3. Kombinieren und senden Sie die Tippproben sowie die KeyTrac Benutzer-ID an die KeyTrac API.
  4. Die KeyTrac API erzeugt aus den Tippproben ein neues Benutzerprofil.

1) Bereiten Sie die benötigen JSON-Daten vor

Bevor Sie das Training durchführen können, müssen Sie zunächst die benötigten JSON-Daten, wie unten gezeigt, vorbereiteten, um mit der KeyTrac-API kommunizieren zu können. Die Daten im samples Array ist das aufgezeichnete Tippverhalten aus den gesendeten Daten der versteckten Eingabefelder keytrac_textArea01 und keytrac_textArea02 des Formulars aus Abschnitt Überprüfen Sie den Status des KeyTrac Recorders, wohingegen sich die user_id auf den Bezeichner des Benutzers aus Abschnitt Einen Benutzer erzeugen bezieht.

{
  "user_id":"8f5a2308-90b5-4afa-8847-ebf2b99f4082",
  "samples":[
    "firefox/38.0#m=0#2016-01-29 17:50:51|0dRSHIFT|320d84|48uRSHIFT",
    "firefox/38.0#m=0#2016-01-29 17:50:59|0dRSHIFT|310d84|40uRSHIFT"
  ]
}

2) Trainieren Sie das Benutzerprofil

Jetzt, nachdem Sie die erforderliche JSON-Datenstruktur erstellt haben, können Sie KeyTrac das Tippverhalten des Benutzers mit dem Bezeichner 826efc1d-78e5-4e69-b144-de090de6094b beibringen. Dies geschieht dadurch, indem Sie die JSON-Daten an die KeyTrac-API als POST Anfrage senden. Wenn Sie alles richtig gemacht haben, antwortet die API mit {"OK:true"}. Zur Verdeutlichung wird dies unten mittels des curl Programms durchgeführt.

$ curl -H "Accept: application/json" \
  -H "Content-Type: application/json" \
  -H "Authorization: <<IHR API-TOKEN>>" \
  -d '{"user_id":"<<BENUTZER-ID VON SCHRITT [Erstellen Sie einen KeyTrac Benutzer]>>","samples":[
    "firefox/38.0#m=0#2016-04-25 09:22:52|336dRSHIFT|80d68|64uRSHIFT|32u68|32d73|80u73|8d69|72dSPACE|16u69|88uSPACE|64d66|72u66|64d69|80d78|18u69|62u78|104d85|72u85|32d84|64d90|8u84|88u90|8d84|48d69|48u84|72u69|8dSPACE|88uSPACE|96dRSHIFT|40d77|64uRSHIFT|24d69|40u77|40u69|120d84|72u84|16d72|88d79|17u72|31d68|72u68|8u79|56d69|88u69|72dSPACE|80uSPACE|48d66|56u66|72d69|80u69|56d83|56d84|40u83|40d69|48u84|64u69|168d72|104u72|32d84|72u84|72dSPACE|72uSPACE|48d73|96d78|64dSPACE|32u73|16u78|40d68|40uSPACE|32u68|72d69|48d82|64u69|8dSPACE|32u82|48uSPACE|88dLSHIFT|96d77|32uLSHIFT|56u77|48d69|72u69|152d83|72u83|96d83|88u83|8d85|72u85|112d78|80d71|8u78|56u71|40dSPACE|56d68|40uSPACE|32u68|88d69|40d82|40u69|40u82|8dSPACE|64dLSHIFT|16uSPACE|80d76|64uLSHIFT|16u76|88d85|16d70|48u85|40u70|72d84|64u84|32d190|48u190",
    "firefox/38.0#m=0#2016-04-25 09:24:58|128dRSHIFT|568d68|64uRSHIFT|32u68|192d73|40u73|88d69|88u69|160dSPACE|88uSPACE|8d66|72u66|40d69|88d78|8u69|96u78|104d85|80d84|8u85|88u84|40d90|80d84|16u90|56d69|32u84|64u69|64dSPACE|80uSPACE|72dRSHIFT|64d77|72uRSHIFT|8d69|48u77|16u69|40d84|80u84|32d72|88d79|32u72|32d68|32u79|40u68|88d69|64dSPACE|8u69|88uSPACE|40d66|96u66|496d69|72u69|88d83|88d84|40u83|48d69|40u84|40d72|16u69|96u72|40d84|80u84|72dSPACE|96uSPACE|104d73|64d78|56u73|24dSPACE|56u78|8d68|56uSPACE|32u68|80d69|48d82|48u69|56u82|16dSPACE|64dLSHIFT|32uSPACE|120d77|8uLSHIFT|80d69|8u77|64u69|88d83|56u83|96d83|64d85|16u83|56u85|104d78|80d71|8u78|56u71|8dSPACE|88d68|16uSPACE|72u68|80d69|48d82|56u69|56u82|8dSPACE|72uSPACE|32dLSHIFT|64d76|72uLSHIFT|0u76|88d85|25d70|55u85|16u70|80d84|56u84|56d190|24u190"]}' \
  https://api.keytrac.net/anytext/enrol

{"OK":true}

Wenn Sie diesen API-Aufruf nun ausgeführt haben, wurde damit der Grundstein für den nächsten Schritt - die Authentifizierung - im Umgang mit der KeyTrac-API gelegt. Um diesen Lernprozess zu automatisieren, muss Ihre Anwendung nun so erweitert werden, dass diese Aktion direkt nach dem Absenden des Formulars des Abschnitts Zeichnen Sie das Tippverhalten auf durchgeführt wird.

Authentifizieren Sie nun den Benutzer

Faustregel: Bevor Sie Benutzer authentifizieren können, müssen Sie sie erst trainieren!

Sequenz-Diagramm der Authentifizierung

  1. Ihre Website, wo der KeyTrac JavaScript Recorder integriert ist, wird geladen.
  2. Beim Absenden des Formulars wird das aufgezeichnete Tippverhalten an Ihr Backen gesendet.
  3. Kombinieren und senden Sie die Tippproben sowie die KeyTrac Benutzer-ID an die KeyTrac API.
  4. Die KeyTrac API erzeugt aus den Tippproben ein neues Benutzerprofil.
  5. Verwenden Sie den Wahr/Falsch-Wert für die Entscheidung ob Sie der Authentifizierung vertrauen.

Wenn Sie alle vorherigen Schritte durchgeführt haben, können Sie nun Ihre erste Authentifizierung für den erzeugten Benutzer durchführen. Bevor Sie jedoch starten können, muss zunächst eine frische Aufnahme des Tippverhaltens, wie in Abschnitt Zeichnen Sie das Tippverhalten auf beschrieben, durchgeführt werden. Dafür erstellen Sie einfach ein neues HTML-Dokument wie das in Abschnitt Binden Sie den Recorder an Eingabefelder.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Authentication Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
  </head>
  <body>
    <!-- Das Formular das alle Eingabefelder beinhaltet -->
    <form action="/authenticate" method="post">
      <p>Another text to be entered in the textarea below</p>
      <textarea name="textArea" id="textArea"></textarea>
      <input type="submit" value="Authenticate me!">
    </form>

    <!-- Konfiguration des KeyTrac Recorders -->
    <script type="text/javascript">
      KeyTrac.configure({
        anytextFields: ['#textArea'] // <-- AnyText Modus
      });
    </script>
  </body>
</html>

Nachdem der Anwender den Tippvorgang beendet hat, muss das Formular ebenfalls mit einer POST Anfrage an den Ihre Webanwendung übermittelt werden. Hier verwenden Sie den Parameter des keytrac_textArea Eingabefelds und halten ihn für die eigentliche Authentifizierung vor.

1) Bereiten Sie die benötigen JSON-Daten vor

Der Einfachheit halber wird auch für alle Authentifizierungsanfragen dasselbe Schema der JSON-Datenstruktur der Trainingsanfragen beibehalten. Lediglich der API-Endpoint ändert sich entsprechend der Variante von KeyTrac die Sie authentifizieren möchten. Die Daten im samples Array ist das aufgezeichnete Tippverhalten aus den gesendeten Daten des versteckten Eingabefeldes keytrac_textArea, wohingegen sich die user_id auf den Bezeichner des Benutzers aus Abschnitt Einen Benutzer erzeugen bezieht.

{
  "user_id":"8f5a2308-90b5-4afa-8847-ebf2b99f4082",
  "samples":[
    "firefox/38.0#m=0#2016-01-29 17:50:51|0dRSHIFT|320d84|48uRSHIFT"
  ]
}

2) Authentifizierung gegen das Benutzerprofil

Nachdem Sie nun die benötigte JSON-Datenstruktur erstellt haben, können Sie sich nun mit dem Benutzer 826efc1d-78e5-4e69-b144-de090de6094b gegen das Benutzerprofil authentifizieren. Dafür müssen Sie die JSON-Daten per POST Anfrage an die KeyTrac-API senden.

War Ihre Anfrage gegenüber der KeyTrac-API erfolgreich, antwortet die API mit einem true Wert, wenn die übertragene Tippprobe mit dem gespeicherten Benutzerprofil übereinstimmt. Wurde keine Übereinstimmung festgestellt, liefert die KeyTrac-API einen false Wert zurück. Zusätzlich zu diesem sog. boolschen Wert fügt die KeyTrac-API noch einen prozentualen Wert in die JSON-Antwort ein. Dieser Wert stellt die Genauigkeit der Übereinstimmung mit dem gespeicherten Benutzerprofil dar. Je höher der prozentuale Übereinstimmungswert, desto größer die Übereinstimmung. Der minimale Wert kann hier bei 0 und der maximale Wert bei 100 liegen. Alle Werte sind vom Typ Integer. Beispiel: {"authenticated":true, "score":95}

$ curl -H "Accept: application/json" \
  -H "Content-Type: application/json" \
  -H "Authorization: <<IHR API-TOKEN>>" \
  -d '{"user_id":"<<BENUTZER-ID VON SCHRITT [Erstellen Sie einen KeyTrac Benutzer]>>","samples":["firefox/38.0#m=0#2016-04-25 09:26:37|400dRSHIFT|88d68|25uRSHIFT|55u68|32d73|64d69|8u73|80u69|8dSPACE|72uSPACE|48d66|72u66|80d69|88u69|96d78|80u78|96d85|80d84|1u85|79u84|16d90|64d84|24u90|8d69|56u84|56u69|32dSPACE|56uSPACE|224dLSHIFT|88d77|48uLSHIFT|48u77|24d69|64u69|104d84|72u84|24d72|120d79|8u72|40d68|48u79|32u68|72d69|80u69|24dSPACE|96uSPACE|24d66|56u66|88d69|80u69|96d83|104d84|16d69|32u83|48u84|32u69|8d72|112u72|40d84|64u84|136dSPACE|96uSPACE|120d73|88d78|72dSPACE|8u73|32u78|32d68|32uSPACE|24u68|72d69|56d82|48u69|32dSPACE|16u82|64uSPACE|176dLSHIFT|80d77|72uLSHIFT|0u77|80d69|64u69|104d83|56u83|80d83|104u83|1d85|63u85|104d78|72d71|8u78|64u71|32dSPACE|64d68|16uSPACE|56u68|80d69|40d82|40u69|48u82|616dSPACE|72uSPACE|16dLSHIFT|88d76|64uLSHIFT|1u76|112d85|47d70|8u85|48u70|80d84|64u84|40d190|32u190"]}' \
  https://api.keytrac.net/anytext/authenticate

{"authenticated":true, "score":95}

Anstelle der manuellen Durchführung der Anfrage bietet es sich an die Authentifizierung eines KeyTrac Benutzers in den bestehenden Authentifizierungsablauf Ihrer Webanwendung integrieren.