開發人員指南：如何實施Passkeys

>本指南向開發人員展示瞭如何添加基於Passkey的身份驗證以獲得更好的安全性和用戶體驗。 它可以解釋手動服務器和客戶端設置，以及如何通過視覺界面和預構建的流量簡化下降。

>

本教程由印度的軟件開發人員和技術作者Kumar Harsh撰寫。在他的網站上查看他的更多作品！ 使用PassKeys改善了應用程序安全性和用戶的便利性。本指南詳細詳細介紹了Passkey實施，從設置到部署。 按照這些步驟創造安全且用戶友好的身份驗證體驗，減少未經授權的訪問和構建用戶信任。

passkey身份驗證：基礎知識

>與脆弱的密碼不同，Passkeys使用公開密碼學來增強安全性和用戶體驗。想想一個保險庫：您的身份是可以確保的，只能使用獨特的密鑰對訪問。 Passkey的工作類似；每個用戶都有一個私鑰（安全存儲在其設備上），並且與網站共享一個公共密鑰。 > 登錄涉及網站向用戶設備發送挑戰。私鑰會創建獨特的簽名（數字指紋），驗證身份而不揭示鑰匙本身。 即使網站遭到損害，這也可以確保登錄安全。

>

這是一個視覺表示：

圖：Passkey身份驗證儀式

>

實現PassKeys：手動方法（以及為什麼不應該）

雖然Passkey是創新的，但由於設置困難和安全風險，手動實施是複雜的，並且灰心。 最好使用受支持的庫。

通常，手動實現涉及：

服務器端設置：

這包括密鑰生成，簽名驗證，證明處理以及用於用戶信息和Passkey憑據的數據庫集成。 >>>>>

>

前端集成：

>使用JavaScript的
• 和，客戶端通過Authenticator Interactions（指紋掃描，引腳等）指導用戶，並將數據發送到服務器。
庫，例如簡單的Webauthn，簡化了這一點。 它處理密鑰生成，使過程比手動方法更容易。
• > （React Client和Node.js Express Server示例使用SimpleWebauthn可用。） navigator.credentials.create()navigator.credentials.get()>服務器端設置（使用SimpleWebauthn）

>

服務器使用四個關鍵端點的

>軟件包：>

1. /generate-registration-options：為客戶端配置和生成註冊選項，以防止同一設備中的多個註冊。 它也會產生一個挑戰。
2. /verify-registration：在數據庫中驗證成功的設備註冊並保存用戶詳細信息（公共密鑰，憑據ID，設備信息）。
3. /generate-authentication-options：返回身份驗證選項，檢索註冊的設備ID。
4. /verify-authentication：使用註冊設備驗證成功的設備身份驗證。

這個示例省略數據庫集成；您需要將其添加到生產使用中。

客戶端設置（使用simplewebauthn）

>

客戶需要兩個按鈕（用於註冊和身份驗證）。 onRegistrationStart>從/generate-registration-options>請求配置，然後使用使用startRegistration()>。 成功註冊後，@simple-webauthn/browser驗證結果。 身份驗證遵循類似的模式，使用/verify-registration>，/generate-authentication-options和startAuthentication()。 /verify-authentication。

此手動方法很複雜，需要其他設置和維護以進行用戶識別和數據存儲。 HTTPS設置需要額外的步驟。

>

更簡單的方法：用discope 實現Passkey

> Descope簡化了Passkey實現，消除了複雜的手動設置。 它提供了用於管理身份驗證流的無代碼接口。

>

創建Descope Flow

註冊Descope帳戶。
在儀表板中，創建一個auth Flow。選擇PassKeys（WebAuthn）作為主要方法。
>可選，添加一個2FA方法。
3. >
選擇一個登錄屏幕（可能使用其他註冊方法）。
4. > Descope生成您的驗證流，並為您的項目ID提供代碼段。
5. 設置React Project

創建一個新的React項目，使用

。

安裝Descope SDK：。
1. npm create vite>在您的項目ID中配置
2. >在npm install @descope/react-sdk中使用descope組件和鉤子來實現身份驗證流。 >
3. 這個簡化的示例顯示瞭如何整合Descope的註冊或登錄流程：> AuthProvider main.jsx
嘗試應用程序
4. App.js>
運行

，並在

>上訪問應用程序。 註冊用戶，設置PassKeys並進行測試登錄。 您也可以在Descope儀表板中啟用Passkey Autofill。

<code class="language-javascript">// Simplified App.js example
import { useDescope, useSession } from '@descope/react-sdk';
import { Descope } from '@descope/react-sdk';

const App = () => {
  const { isAuthenticated, isSessionLoading } = useSession();
  const { logout } = useDescope();

  return (
    <div>
      {!isAuthenticated && (
        <descope flowid="sign-up-or-in" onsuccess="{(e)"> console.log(e.detail.user)} onError={(e) => console.log('Error!')} />
      )}
      {isAuthenticated && <button onclick="{logout}">Logout</button>}
    </descope>
</div>
  );
};</code>

（完整的代碼可在GitHub上找到。）>

> descope的拖放身份驗證

> Discope簡化了帶有用於管理身份驗證流的拖放接口的Passkey實現。這簡化了設置和修改，使所有技能水平的開發人員都可以使用。 它允許更輕鬆，更快，更容易訪問的登錄。

>

>註冊一個免費的下降帳戶以了解更多信息。

>

以上是開發人員指南：如何實施Passkeys的詳細內容。更多資訊請關注PHP中文網其他相關文章！