Passwortlose Gesichtsauthentifizierung auf Websites! (FACEIO)

Was ist FaceIO und warum wird es verwendet? ?

FaceIO ist ein Dienst, der es Websites und Apps ermöglicht, eine Person mithilfe einer Webcam anhand ihres Gesichts zu erkennen.

Anstatt ein Passwort einzugeben oder einen Fingerabdruck zu verwenden, können Benutzer einfach auf die Kamera schauen und die App kann bestätigen, wer sie sind.

Das ist hilfreich, weil:

• ⚡ Es ist schneller als das Eingeben von Passwörtern.
• ? Es ist sicherer, da nur die Person mit diesem Gesicht auf die App zugreifen kann.
• ? Benutzer müssen sich keine komplizierten Passwörter merken.

Wie funktioniert FaceIO?

Es gibt zwei Hauptaktionen mit FaceIO:

1. ⛳ Registrieren eines Benutzers: Dies bedeutet, dass das Gesicht des Benutzers zum ersten Mal aufgezeichnet wird.
2. ? Einen Benutzer authentifizieren: Dies bedeutet, dass überprüft wird, ob die Person vor der Kamera mit der Person übereinstimmt, die sich zuvor registriert hat.

FaceIO auf einer Webseite einrichten ?️

Um FaceIO verwenden zu können, müssen Sie deren JavaScript-Bibliothek (einen speziellen Code, der die Gesichtserkennung durchführt) zu Ihrer Website hinzufügen. So machen Sie es:

1. Fügen Sie das Skript ein:
Fügen Sie Ihrer HTML-Datei ein Skript-Tag hinzu, das auf die FaceIO-Bibliothek verweist:

   <script src="https://cdn.faceio.net/fio.js"></script>

? Mit diesem Skript kann Ihre Website die Funktionen von FaceIO nutzen.

2. Erstellen Sie Schaltflächen für die Registrierung und Authentifizierung:
Fügen Sie in Ihrem HTML zwei Schaltflächen hinzu:

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

? Wenn ein Benutzer auf diese Schaltflächen klickt, registriert er sich entweder (speichert sein Gesicht) oder authentifiziert (überprüft sein Gesicht).

Einen Benutzer registrieren?

Der Vorgang des Speicherns des Gesichts eines neuen Benutzers wird als Registrierung bezeichnet. Hier ist der JavaScript-Code dafür:

function enrollNewUser() {
    const faceio = new faceIO("app-public-id"); // Replace with your app's ID

    faceio.enroll({
        locale: "en", // This sets the language to English
        payload: {
            email: "user@example.com" // Link this user's email or any other unique ID
        }
    }).then(userInfo => {
        console.log("User enrolled successfully!");
        console.log("User ID: " + userInfo.facialId);
        console.log("Enrollment Date: " + userInfo.timestamp);
        alert("Enrollment successful! Welcome, user.");
    }).catch(err => {
        handleError(err);
    });
}

?‍♂️ Was bewirkt dieser Code?

• Es ruft die Funktion enroll() von FaceIO auf, um den Prozess zu starten.
• Gebietsschema bedeutet die Sprache, die der Benutzer bevorzugt.
• Nutzlast sind zusätzliche Informationen über den Benutzer (wie seine E-Mail-Adresse oder ID).
• Wenn es funktioniert, wird die Meldung „Registrierung erfolgreich!“ angezeigt. und protokolliert Details wie die Benutzer-ID und das Datum.
• Wenn es nicht funktioniert, ruft es die Funktion handleError() auf, um zu überprüfen, was schief gelaufen ist.

Einen Benutzer authentifizieren?

So überprüfen Sie, ob ein Benutzer derjenige ist, von dem er angibt, dass er sein Gesicht verwendet:

   <script src="https://cdn.faceio.net/fio.js"></script>

?‍♂️ Was bewirkt dieser Code?

