返回资源列表

freeCodeCamp · Roland Mweze

How to Build Passkey Authentication with WebAuthn, Next.js and NestJS

How to Build Passkey Authentication with WebAuthn, Next.js and NestJS是freeCodeCamp的免费文章(en)。前置条件:需要熟悉 TypeScript 和 React;了解 controller 与 service 概念有助于理解 NestJS 部分。

能理解 passkey/WebAuthn 的原理与密码认证的痛点,并用 Next.js + NestJS + PostgreSQL 实现基于公钥的 passkey 注册与登录,同时避开常见安全实现错误。

打开官方课程
难度
见前置条件
类型
教程 · 文章
语言
en
规模
1 个课节
内容费用
免费
动手
需要动手环境

使用限制

在线即可阅读教程全文;动手实践需本地环境与支持 passkey 的设备。

补充内容
GitHub 账号访问作者示例代码仓库(可选)
  1. 选择学习环境

    按你的电脑系统准备;提示词在你自己的电脑上使用。

    本机动手

    按文章的目录顺序推进:先理解密码认证问题与 passkey 原理,再搭后端、写前端、最后测试并检查安全误区。

    Node.js 22 及以上、PostgreSQL(可用 Postgres.app 或 pgAdmin),以及支持 passkey 的设备(Touch ID、Windows Hello、Android/iPhone 等)。

  2. 准备工具和账号

    标“选用”的可以跳过。

    运行费用:实践费用待核验,练习需在本地安装 Node.js 与 PostgreSQL,网页未说明是否产生云服务或 API 费用。

  3. 让 AI Agent 一次搭好课程

    复制开课提示词发给你常用的 AI Agent。它会下载允许保存的官方材料、建立课节目录并自检;需要账号、权限或费用时会先问你。

    开课提示词 · 只需用一次此提示词尚未实测验证
    请帮我把「How to Build Passkey Authentication with WebAuthn, Next.js and NestJS」的学习环境一次准备好,让我之后只需要按顺序学习和做练习。
    开始前先问我:课程放在哪个目录(等我给出完整路径),确认我的操作系统和已有工具。确认前不要创建文件或安装软件。
    
    课程入口:https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
    我的系统:Windows。如果实际不符,先调整方案。
    本次路线:Windows:本机动手。只准备这条路线需要的工具;只读路线不安装运行环境、不配置模型密钥。
    练习:按教程在本地搭建 NestJS + Next.js 项目,用 PostgreSQL 保存用户与 passkey,并用真实设备完成注册与登录测试。
    课节(官方顺序):
    1. How to Build Passkey Authentication with WebAuthn, Next.js and NestJS:https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
    
    1. 环境
    - Node.js 22 及以上
    - PostgreSQL 数据库
    - 支持 passkey 的浏览器与设备
    - 安装前先列出要装的软件和命令,等我同意;已装好的直接复用。
    2. 材料
    - 官方课程页面:只记录链接 https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/
    3. 目录(最外层放在我确认的位置)
    passkey-auth-webauthn-nextjs-nestjs/
    ├── README.md        # 课程入口、课节清单、每次怎么开始
    ├── progress.md      # 每课:读讲义 / 做练习 / 记笔记
    ├── questions.md     # 待解决的问题
    ├── check-env.ps1     # 环境自检,按 README 操作
    ├── data/            # 练习用到的样例数据
    └── lessons/         # 每课一个文件夹:notes.md + exercises/
        └── 01-01-how-to-build-passkey-authentication/
    - 每课文件夹里建 notes.md(顶部写本课官方链接)和 exercises/;课节文件夹名称与上面一致。
    - 已有课程目录先检查并复用;不覆盖笔记、作业或 progress.md,不重置已有进度。尚未发布的课节保留入口并注明未发布,不能代写讲义或虚构练习。
    4. 自检
    - 创建 check-env.ps1,逐项检查并记录“通过/未通过”:
    - 在课程根目录运行;每项检查独立执行,进入子目录不能影响下一项。将下面检查转换为 PowerShell 命令,不使用 Bash 语法。
      - node -v  → 输出 v22 或更高版本
      - psql --version  → 能打印 PostgreSQL 版本,说明数据库工具就绪
      - 打开教程页确认目录中的后端、前端、测试章节均可阅读  → 能看到完整步骤内容而非付费提示
    - 标注为人工检查、浏览器操作或 notebook 单元的项目,按相应方式操作,不直接粘贴进 shell;脚本只包含当前系统可执行的命令。
    - 仅在当前路线需要、对应材料已获准保存、工具已安装时运行该项;需要登录、付费或尚未开放的材料记为“需要我操作/未验证”,不能伪报通过。不执行会调用付费 API、提交作业或修改云服务的检查。
    - 运行一次,把结果给我看;未通过的项目说明原因和修复办法。
    5. 学习计划
    - README.md:课程入口、课节清单(带链接)、每次学习怎么开始(使用“每课提示词”)。
    - progress.md:每课三项勾选——读讲义、做练习、记笔记。
    6. 最后分三部分汇报:已完成、需要我自己操作的、尚未验证的。
    
    边界:
    - 需要管理员权限、会产生费用或需要填写密钥的操作,先告诉我原因,等我同意。密钥由我在本机配置,不发到聊天,不写进笔记或版本库;原项目需要 .env 时确认已被 Git 忽略。
    - 不替我写练习或作业答案,也不替我提交。我卡住时只给提示;我明确要求时才给解答。
    - 只下载许可允许个人保存的材料;其余只放链接。不把未运行的命令说成成功。
    如果你不能直接操作我的文件系统,请在确认目录后给出适用于我的系统、可直接执行的命令和需要保存的文件内容。
    搭好后的课程目录
    passkey-auth-webauthn-nextjs-nestjs/
    ├── README.md        # 课程入口、课节清单、每次怎么开始
    ├── progress.md      # 每课:读讲义 / 做练习 / 记笔记
    ├── questions.md     # 待解决的问题
    ├── check-env.ps1     # 环境自检,按 README 操作
    ├── data/            # 练习用到的样例数据
    └── lessons/         # 每课一个文件夹:notes.md + exercises/
        └── 01-01-how-to-build-passkey-authentication/
