WebAuthn 开源项目使用教程

盛言广Red-Haired

于 2024-09-13 09:03:35 发布

阅读量918

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00807/article/details/142200438

版权

WebAuthn 开源项目使用教程

webauthn Webauthn / passkeys helper library to make your life easier. Client side, server side and demo included. 项目地址: https://gitcode.com/gh_mirrors/webaut/webauthn

1. 项目介绍

WebAuthn（Web Authentication）是一个由W3C和FIDO联盟共同制定的网络标准，旨在通过公钥加密技术替代传统的密码认证方式。该项目的目标是提供一种安全、便捷的用户认证机制，减少密码泄露和钓鱼攻击的风险。WebAuthn支持多种认证设备，如指纹识别、面部识别、安全密钥等，为用户提供多因素认证（MFA）的能力。

2. 项目快速启动

2.1 环境准备

在开始之前，请确保你已经安装了Node.js和npm。你可以通过以下命令检查是否已安装：

node -v
npm -v

如果没有安装，请访问Node.js官网进行安装。

2.2 安装项目

首先，克隆项目到本地：

git clone https://github.com/passwordless-id/webauthn.git
cd webauthn

然后，安装项目依赖：

npm install

2.3 运行示例

项目中包含一个简单的示例，你可以通过以下命令启动：

npm start

启动后，打开浏览器访问 http://localhost:3000，你将看到一个简单的WebAuthn注册和登录界面。

2.4 示例代码

以下是一个简单的WebAuthn注册和登录的示例代码：

// 注册
async function register() {
    const credential = await navigator.credentials.create({
        publicKey: {
            challenge: new Uint8Array([/* 随机挑战 */]),
            rp: { name: "Example Corp", id: "example.com" },
            user: { id: new Uint8Array([1, 2, 3]), name: "user@example.com", displayName: "User" },
            pubKeyCredParams: [{ type: "public-key", alg: -7 }],
        },
    });
    // 保存credential到服务器
}

// 登录
async function login() {
    const assertion = await navigator.credentials.get({
        publicKey: {
            challenge: new Uint8Array([/* 随机挑战 */]),
            allowCredentials: [{ type: "public-key", id: new Uint8Array([1, 2, 3]) }],
        },
    });
    // 验证assertion并登录
}