开发人员指南：如何实施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。

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

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

> descope的拖放身份验证

> Discope简化了带有用于管理身份验证流的拖放接口的Passkey实现。这简化了设置和修改，使所有技能水平的开发人员都可以使用。 它允许更轻松，更快，更容易访问的登录。

>

>注册一个免费的下降帐户以了解更多信息。

>

以上是开发人员指南：如何实施Passkeys的详细内容。更多信息请关注PHP中文网其他相关文章！