• Es verwendet die Authenticate()-Methode von FaceIO.
• Bei Erfolg protokolliert es eine Nachricht und heißt den Benutzer wieder willkommen.
• Wenn nicht, wird handleError() aufgerufen, um das Problem zu verstehen.

Um den API-Schlüssel (auch bekannt als **App Public ID) in FaceIO zu erhalten, befolgen Sie diese einfachen Schritte:**

1. Melden Sie sich bei FaceIO an:

   • Gehen Sie zur FaceIO-Website und eröffnen Sie ein Konto, falls Sie noch keins haben.
   • Melden Sie sich mit Ihrem neuen Konto an.

2. Neue Anwendung erstellen:

   • Sobald Sie angemeldet sind, gehen Sie zum Dashboard.
   • Klicken Sie auf "Neue Anwendung erstellen".
   • Geben Sie die erforderlichen Details wie den Namen und die Beschreibung Ihrer App ein und klicken Sie dann auf „Erstellen“.

1. Finden Sie die öffentliche App-ID:

   • Nachdem Sie die App erstellt haben, wird sie im Abschnitt „Anwendungen“ Ihres Dashboards aufgeführt.
   • Hier finden Sie Ihre App Public ID. Dies ist der API-Schlüssel, den Sie in Ihrem JavaScript-Code verwenden, um Ihre Website mit FaceIO zu verbinden.

2. Kopieren Sie die öffentliche App-ID:

   • Klicken Sie auf das Kopiersymbol neben der öffentlichen App-ID, um sie zu kopieren.
   • Jetzt können Sie diesen Schlüssel in Ihren Code einfügen, wo „app-public-id“ steht.

Beispiel: Ersetzen Sie „app-public-id“ im JavaScript-Code durch Ihre tatsächliche öffentliche App-ID:

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

Jetzt ist Ihre App mit FaceIO verbunden und bereit, Gesichtserkennungsfunktionen zu nutzen!

Bevor ich fortfahre, möchte ich Ihnen zeigen, wie Sie FaceIO auf einem Live-Server ausführen.

Laufen auf einem Live-Server:

• FaceIO erfordert, dass die JavaScript-Dateien von einem Live-HTTP-Server bereitgestellt werden, nicht von file://-URLs (lokale Dateien).
• Stellen Sie sicher, dass Sie Ihre HTML-Datei auf einem Server ausführen. Sie können Tools wie die Live Server-Erweiterung von VS Code oder Node.js verwenden.

Installieren Sie zunächst node.js auf Ihrem Computer und installieren Sie dann das folgende Paket im FaceIO-Projekt:

   <script src="https://cdn.faceio.net/fio.js"></script>

Dann verwenden Sie es mit dem folgenden Befehl:

   <button onclick="enrollNewUser()">Enroll New User</button>
   <button onclick="authenticateUser()">Authenticate User</button>

Hier ist der Live-Server-Link in Ihrem vscode-Terminal:

Umgang mit Fehlern?

Nicht immer läuft alles reibungslos, daher müssen wir Fehler beheben, wenn sie auftreten. Hier ist eine Funktion, die das tut:

function enrollNewUser() {
    const faceio = new faceIO("app-public-id"); // Replace with your app's ID

    faceio.enroll({
        locale: "en", // This sets the language to English
        payload: {
            email: "user@example.com" // Link this user's email or any other unique ID
        }
    }).then(userInfo => {
        console.log("User enrolled successfully!");
        console.log("User ID: " + userInfo.facialId);
        console.log("Enrollment Date: " + userInfo.timestamp);
        alert("Enrollment successful! Welcome, user.");
    }).catch(err => {
        handleError(err);
    });
}

?‍♂️ Was bewirkt dieser Code?

• Es nimmt einen Fehlercode und ordnet ihn einer bestimmten Nachricht zu.
• Wenn ein Benutzer beispielsweise den Zugriff auf die Kamera nicht zulässt, wird ihm mitgeteilt, dass er sie aktivieren muss.
• Jeder Fehlerfall hilft dem Benutzer zu verstehen, was schief gelaufen ist und was als nächstes zu tun ist.

