开发者指南：如何实现Passkeys

本指南解释了开发者如何集成基于Passkeys的身份认证，以增强安全性和用户体验。它涵盖了手动实现Passkeys的服务器和客户端设置，同时展示了Descope如何通过可视化界面和预构建流程简化此过程，实现轻松设置和维护。

本教程由Kumar Harsh撰写，他是一位位于印度的软件开发人员和技术作者。您可以访问他的网站查看更多作品！

将Passkeys纳入应用程序的身份认证流程可以显著提高安全性和用户便利性。本开发者指南为您提供了实现Passkeys所需步骤的全面概述，从初始设置到最终部署。通过遵循这些指南，您可以为用户创建无缝且安全的认证体验，减少未经授权访问的风险，并增强对应用程序的整体信任。

Passkey认证TLDR

与容易受到暴力攻击和网络钓鱼诈骗的密码不同，Passkeys利用公钥加密技术的力量来改善用户体验和安全性。想象一个保险库，您的身份被锁在里面，只能通过唯一的密钥对访问。Passkeys的功能类似于此，每个用户拥有一个私钥（主密钥安全保存在其设备上）和一个与网站共享的公钥。

登录时，网站向用户的设备发送一个挑战，即一个数字谜题。私钥然后创建一个唯一的签名，即数字指纹，证明您的身份而不暴露实际密钥。这确保即使网站被入侵，您的登录仍然安全。

以下是一个快速图表帮助您更好地理解此过程：

如何实现Passkeys

虽然Passkeys的概念听起来非常令人兴奋，但从头开始实现Passkeys相当复杂。在本节中，您将学习如何从头开始实现Passkey认证，然后了解Descope如何使此过程更加简化。

在不使用第三方库的情况下在应用程序中实现Passkeys在技术上是可行的。然而，由于设置的复杂性和涉及的安全风险，强烈不推荐这样做。最好选择一个支持的库并遵循其文档在您的应用程序中实现Passkeys。

一般来说，实现需要您执行以下操作：

服务器端设置：您需要在服务器上实现密钥生成、签名验证和认证处理。您还需要与数据库或用户管理系统集成，以存储和检索用户信息和Passkey凭据。
前端集成：一旦服务器设置完成，您可以使用JavaScript的navigator.credentials.create()和navigator.credentials.get()方法在客户端启动注册和认证流程。客户端需要引导用户与其认证设备（例如指纹扫描、PIN输入和其他设备）进行交互，并将注册和认证数据发送到您的服务器进行处理。

最好使用可信库，如SimpleWebAuthn，来简化此过程。该库负责为您实现密钥生成和处理，并使过程比从头开始简单得多。

如果您有兴趣学习如何使用SimpleWebAuthn从头开始在项目中实现Passkeys，可以查看此示例项目。该项目包括一个基于React的客户端和一个基于Node.js + Express的服务器。

服务器端设置

服务器使用@simple-webauthn/server包暴露四个重要端点：

/generate-registration-options：此端点配置并生成客户端的可用注册选项列表。它使用当前登录用户的详细信息来确保同一设备不会多次注册。它还生成并发送一个挑战，客户端可以使用它来注册新设备。
/verify-registration：此端点验证设备上的注册是否成功。成功验证后，用户的注册详细信息（其公钥、凭据ID和设备信息）将保存在数据库中。
/generate-authentication-options：此端点返回用户的可用认证选项。服务器在此步骤中查找设备表，并检索用户注册设备的设备ID，以允许通过该设备进行认证。
/verify-authentication：此端点用于验证设备上的认证是否成功。它还验证是否使用了注册设备进行认证。

此服务器实现假设您已执行简单的初始认证以识别用户，并收集其内部ID（如UUID）以触发注册和认证流程。在实际场景中，您需要自己实现此步骤，并将用户ID插入代码中的loggedInUserId变量。

另一点需要注意的是，此实现当前不包括与数据库的集成以存储和检索用户凭据。这是您在生产环境中需要处理的另一项任务。添加用户认证数据库还需要额外的维护。

客户端设置

此方法的客户端实现相对简单。您需要设置两个按钮：一个用于触发Passkeys注册，另一个用于触发认证。

在onRegistrationStart事件中，您需要向/generate-registration-options端点发出请求，首先从后端获取认证配置。然后，您使用这些选项通过@simple-webauthn/browser包中的startRegistration()函数在前端启动注册仪式。

一旦您从startRegistration()调用获得成功响应（即设备上的Passkey生成成功完成），您然后向/verify-registration端点发出请求，使用startRegistration()调用返回的响应来验证注册是否成功。服务器验证注册结果，并在成功注册后将设备详细信息存储在数据库中。

认证时，逻辑类似。您向/generate-authentication-options端点发出请求，并使用后端服务器返回的响应调用@simple-webauthn/browser包中的startAuthentication()方法。这会启动用户的设备上验证并生成中间响应。您然后将此响应发送到/verify-authentication端点以完成认证过程，并授予用户对应用程序的访问权限。

如您所见，此方法相当复杂，需要额外的设置和维护用于用户识别和认证数据存储。此外，如果您希望通过HTTPS部署此功能，您需要遵循SimpleWebAuthn文档中概述的额外步骤以确保安全。

因此，让我们现在看看如何使用Descope简化Passkey实现，并省去麻烦。

使用Descope更简单地实现Passkeys

与其从头开始设置Passkeys，甚至费心学习专用的第三方Passkeys库如何工作，您可能更适合使用像Descope这样的解决方案，它可以通过简化的无代码界面帮助您实现Passkeys以及其他认证模式。

创建Descope流程