准备好了,开始学习

常见问题

免费吗?

免费:节选正文即为完整教程内容,可直接阅读全部步骤,未见付费墙或登录拦截。实践费用待核验:练习需在本地安装 Node.js 与 PostgreSQL,网页未说明是否产生云服务或 API 费用。

需要什么基础?

需要熟悉 TypeScript 和 React;了解 controller 与 service 概念有助于理解 NestJS 部分。软件、账号与硬件:Node.js 22 及以上、PostgreSQL(可用 Postgres.app 或 pgAdmin),以及支持 passkey 的设备(Touch ID、Windows Hello、Android/iPhone 等)。

有中文吗?

本站记录的语言是en;是否有中文字幕或译本本站未核实,请以原站为准。

怎么开始?

从原始资源入口开始:https://www.freecodecamp.org/news/how-to-build-passkey-authentication-with-webauthn-next-js-and-nestjs/。本页“学前准备”列出环境与工具,“学习指南”给出开课提示词,可以在自己的电脑上按步骤开始。开课提示词尚未完整验证。补充内容需要自备:GitHub 账号访问作者示例代码仓库(可选)。

来源与使用须知

原始资源
freeCodeCamp
收录时间
本站首次收录 2026-10-28原站首次发布 2026-10-28
指南参考

版权与转载

  • 课程材料未标明许可:仅供个人学习,转载、修改或商用前请先联系原作者。
  • 本站只提供原始链接和学习指南,不转载、不镜像课程材料;引用时请注明原作者与出处。