如何在 NextJS 中使用 U2F答案

【问题标题】：How to use U2F with NextJS如何在 NextJS 中使用 U2F
【发布时间】：2022-12-09 10:32:46
【问题描述】：

我正在尝试在我的 NextJS 项目中实现 U2F。目前我正在使用 NextJS 13（测试版）。我已经有了使用 u2f 库的服务器端代码，但如何在客户端实现它？

const U2F = require("u2f");
const Express = require("express");
const BodyParser = require("body-parser");
const Cors = require("cors");
const HTTPS = require("https");
const FS = require("fs");
const session = require("express-session");

const APP_ID = "https://localhost:2015";

const server = Express();

server.use(session({ secret: "123456", cookie: { secure: true, maxAge: 60000 }, saveUninitialized: true, resave: true }));
server.use(BodyParser.json());
server.use(BodyParser.urlencoded({ extended: true }));
server.use(Cors({ origin: [APP_ID], credentials: true }));

let user;

server.get("/register", (request, response, next) => {
    request.session.u2f = U2F.request(APP_ID);
    response.send(request.session.u2f);
});

server.post("/register", (request, response, next) => {
    const registration = U2F.checkRegistration(request.session.u2f, request.body.registerResponse);
    if(!registration.successful) {
        return response.status(500).send({ message: "error" });
    }
    user = registration;
    response.send({ message: "The hardware key has been registered" });
});

server.get("/login", (request, response, next) => {
    request.session.u2f = U2F.request(APP_ID, user.keyHandle);
    response.send(request.session.u2f);
});

server.post("/login", (request, response, next) => {
    const success = U2F.checkSignature(request.session.u2f, request.body.loginResponse, user.publicKey);
    response.send(success);
});

HTTPS.createServer({
    key: FS.readFileSync("server.key"),
    cert: FS.readFileSync("server.cert")
}, server).listen(443, () => {
    console.log("Listening at :443...");
});

编辑：我发现这些天你应该使用 WebAuthn。你们有没有很好的教程来解释如何将它与 nextjs 一起使用？

【问题讨论】：

标签： node.js authentication next.js webauthn fido-u2f

【解决方案1】：

编辑：也许这更适合你，因为它已经在反应中实现了：https://github.com/csalas-yubico/webauthn-client

好吧，我无法做比已经存在的更好的演示，并且在https://webauthn.org 上是开源的，你可以在这里查看源代码https://github.com/webauthn-open-source/webauthn-yubiclone 并在https://github.com/webauthn-open-source/webauthn-simple-app/ 上找到关于 WebAuthn 参考实现的更多信息我认为这将提供你有一个良好的开端来实现它的客户端。它与您使用的框架无关，例如Next.js 或其他任何东西，这里有一个用于该参考实现的 ES6 分支https://github.com/webauthn-open-source/webauthn-simple-app/tree/es6-module，因此您可以在使用现代 Web 框架时从那里开始。

但简而言之，您基本上初始化库并注册您的 U2F 密钥或使用已注册的密钥登录，非常简单，您必须在客户端组件/前端中实现这两种情况：

// register a new device / account
var waApp = new WebAuthnApp()
waApp.username = "me";
waApp.register()
    .then(() => {
        alert("You are now registered!");
    })
    .catch((err) => {
        alert("Registration error: " + err.message);
    });

// log in to a previously registered account
var waApp = new WebAuthnApp()
waApp.username = "me";
waApp.login()
    .then(() => {
        alert("You are now logged in!");
    })
    .catch((err) => {
        alert("Log in error: " + err.message);
    });

【讨论】：