網站上的無密碼臉部認證！（法塞奧）-js教程-PHP中文網

什麼是 FaceIO，為什麼要用它？？

FaceIO 是一項允許網站和應用程式使用網路攝影機透過臉部辨識人員的服務。

使用者無需輸入密碼或使用指紋，只需看著鏡頭，應用程式就可以確認他們是誰。

Passwordless Facial Authentication on Websites! (FACEIO)

這很有幫助，因為：

⚡ 比輸入密碼快。
？它更安全，因為只有擁有該面孔的人才能存取該應用程式。
？用戶無需記住複雜的密碼。

FaceIO 的工作原理是什麼？

Passwordless Facial Authentication on Websites! (FACEIO)

FaceIO 有兩個主要操作：

⛳ 註冊用戶：表示第一次錄製使用者的臉部。
？驗證使用者：這表示檢查鏡頭前的人是否與先前註冊的人相同。

在網頁中設定 FaceIO ？ ️

要使用 FaceIO，您需要將他們的 JavaScript 程式庫（執行臉部偵測的特殊程式碼）新增至您的網站。操作方法如下：

1。包含腳本:
在 HTML 檔案中新增指向 FaceIO 庫的腳本標籤：

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

登入後複製

？此腳本允許您的網站使用 FaceIO 的功能。

Passwordless Facial Authentication on Websites! (FACEIO)

2。建立用於註冊和身份驗證的按鈕:
在 HTML 中，新增兩個按鈕：

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

登入後複製

？當使用者點擊這些按鈕時，他們將註冊（保存他們的臉部）或進行身份驗證（檢查他們的臉部）。

Passwordless Facial Authentication on Websites! (FACEIO)

註冊用戶？

保存新用戶臉部的過程稱為註冊。這是它的 JavaScript 程式碼：

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);
    });
}

登入後複製

？ ‍♂️ 這段程式碼有什麼作用？

它從 FaceIO 呼叫 enroll() 函數來啟動該過程。
locale 表示使用者喜歡的語言。
有效負載是有關使用者的額外資訊（例如他們的電子郵件或ID）。
如果成功，會顯示一則訊息「註冊成功！」並記錄使用者 ID 和日期等詳細資訊。
如果不起作用，它會呼叫handleError()函數來檢查出了什麼問題。

驗證用戶身份？

這是檢查使用者是否是他們所聲稱的人臉的方法：

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

登入後複製

？ ‍♂️ 這段程式碼有什麼作用？

它使用 FaceIO 中的authenticate() 方法。
如果成功，它會記錄一條訊息並歡迎用戶回來。
如果沒有，它會呼叫handleError()來了解問題。

要在 FaceIO 中取得 API 金鑰（也稱為 **應用程式公用 ID），請按照以下簡單步驟操作：**

註冊 FaceIO:
- 如果您還沒有帳戶，請造訪 FaceIO 網站並註冊一個帳戶。
- 使用您的新帳號登入。
建立新應用程式：
- 登入後，前往儀表板。
- 點選「建立新應用程式」。
- 填寫所需的詳細信息，例如您的應用程式名稱和描述，然後按一下「建立」。

Passwordless Facial Authentication on Websites! (FACEIO)

尋找應用程式公用 ID:
- 建立應用程式後，您將看到它列在儀表板上的「應用程式」部分。
- 在這裡，您將找到您的應用公共 ID。這是您將在 JavaScript 程式碼中使用的 API 金鑰，用於將您的網站與 FaceIO 連接。
複製應用公用 ID:
- 點選應用公用ID旁的複製圖示進行複製。
- 現在，您可以將此金鑰貼到程式碼中顯示「app-public-id」的位置。

範例：將 JavaScript 程式碼中的「app-public-id」替換為您的實際應用公共 ID：

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

登入後複製

Passwordless Facial Authentication on Websites! (FACEIO)

現在，您的應用程式已連接到 FaceIO，並準備好使用臉部辨識功能！

在開始之前，讓我向您展示如何在實時伺服器上運行 FaceIO。

在即時伺服器上運作：

FaceIO 要求 JavaScript 檔案由即時 HTTP 伺服器提供，而不是來自 file:// URL（本機檔案）。
確保您正在伺服器上執行 HTML 檔案。您可以使用 VS Code 的 Live Server 擴充功能或 Node.js 等工具。

首先，在電腦中安裝node.js，然後在FaceIO專案中安裝以下套件：

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

登入後複製

Passwordless Facial Authentication on Websites! (FACEIO)

然後透過以下命令使用它：

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

登入後複製

這是您的 vscode 終端機中的即時伺服器連結：

Passwordless Facial Authentication on Websites! (FACEIO)

處理錯誤？

並不是所有事情都一直順利，所以我們需要在錯誤發生時進行處理。這是一個執行此操作的函數：

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);
    });
}

登入後複製

？ ‍♂️ 這段程式碼有什麼作用？

它需要一個錯誤代碼並將其與特定訊息相匹配。
例如，如果使用者不允許存取相機，它會告訴他們需要啟用它。
每個錯誤案例都可以幫助使用者了解出了什麼問題以及下一步該做什麼。

為什麼 FaceIO 需要 HTTP 伺服器？？

您可能想知道為什麼此程式碼需要在伺服器上運行，而不是僅僅在瀏覽器中將其作為常規檔案開啟。原因如下：

?‍? JavaScript 與安全性:
- JavaScript 程式碼在您的瀏覽器（客戶端）中運作。但出於安全原因，它無法直接與非其來源的伺服器通訊。
- 這稱為同源策略。它可以保護您的資料安全，防止您未開啟的網站存取。
？ ️ FaceIO 需要與其伺服器對話：
- 當您註冊或驗證人臉時，FaceIO 庫會將資訊傳送至其伺服器以比較或儲存資料。
- 為了安全地執行此操作，它必須來自正確的網址（例如 http://yourwebsite.com），而不僅僅是電腦上的本機檔案。