網站上的無密碼臉部認證！ （法塞奧）

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

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

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

這很有幫助，因為：

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

FaceIO 的工作原理是什麼？

FaceIO 有兩個主要操作：

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

在網頁中設定 FaceIO ？ ️

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

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

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

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

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

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

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

註冊用戶？

保存新用戶臉部的過程稱為註冊。這是它的 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），請按照以下簡單步驟操作：**

1. 註冊 FaceIO:

   • 如果您還沒有帳戶，請造訪 FaceIO 網站並註冊一個帳戶。
   • 使用您的新帳號登入。

2. 建立新應用程式：

   • 登入後，前往儀表板。
   • 點選「建立新應用程式」。
   • 填寫所需的詳細信息，例如您的應用程式名稱和描述，然後按一下「建立」。

1. 尋找應用程式公用 ID:

   • 建立應用程式後，您將看到它列在儀表板上的「應用程式」部分。
   • 在這裡，您將找到您的應用公共 ID。這是您將在 JavaScript 程式碼中使用的 API 金鑰，用於將您的網站與 FaceIO 連接。

2. 複製應用公用 ID:

   • 點選應用公用ID旁的複製圖示進行複製。
   • 現在，您可以將此金鑰貼到程式碼中顯示「app-public-id」的位置。

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

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

現在，您的應用程式已連接到 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>

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

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

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

處理錯誤？

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

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 伺服器？ ？

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

1. ?‍? JavaScript 與安全性:

   • JavaScript 程式碼在您的瀏覽器（客戶端）中運作。但出於安全原因，它無法直接與非其來源的伺服器通訊。
   • 這稱為同源策略。它可以保護您的資料安全，防止您未開啟的網站存取。

2. ？ ️ FaceIO 需要與其伺服器對話：

   • 當您註冊或驗證人臉時，FaceIO 庫會將資訊傳送至其伺服器以比較或儲存資料。
   • 為了安全地執行此操作，它必須來自正確的網址（例如 http://yourwebsite.com），而不僅僅是電腦上的本機檔案。

使用 FaceIO 控制台管理您的應用程式？

FaceIO 提供網路為基礎的應用程式管理員。這就像一個儀表板，您可以在其中控制應用程式的所有內容：

• ？使用者管理：新增、編輯或刪除使用者。
• ？群組管理：將使用者分組，以便更好地管理。
• ？權限管理：決定誰可以在您的應用程式中執行哪些操作。
• ？監控分析：檢查有多少用戶正在使用您的應用程式以及他們如何與之互動。
• ？安全功能：使用多重身份驗證等功能使您的應用程式更安全。

重點回顧♻️

1. FaceIO 幫助網站使用臉部辨識來識別用戶，使登入更快、更安全。
2. 要使用 FaceIO，您需要包含其 JavaScript 函式庫、建立按鈕並設定用於註冊和驗證使用者的功能。
3. 錯誤處理對於在出現問題時指導使用者非常重要。
4. 需要HTTP 伺服器來繞過瀏覽器安全規則並與 FaceIO 的伺服器正常通訊。
5. 應用程式管理員可協助您控制使用者、設定和安全性。

按照以下步驟，您可以製作一個網站，用戶只需查看網路攝影機即可登入！您正在將您的網站變成一個未來派應用程序，可以識別面孔，並使其更加用戶友好和安全，以吸引您的面試官或客戶！

---

希望這個解釋對您有幫助！它涵蓋了從 FaceIO 的工作原理到設定和管理的所有內容。如果您還有任何疑問，請告訴我！

閱讀更多： 6 個月內成為後端開發人員的技能（路線圖）

以上是網站上的無密碼臉部認證！ （法塞奧）的詳細內容。更多資訊請關注PHP中文網其他相關文章！