Warum benötigt FaceIO einen HTTP-Server? ?

Sie fragen sich vielleicht, warum dieser Code auf einem Server ausgeführt werden muss, anstatt ihn einfach als normale Datei in Ihrem Browser zu öffnen. Hier ist der Grund:

1. ?‍? JavaScript und Sicherheit:

   • JavaScript-Code wird in Ihrem Browser ausgeführt (clientseitig). Aus Sicherheitsgründen kann es jedoch nicht direkt mit einem Server kommunizieren, der nicht der ist, von dem es stammt.
   • Dies wird als Same-Origin-Richtlinie bezeichnet. Es schützt Ihre Daten vor dem Zugriff durch Websites, die Sie nicht geöffnet haben.

2. ?️ FaceIO muss mit seinem Server kommunizieren:

   • Wenn Sie ein Gesicht registrieren oder authentifizieren, sendet die FaceIO-Bibliothek Informationen an ihren Server, um Daten zu vergleichen oder zu speichern.
   • Um dies sicher zu tun, muss es von einer richtigen Webadresse (wie http://IhreWebsite.com) stammen und nicht nur von einer lokalen Datei auf Ihrem Computer.

Verwalten Sie Ihre App mit der FaceIO-Konsole?

FaceIO bietet einen webbasierten Anwendungsmanager. Dies ist wie ein Dashboard, über das Sie alles über Ihre App steuern können:

• ? Benutzerverwaltung: Benutzer hinzufügen, bearbeiten oder löschen.
• ? Gruppenverwaltung: Teilen Sie Benutzer in Gruppen ein, um sie besser verwalten zu können.
• ? Berechtigungsverwaltung: Entscheiden Sie, wer was in Ihrer App tun kann.
• ? Überwachungsanalysen: Überprüfen Sie, wie viele Benutzer Ihre App verwenden und wie sie damit interagieren.
• ? Sicherheitsfunktionen: Nutzen Sie Dinge wie die Multi-Faktor-Authentifizierung, um Ihre App sicherer zu machen.

Zusammenfassung der wichtigsten Punkte ♻️

1. FaceIO hilft Websites, Benutzer mithilfe der Gesichtserkennung zu erkennen, wodurch die Anmeldung schneller und sicherer wird.
2. Um FaceIO nutzen zu können, müssen Sie dessen JavaScript-Bibliothek einbinden, Schaltflächen erstellen und die Funktionen für die Registrierung und Authentifizierung von Benutzern einrichten.
3. Fehlerbehandlung ist wichtig, um Benutzer zu leiten, wenn etwas schief geht.
4. Ein HTTP-Server ist erforderlich, um die Sicherheitsregeln des Browsers zu umgehen und ordnungsgemäß mit den Servern von FaceIO zu kommunizieren.
5. Der Anwendungsmanager hilft Ihnen bei der Kontrolle von Benutzern, Einstellungen und Sicherheit.

Indem Sie diese Schritte befolgen, können Sie eine Website erstellen, auf der sich Benutzer anmelden können, indem sie einfach auf ihre Webcam schauen! Sie verwandeln Ihre Website in eine futuristische App, die Gesichter erkennt und sie benutzerfreundlicher und sicherer macht, um Ihren Interviewer oder Kunden anzulocken!

---

Ich hoffe, diese Erklärung war hilfreich! Es deckt alles ab, von der Funktionsweise von FaceIO bis hin zur Einrichtung und Verwaltung. Lassen Sie mich wissen, wenn Sie weitere Fragen haben!

Weiterlesen: Fähigkeiten, um in 6 Monaten Backend-Entwickler zu werden (Roadmap)

Das obige ist der detaillierte Inhalt vonPasswortlose Gesichtsauthentifizierung auf Websites! (FACEIO). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!