要尝试，请前往Descope的网站并注册一个永久免费账户。一旦您访问其开发者仪表板，您可以开始创建您的认证流程。点击左侧导航面板中的“Getting Started”：

点击“Consumers”开始为用户面向的应用程序构建认证流程。然后点击右下角的蓝色“Next”按钮。

在下一个屏幕上，选择“Passkeys (WebAuthn)”作为主要认证方法，并点击蓝色“Next”按钮：

在下一个屏幕上，您可以选择一个额外的认证方法作为2FA流程的一部分：

您可以通过点击右下角的“Go ahead without MFA”按钮跳过此步骤。然后您需要选择一个登录屏幕，这可能包括一个额外的注册方法，以允许用户注册并在其设备上设置Passkeys，然后才能开始使用它们：

在此步骤中随意选择任何登录屏幕。最后，点击“Next”按钮预览您的选择。如果一切看起来不错，点击“Next”按钮。Descope现在将创建您的认证流程，并提供一个示例代码片段以开始使用它们：

代码片段包含您的项目ID。您只需要项目ID来配置Descope客户端或服务器SDK，以在您的应用程序中使用您的认证流程。

设置React项目

要尝试您的Descope流程，请在本地运行以下命令创建一个新的React项目：

1

npm create vite

选择React作为框架，选择JavaScript作为语言，并为您的项目命名（例如passkeys-descope）。

项目准备就绪后，您需要通过运行以下命令安装React Descope SDK：

1

npm install @descope/react-sdk

这就是您需要的所有设置。现在您可以开始编写代码以集成您的认证流程。

您需要修改两个文件以将Descope集成到您的项目中。首先，您需要在main.jsx文件中设置Descope AuthProvider，以允许在整个应用程序中访问认证逻辑。为此，将main.js中的代码替换为以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { AuthProvider } from '@descope/react-sdk';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <AuthProvider
            projectId='<your-project-id>'
        >
            <App />
        </AuthProvider>
    </React.StrictMode>
);

您现在可以使用Descope组件和钩子根据需要设置应用程序中的认证。以下是一个简单的示例实现，您可以使用它来尝试应用程序中的Passkeys认证流程：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


// 将您的App.js内容替换为以下

import { useCallback } from 'react'

import { useDescope, useSession, useUser } from '@descope/react-sdk'
import { Descope } from '@descope/react-sdk'

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

  const handleLogout = useCallback(() => {
    logout()
  }, [logout])

  return <>
    {!isAuthenticated &&
      (<div style={{display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100vh"}}>
        <div style={{ maxWidth: "500px" }}>
          <Descope
            flowId="sign-up-or-in"
            onSuccess={(e) => console.log(e.detail.user)}
            onError={(e) => console.log('Could not log in!')}
          />
        </div>
      </div>
      )

    }

    {
      (isSessionLoading || isUserLoading) && <p>Loading...</p>
    }

    {!isUserLoading && isAuthenticated &&
      (
        <>
          <p>Logged in!</p>
          <button onClick={handleLogout}>Logout</button>
        </>
      )
    }
  </>;
}

export default App;

就是这样！您现在可以尝试使用Passkeys的认证流程。

尝试应用程序

要尝试应用程序，运行以下命令：

1

npm run dev

前往http://localhost:5173查看应用程序。注册时，您需要使用社交流程或任何其他流程注册新用户并在其设备上设置Passkey。根据您的偏好点击“Continue with Google”或“Continue with Microsoft”并选择一个账户。

一旦您这样做，您将被要求提供其他详细信息，例如您的姓名，作为注册过程的一部分：

接下来，您将被问是否要为此账户设置Passkeys：

点击蓝色的“Add passkeys”按钮。Chrome然后将要求您确认Passkey的创建：

一旦您点击“Continue”，您将被要求通过设备登录验证您的身份，例如生物识别（Touch ID）或设备PIN（如果您已设置）：

一旦您验证了您的账户，Passkeys将被设置，并且您将登录：

您现在可以尝试使用Passkeys登录。为此，点击“Logout”按钮并在Passkeys输入框中输入您的用户ID（在这种情况下是您的电子邮件）：

一旦您点击“Sign in with Passkeys”按钮，您将被要求在您的设备上验证您的身份以访问您本地存储的Passkeys：

一旦您验证了您的身份，您将直接登录，无需输入任何应用程序特定的密码或PIN！

此外，您还可以启用Passkeys自动填充，为用户提供更好的登录体验。为此，在您的Descope仪表板中导航到“Sign Up or In”流程，并导航到“Welcome Screen”页面：

在此页面上，在右侧窗格中切换“Enable sign in with Passkey Autofill”，并点击右上角的“Done > Save”。这将在Passkey输入框中启用自动填充选项。要测试它，导航到登录屏幕并点击Passkey输入框。您应该看到一个类似于以下的自动填充列表：

您可以在此GitHub仓库中找到本教程中构建的应用程序的完整代码。

使用Descope的拖放Passkey认证

Descope简化了在您的应用程序中实现Passkeys的过程，消除了从头开始手动设置复杂客户端和服务器端认证逻辑的需要。它提供了一个可视化工作流，用于管理用户面向的屏幕以进行渐进式分析、后端认证逻辑以及跨不同认证方法的用户身份合并。

这种方法不仅使入门变得简单，还简化了随时间修改用户旅程的过程。

Descope提供直观的工具和清晰的说明，使所有技能水平的开发者能够将安全、无缝的登录流程集成到他们的应用程序中。通过拖放功能，即使是初学者也可以轻松实现认证流程，使用户能够更快、更简单、更易于访问地登录。

通过注册永久免费账户查看Descope。如果您有问题，请与Descope认证专家预约时间以了解更多信息。