>本指南向开发人员展示了如何添加基于Passkey的身份验证以获得更好的安全性和用户体验。 它可以解释手动服务器和客户端设置，以及如何通过视觉界面和预构建的流量简化下降。
>本教程由印度的软件开发人员和技术作者Kumar Harsh撰写。在他的网站上查看他的更多作品！ 使用PassKeys改善了应用程序安全性和用户的便利性。本指南详细详细介绍了Passkey实施，从设置到部署。 按照这些步骤创造安全且用户友好的身份验证体验，减少未经授权的访问和构建用户信任。
passkey身份验证：基础知识
>与脆弱的密码不同，Passkeys使用公开密码学来增强安全性和用户体验。想想一个保险库：您的身份是可以确保的，只能使用独特的密钥对访问。 Passkey的工作类似；每个用户都有一个私钥（安全存储在其设备上），并且与网站共享一个公共密钥。
这是一个视觉表示：
图：Passkey身份验证仪式
>
通常，手动实现涉及：
服务器端设置：
这包括密钥生成，签名验证，证明处理以及用于用户信息和Passkey凭据的数据库集成。>
前端集成：
navigator.credentials.create()navigator.credentials.get()>服务器端设置（使用SimpleWebauthn）服务器使用四个关键端点的
>软件包：/generate-registration-options：为客户端配置和生成注册选项，以防止同一设备中的多个注册。 它也会产生一个挑战。/verify-registration：在数据库中验证成功的设备注册并保存用户详细信息（公共密钥，凭据ID，设备信息）。/generate-authentication-options：返回身份验证选项，检索注册的设备ID。/verify-authentication：使用注册设备验证成功的设备身份验证。这个示例省略数据库集成；您需要将其添加到生产使用中。
客户端设置（使用simplewebauthn）
>客户需要两个按钮（用于注册和身份验证）。 onRegistrationStart>从/generate-registration-options>请求配置，然后使用startRegistration()>。 成功注册后，@simple-webauthn/browser验证结果。 身份验证遵循类似的模式，使用/verify-registration>，/generate-authentication-options和startAuthentication()。/verify-authentication。
>
更简单的方法：用discope 实现Passkey
> Descope简化了Passkey实现，消除了复杂的手动设置。 它提供了用于管理身份验证流的无代码接口。>
创建Descope Flow
创建一个新的React项目，使用
。npm create vite>在您的项目ID中配置npm install @descope/react-sdk中使用descope组件和钩子来实现身份验证流。AuthProvider
main.jsxApp.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中文网其他相关文章！
