글: 오게네테가 데네도✏️
비밀번호를 기억하고 저장하는 것은 사용자에게 매우 번거로울 수 있습니다. 로그인이 모든 사람에게 전반적으로 더 쉽다고 상상해보세요. 이것이 바로 WebAuthn, 즉 웹 인증 API가 등장하는 곳입니다. WebAuthn은 비밀번호 없는 미래를 제공하는 것을 목표로 합니다.
이 기사에서는 WebAuthn의 작동 원리를 다루고 공개 키 암호화를 사용하여 보안을 유지하는 방법을 자세히 설명합니다. 또한 API를 실제로 사용하는 방법을 배울 수 있도록 간단한 웹 앱에 WebAuthn을 통합하는 방법도 안내합니다.
다른 솔루션과 마찬가지로 WebAuthn에도 좋은 면과 좋지 않은 면이 있습니다. 귀하의 인증 요구 사항에 가장 적합한지 판단할 수 있도록 장점과 단점을 검토해 보겠습니다. 비밀번호 문제에 작별을 고하고 WebAuthn을 통해 원활한 로그인 환경에 대한 약속을 살펴보세요.
WebAuthn에 대해 배우기 전에 알아야 할 사항
WebAuthn을 사용하여 비밀번호 없는 로그인을 구현하기 전에 다음 전제 조건을 충족하는 것이 중요합니다.
- 컴퓨터에 Node.js가 설치되어 있습니다
- 테스트 목적으로 WebAuthn과 호환되는 Android 또는 iOS 기기
- Node.js 및 Express.js에 대한 기본 지식
- 사용자 자격 증명과 암호 키를 저장하는 MongoDB 데이터베이스
WebAuthn이 무엇인지, 어떻게 작동하는지 이미 잘 알고 계시다면 구현 섹션으로 건너뛰셔도 됩니다. 재충전이 필요하다고 생각되면 아래 내용이 기초를 바로잡는 데 도움이 될 것입니다.
WebAuthn이란 무엇입니까?
WebAuthn은 비밀번호 사용의 주요 단점을 해결하기 위해 웹 애플리케이션에서 안전하고 비밀번호 없는 인증의 필요성에서 시작된 웹 표준입니다.
이 프로젝트는 사용자 인증을 위해 여러 장치와 운영 체제에서 작동하는 표준화된 인터페이스를 만드는 것을 목표로 FIDO(Fast Identity Online)와 협력하여 World Wide Web Consortium(W3C)에서 게시되었습니다.
실용적인 수준에서 WebAuthn은 신뢰 당사자, WebAuthn 클라이언트 및 인증자라는 세 가지 필수 구성 요소로 구성됩니다.
신뢰 당사자는 사용자에 대한 인증을 요청하는 온라인 서비스 또는 애플리케이션입니다.
WebAuthn 클라이언트는 사용자와 신뢰 당사자 사이의 중개자 역할을 하며 WebAuthn을 지원하는 모든 호환 웹 브라우저나 모바일 앱에 내장되어 있습니다.
인증기는 지문 스캐너, 안면 인식 시스템, 하드웨어 보안 키 등 사용자의 신원을 확인하는 데 사용되는 장치 또는 방법입니다.
WebAuthn은 어떻게 작동하나요?
WebAuthn을 지원하는 웹사이트에 계정을 등록할 때 휴대폰의 지문 스캐너와 같은 인증 장치를 사용하는 가입 프로세스를 시작합니다. 그 결과 신뢰 당사자의 데이터베이스에 저장된 공개 키와 보안 하드웨어 계층을 통해 귀하의 장치에 안전하게 저장된 개인 키가 생성됩니다.
로그인을 시도할 때 웹사이트에서 비밀번호를 요청하지 않기 때문에 실제로는 로그인을 시작한 후 기기로 질문이 전송됩니다. 이 인증에는 일반적으로 신뢰 당사자가 예상하는 웹 사이트에서 로그인하고 있는지 확인하기 위한 웹 사이트 주소와 같은 정보가 포함됩니다.
웹사이트에서 인증 확인을 받은 후 기기는 개인 키를 사용하여 서명된 응답을 생성합니다. 이 응답은 개인 키 자체를 공개하지 않고 웹사이트에 저장된 해당 공개 키를 귀하가 소유하고 있음을 보여줍니다.
신뢰 당사자는 서명된 응답을 받으면 저장된 공개 키의 유효성을 검사합니다. 서명이 일치하면 웹사이트는 귀하가 실제 사용자임을 확인하고 귀하에게 액세스 권한을 부여할 수 있습니다. 비밀번호는 교환되지 않았으며 개인 키는 기기에 안전하게 보관되었습니다.
WebAuthn을 사용하여 비밀번호 없는 인증을 구현하는 방법
이제 WebAuthn의 기본 개념을 다루었으므로 이 모든 것이 실제로 어떻게 진행되는지 확인할 수 있습니다. 우리가 구축할 애플리케이션은 로그인 및 등록 양식이 포함된 기본 HTML 페이지인 등록 및 로그인을 처리하기 위한 두 개의 API 엔드포인트가 있는 간단한 Express.js 앱이 될 것입니다.
프로젝트 설정
먼저, 수행할 스캐폴딩이 많지 않도록 시작 코드가 포함된 GitHub에서 프로젝트를 복제해야 합니다.
터미널에 아래 명령을 입력하세요.
git clone https://github.com/josephden16/webauthn-demo.git
로그인 후 복사
git checkout start-here # 참고: 스타터 브랜치에 있는지 확인하세요
최종 솔루션을 보시려면 최종 솔루션이나 메인 브랜치에서 확인하세요.
다음으로 프로젝트 종속성을 설치합니다.
다음으로 프로젝트 루트에 새 파일 .env를 만듭니다. .env.sample의 내용을 여기에 복사하고 적절한 값을 제공합니다.
# .env
PORT=8000
MONGODB_URL=<YOUR MONGODB CONNECTION STRING>
로그인 후 복사
After following these steps, the project should run without throwing errors, but to confirm, enter the command below to start the development server:
With that, we've set up the project. In the next section, we'll add the login and registration form.
Creating the login and registration form
The next step in our process is creating a single form that can handle registration and logging in. To do this, we must create a new directory in our codebase called public. Inside this directory, we will create a new file called index.html. This file will contain the necessary code to build the form we need.
Inside the index.html file, add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebAuthn Demo</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js"></script>
<style>
.font-inter {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="font-inter min-h-screen flex flex-col items-center p-24">
<h1 class="font-bold text-3xl mb-10">WebAuthn Demo</h1>
<div id="content">
<div>
<div id="error" role="alert"
class="bg-red-600 text-white p-2 w-full my-3 rounded-md text-center font-bold hidden"></div>
<div id="loginForm" class="text-center">
<input id="username" autocomplete="webauthn" type="text" placeholder="Username"
class="w-[20rem] px-4 py-2 mb-4 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="flex justify-center space-x-4">
<button id="registerBtn" type="button"
class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-md">Register</button>
<button id="loginBtn" type="button"
class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md">Login</button>
</div>
</div>
<div id="welcomeMessage" class="hidden text-center">
<h1 class="text-3xl font-bold mb-4">Welcome, <span id="usernameDisplay"></span>!</h1>
<p class="text-lg text-gray-600">You are now logged in.</p>
</div>
</div>
</div>
</body>
</html>
로그인 후 복사
So, we've just added a simple login and registration form for users to sign in with WebAuthn. Also, if you check the
element, we've included the link to the Inter font using Google Fonts, Tailwind CSS for styling, and the SimpleWebAuthn browser package.
SimpleWebAuthn is an easy-to-use library for integrating WebAuthn into your web applications, as the name suggests. It offers a client and server library to reduce the hassle of implementing Webauthn in your projects.
When you visit http://localhost:8010, the port will be what you're using, you should see a form like the one below: 
Let's create a script.js file that'll store all the code for handling form submissions and interacting with the browser's Web Authentication API for registration and authentication. Users must register on a website before logging in, so we must implement the registration functionality first.
Head to the script.js file and include the following code:
const { startRegistration, browserSupportsWebAuthn } = SimpleWebAuthnBrowser;
document.addEventListener("DOMContentLoaded", function () {
const usernameInput = document.getElementById("username");
const registerBtn = document.getElementById("registerBtn");
const loginBtn = document.getElementById("loginBtn");
const errorDiv = document.getElementById("error");
const loginForm = document.getElementById("loginForm");
const welcomeMessage = document.getElementById("welcomeMessage");
const usernameDisplay = document.getElementById("usernameDisplay");
registerBtn.addEventListener("click", handleRegister);
loginBtn.addEventListener("click", handleLogin);
});
로그인 후 복사
At the start of the code above, we import the necessary functions to work with WebAuthn. The document.addEventListener("DOMContentLoaded", function () { ... }) part ensures that the code inside the curly braces ({...}) executes after the web page is loaded.
It is important to avoid errors that might occur if you try to access elements that haven't been loaded yet.
Within the DOMContentLoaded event handler, we're initializing variables to store specific HTML elements we'll be working with and event listeners for the login and registration buttons.
Next, let's add the handleRegister() function. Inside the DOMContentLoaded event handler, add the code below:
async function handleRegister(evt) {
errorDiv.textContent = "";
errorDiv.style.display = "none";
const userName = usernameInput.value;
if (!browserSupportsWebAuthn()) {
return alert("This browser does not support WebAuthn");
}
const resp = await fetch(`/api/register/start?username=${userName}`, {
credentials: "include"
});
const registrationOptions = await resp.json();
let authResponse;
try {
authResponse = await startRegistration(registrationOptions);
} catch (error) {
if (error.name === "InvalidStateError") {
errorDiv.textContent =
"Error: Authenticator was probably already registered by user";
} else {
errorDiv.textContent = error.message;
}
}
if (!authResponse) {
errorDiv.textContent = "Failed to connect with your device";
return;
}
const verificationResp = await fetch(
`/api/register/verify?username=${userName}`,
{
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(authResponse),
}
);
if (!verificationResp.ok) {
errorDiv.textContent = "Oh no, something went wrong!";
return;
}
const verificationJSON = await verificationResp.json();
if (verificationJSON && verificationJSON.verified) {
alert("Registration successful! You can now login");
} else {
errorDiv.textContent = "Oh no, something went wrong!";
}
}
로그인 후 복사
The handleRegister() function initiates the registration process by retrieving the username entered by the user from an input field. If the browser supports WebAuthn, it sends a request to the /api/register/start endpoint to initiate the registration process.
Once the registration options are retrieved, the startRegistration() method initiates the registration process with the received options. If the registration process is successful, it sends a verification request to another API endpoint /api/register/verify with the obtained authentication response and alerts the user that the registration was successful.
Since we haven't built the API endpoint for handling user registration yet, it won't function as expected, so let's head back to the codebase and create it.
Building the registration API endpoints
To finish the registration functionality, we'll need two API endpoints: one for generating the registration options that'll be passed to the authenticator and the other for verifying the response from the authenticator. Then, we'll store the credential data from the authenticator and user data in the database.
Let's start by creating the MongoDB database models to store user data and passkey. At the project's root, create a new folder called models and within that same folder, create two new files: User.js for the user data and PassKey.js for the passkey.
In the User.js file, add the following code:
import mongoose from "mongoose";
const UserSchema = new mongoose.Schema(
{
username: {
type: String,
unique: true,
required: true,
},
authenticators: [],
},
{ timestamps: true }
);
const User = mongoose.model("User", UserSchema);
export default User;
로그인 후 복사
We're defining a simple schema for the user model that'll store the data of registered users. Next, in the PassKey.js file, add the following code:
import mongoose from "mongoose";
const PassKeySchema = new mongoose.Schema(
{
user: {
type: mongoose.Schema.ObjectId,
ref: "User",
required: true,
},
webAuthnUserID: {
type: String,
required: true,
},
credentialID: {
type: String,
required: true,
},
publicKey: {
type: String,
required: true,
},
counter: {
type: Number,
required: true,
},
deviceType: {
type: String,
enum: ["singleDevice", "multiDevice"],
required: true,
},
backedUp: {
type: Boolean,
required: true,
},
authenticators: [],
transports: [],
},
{ timestamps: true }
);
const PassKey = mongoose.model("PassKey", PassKeySchema);
export default PassKey;
로그인 후 복사
We have created a schema for the PassKey model that stores all the necessary data of the authenticator after a successful registration. This schema will be used to identify the authenticator for all future authentications.
Having defined our data models, we can now set up the registration API endpoints. Within the root of the project, create two new folders: routes and controllers. Within each of the newly created folders, add a file named index.js. Within the routes/index.js file, add the code below:
import express from "express";
import {
generateRegistrationOptionsCtrl,
verifyRegistrationCtrl,
} from "../controllers/index.js";
const router = express.Router();
router.get("/register/start", generateRegistrationOptionsCtrl);
router.post("/register/verify", verifyRegistrationCtrl);
export default router;
로그인 후 복사
We're defining the routes we used earlier for user registration using Express.js. It imports two controller functions for generating registration options and verifying the response from the startRegistration() method that'll be called in the browser.
Let's start by adding the generateRegistrationOptionsCtrl() controller to generate the registration options. In the controllers/index.js file, add the following code:
// Import necessary modules and functions
import {
generateRegistrationOptions,
verifyRegistrationResponse,
} from "@simplewebauthn/server";
import {
bufferToBase64URLString,
base64URLStringToBuffer,
} from "@simplewebauthn/browser";
import { v4 } from "uuid";
import User from "../models/User.js";
import PassKey from "../models/PassKey.js";
// Human-readable title for your website
const relyingPartyName = "WebAuthn Demo";
// A unique identifier for your website
const relyingPartyID = "localhost";
// The URL at which registrations and authentications should occur
const origin = `http://${relyingPartyID}`;
// Controller function to generate registration options
export const generateRegistrationOptionsCtrl = async (req, res) => {
const { username } = req.query;
const user = await User.findOne({ username });
let userAuthenticators = [];
// Retrieve authenticators used by the user before, if any
if (user) {
userAuthenticators = [...user.authenticators];
}
// Generate a unique ID for the current user session
let currentUserId;
if (!req.session.currentUserId) {
currentUserId = v4();
req.session.currentUserId = currentUserId;
} else {
currentUserId = req.session.currentUserId;
}
// Generate registration options
const options = await generateRegistrationOptions({
rpName: relyingPartyName,
rpID: relyingPartyID,
userID: currentUserId,
userName: username,
timeout: 60000,
attestationType: "none", // Don't prompt users for additional information
excludeCredentials: userAuthenticators.map((authenticator) => ({
id: authenticator.credentialID,
type: "public-key",
transports: authenticator.transports,
})),
supportedAlgorithmIDs: [-7, -257],
authenticatorSelection: {
residentKey: "preferred",
userVerification: "preferred",
},
});
// Save the challenge to the session
req.session.challenge = options.challenge;
res.send(options);
};
로그인 후 복사
First, we import the necessary functions and modules from libraries like @simplewebauthn/server and uuid. These help us handle the authentication process smoothly.
Next, we define some constants. relyingPartyName is a friendly name for our website. In this case, it's set to "WebAuthn Demo." relyingPartyID is a unique identifier for our website. Here, it's set to "localhost". Then, we construct the origin variable, the URL where registrations and authentications will happen. In this case, it's constructed using the relying party ID.
Moving on to the main part of the code, we have the controller generateRegistrationOptionsCtrl(). It's responsible for generating user registration options.
Inside this function, we first extract the username from the request. Then, we try to find the user in our database using this username. If we find the user, we retrieve the authenticators they've used before. Otherwise, we initialize an empty array for user authenticators.
Next, we generate a unique ID for the current user session. If there's no ID stored in the session yet, we generate a new one using the v4 function from the uuid library and store it in the session. Otherwise, we retrieve the ID from the session.
Then, we use the generateRegistrationOptions() function to create user registration options. After generating these options, we save the challenge to the session and send the options back as a response.
Next, we'll need to add the verifyRegistrationCtrl() controller to handle verifying the response sent from the browser after the user has initiated the registration:
// Controller function to verify registration
export const verifyRegistrationCtrl = async (req, res) => {
const body = req.body;
const { username } = req.query;
const user = await User.findOne({ username });
const expectedChallenge = req.session.challenge;
// Check if the expected challenge exists
if (!expectedChallenge) {
return res.status(400).send({ error: "Failed: No challenge found" });
}
let verification;
try {
const verificationOptions = {
response: body,
expectedChallenge: `${expectedChallenge}`,
expectedOrigin: origin,
expectedRPID: relyingPartyID,
requireUserVerification: false,
};
verification = await verifyRegistrationResponse(verificationOptions);
} catch (error) {
console.error(error);
return res.status(400).send({ error: error.message });
}
const { verified, registrationInfo } = verification;
// If registration is verified, update user data
if (verified && registrationInfo) {
const {
credentialPublicKey,
credentialID,
counter,
credentialBackedUp,
credentialDeviceType,
} = registrationInfo;
const credId = bufferToBase64URLString(credentialID);
const credPublicKey = bufferToBase64URLString(credentialPublicKey);
const newDevice = {
credentialPublicKey: credPublicKey,
credentialID: credId,
counter,
transports: body.response.transports,
};
// Check if the device already exists for the user
const existingDevice = user?.authenticators.find(
(authenticator) => authenticator.credentialID === credId
);
if (!existingDevice && user) {
// Add the new device to the user's list of devices
await User.updateOne(
{ _id: user._id },
{ $push: { authenticators: newDevice } }
);
await PassKey.create({
counter,
credentialID: credId,
user: user._id,
webAuthnUserID: req.session.currentUserId,
publicKey: credPublicKey,
backedUp: credentialBackedUp,
deviceType: credentialDeviceType,
transports: body.response.transports,
authenticators: [newDevice],
});
} else {
const newUser = await User.create({
username,
authenticators: [newDevice],
});
await PassKey.create({
counter,
credentialID: credId,
user: newUser._id,
webAuthnUserID: req.session.currentUserId,
publicKey: credPublicKey,
backedUp: credentialBackedUp,
deviceType: credentialDeviceType,
transports: body.response.transports,
authenticators: [newDevice],
});
}
}
// Clear the challenge from the session
req.session.challenge = undefined;
res.send({ verified });
};
로그인 후 복사
The verifyRegistrationCtrl() controller searches for a user in the database based on the provided username. If found, it retrieves the expected challenge from the session data. If there's no expected challenge, the function returns an error. It then sets up verification options and calls a function named verifyRegistrationResponse.
If an error occurs, it logs the error and sends a response with the error message. If the registration is successfully verified, the function updates the user's data with the information provided in the registration response. It adds the new device to the user's list of devices if it does not exist.
Finally, the challenge is cleared from the session, and a response indicates whether the registration was successfully verified.
Before we head back to the browser to test what we've done so far, return to the app.js file and add the following code to register the routes:
import router from "./routes/index.js"; // place this at the start of the file
app.use("/api", router); // place this before the call to `app.listen()`
로그인 후 복사
Now that we've assembled all the pieces for the registration functionality, we can return to the browser to test it out.
When you enter a username and click the "register" button, you should see a prompt similar to the one shown below:
To create a new passkey, you can now scan the QR code with your Android or iOS device. Upon successfully creating the passkey, a response is sent from the startRegistration() method to the /register/verify endpoint. Still, you'll notice it fails because of the error sent from the API:
{
"error": "Unexpected registration response origin \"http://localhost:8030\", expected \"http://localhost\""
}
로그인 후 복사
Why this is happening is because the origin that the verifyRegistrationResponse() method expected, which is http://localhost, is different from http://localhost:8010, was sent.
So, you might wonder why we can't just change it to http://localhost:8010. That’s because when we defined the origin in the controllers/index.js file, the relyingPartyID was set to "localhost", and we can't explicitly specify the port for the relying party ID.
An approach to get around this issue is to use a web tunneling service like tunnelmole or ngrok to expose our local server to the internet with a publicly accessible URL so we don't have to specify the port when defining the relyingPartyID.
Exposing your local server to the internet
Let's quickly set up tunnelmole to share the server on our local machine to a live URL.
First, let's install tunnelmole by entering the command below in your terminal:
sudo npm install -g tunnelmole
로그인 후 복사
Next, enter the command below to make the server running locally available on the internet:
You should see an output like this from your terminal if it was successful: 
You can now use the tunnelmole URL as the origin:
const relyingPartyID = "randomstring.tunnelmole.net"; // use output from your terminal
const origin = `https://${relyingPartyID}`; // webauthn only works with https
로그인 후 복사
Everything should work as expected, so head back to your browser to start the registration process. Once you're done, an alert should pop up informing you that the registration was successful and that you can now log in: 
We've successfully set up the user registration feature. The only thing left to do is implement the logging-in functionality.
Building the login functionality
The login process will follow a similar flow to the registration process. First, we’ll request authentication options from the server to be passed to the authenticator on your device.
Afterward, a request will be sent to the server to verify the authenticator's response. If all the criteria are met, the user can log in successfully.
Head back to the public/script.js file, and include the function to handle when the "login" button is clicked:
async function handleLogin(evt) {
errorDiv.textContent = "";
errorDiv.style.display = "none";
const userName = usernameInput.value;
if (!browserSupportsWebAuthn()) {
return alert("This browser does not support WebAuthn");
}
const resp = await fetch(`/api/login/start?username=${userName}`, {
credentials: "include",
headers: {
"ngrok-skip-browser-warning": "69420",
},
});
if (!resp.ok) {
const error = (await resp.json()).error;
errorDiv.textContent = error;
errorDiv.style.display = "block";
return;
}
let asseResp;
try {
asseResp = await startAuthentication(await resp.json());
} catch (error) {
errorDiv.textContent = error.message;
errorDiv.style.display = "block";
}
if (!asseResp) {
errorDiv.textContent = "Failed to connect with your device";
errorDiv.style.display = "block";
return;
}
const verificationResp = await fetch(
`/api/login/verify?username=${userName}`,
{
credentials: "include",
method: "POST",
headers: {
"Content-Type": "application/json",
"ngrok-skip-browser-warning": "69420",
},
body: JSON.stringify(asseResp),
}
);
const verificationJSON = await verificationResp.json();
if (verificationJSON && verificationJSON.verified) {
const userName = verificationJSON.username;
// Hide login form and show welcome message
loginForm.style.display = "none";
welcomeMessage.style.display = "block";
usernameDisplay.textContent = userName;
} else {
errorDiv.textContent = "Oh no, something went wrong!";
errorDiv.style.display = "block";
}
}
로그인 후 복사
The function starts by clearing error messages and retrieving the user's username from the form. It checks if the browser supports WebAuthn; if it does, it sends a request to the server to initiate the login process.
If the response from the server is successful, it attempts to authenticate the user. Upon successful authentication, it hides the login form and displays a welcome message with the user's name. Otherwise, it displays an error message to the user.
Next, head back to the routes/index.js file and add the routes for logging in:
router.get("/login/start", generateAuthenticationOptionsCtrl);
router.post("/login/verify", verifyAuthenticationCtrl);
로그인 후 복사
Don't forget to update the imports, as you're including the code above. Let's continue by adding the code to generate the authentication options. Go to the controllers/index.js file and add the following code:
// Controller function to generate authentication options
export const generateAuthenticationOptionsCtrl = async (req, res) => {
const { username } = req.query;
const user = await User.findOne({ username });
if (!user) {
return res
.status(404)
.send({ error: "User with this username does not exist" });
}
const options = await generateAuthenticationOptions({
rpID: relyingPartyID,
timeout: 60000,
allowCredentials: user.authenticators.map((authenticator) => ({
id: base64URLStringToBuffer(authenticator.credentialID),
transports: authenticator.transports,
type: "public-key",
})),
userVerification: "preferred",
});
req.session.challenge = options.challenge;
res.send(options);
};
로그인 후 복사
The generateAuthenticationOptionsCtrl() controller starts by extracting the username from the request query and searching for the user in the database. If found, it proceeds to generate authentication options crucial for the process.
These options include the relying party ID (rpID), timeout, allowed credentials derived from stored authenticators, and user verification option set to preferred. Then, it stores the challenge from the options in the session for authentication verification and sends them as a response to the browser.
Let's add the controller for verifying the authenticator's response for the final part of the auth flow:
// Controller function to verify authentication
export const verifyAuthenticationCtrl = async (req, res) => {
const body = req.body;
const { username } = req.query;
const user = await User.findOne({ username });
if (!user) {
return res
.status(404)
.send({ error: "User with this username does not exist" });
}
const passKey = await PassKey.findOne({
user: user._id,
credentialID: body.id,
});
if (!passKey) {
return res
.status(400)
.send({ error: "Could not find passkey for this user" });
}
const expectedChallenge = req.session.challenge;
let dbAuthenticator;
// Check if the authenticator exists in the user's data
for (const authenticator of user.authenticators) {
if (authenticator.credentialID === body.id) {
dbAuthenticator = authenticator;
dbAuthenticator.credentialPublicKey = base64URLStringToBuffer(
authenticator.credentialPublicKey
);
break;
}
}
// If the authenticator is not found, return an error
if (!dbAuthenticator) {
return res.status(400).send({
error: "This authenticator is not registered with this site",
});
}
let verification;
try {
const verificationOptions = {
response: body,
expectedChallenge: `${expectedChallenge}`,
expectedOrigin: origin,
expectedRPID: relyingPartyID,
authenticator: dbAuthenticator,
requireUserVerification: false,
};
verification = await verifyAuthenticationResponse(verificationOptions);
} catch (error) {
console.error(error);
return res.status(400).send({ error: error.message });
}
const { verified, authenticationInfo } = verification;
if (verified) {
// Update the authenticator's counter in the DB to the newest count in the authentication
dbAuthenticator.counter = authenticationInfo.newCounter;
const filter = { username };
const update = {
$set: {
"authenticators.$[element].counter": authenticationInfo.newCounter,
},
};
const options = {
arrayFilters: [{ "element.credentialID": dbAuthenticator.credentialID }],
};
await User.updateOne(filter, update, options);
}
// Clear the challenge from the session
req.session.challenge = undefined;
res.send({ verified, username: user.username });
};
로그인 후 복사
The verifyAuthenticationCtrl() controller first extracts data from the request body and query, including the username and authentication details. It then searches for the user in the database. If not found, it returns a 404 error.
Assuming the user exists, it proceeds to find the passkey associated with the user and provides authentication details. If no passkey is found, it returns a 400 error.
Then, the expected challenge value is retrieved from the session data and iterates over the user's authenticators to find a match.
After attempting the verification, if an error occurs, the error is logged to the console and a 400 error is returned. If the verification is successful, the authenticator's counter is updated in the database, and the challenge is cleared from the session. Finally, the response includes the verification status and the username.
Return to your browser to ensure that everything functions as expected. Below is a GIF demonstrating the entire authentication process: 
We've successfully implemented the WebAuthn authentication, providing our users with a fast, secure, and password-less way to authenticate themselves. With biometric information or physical security keys, users can access their accounts securely.
Benefits and limitations of WebAuthn
While WebAuthn presents a solution to modern authentication challenges, it's essential to understand its strengths and weaknesses. Below, we highlight the key advantages and potential drawbacks of adopting WebAuthn in your authentication strategy.
Benefits of WebAuthn
WebAuthn offers a higher security level than traditional password-based authentication methods because of how it leverages public key cryptography to mitigate the risks associated with password breaches and phishing attacks.
따라서 사이버 공격이 발생하더라도 가해자는 공개 키에만 액세스할 수 있으며, 공개 키만으로는 계정에 액세스할 수 없습니다.
생체인식 데이터 및 물리적 보안 키와 같은 다양한 인증 요소에 대한 지원은 보안 강화를 위해 다단계 인증을 구현할 수 있는 유연성을 제공합니다.
WebAuthn은 현재 대부분의 최신 웹 브라우저 및 플랫폼에서 지원되므로 많은 사용자가 WebAuthn에 액세스할 수 있습니다. 인증 경험은 일관성을 보장하기 위해 다양한 장치와 운영 체제에서도 동일합니다.
WebAuthn의 한계
복잡하거나 레거시 시스템을 보유한 조직의 경우 WebAuthn 통합이 기술적으로 어려울 수 있습니다. 그런 다음 사용자가 사용할 수 있는 모든 유형의 장치와 기타 관련 기술 제한 사항을 상상해 보세요.
또 다른 중요한 제한 사항은 인간적인 측면입니다. 즉, 사용자가 인증 프로세스에 얼마나 접근할 수 있습니까? 기술에 익숙하지 않으면 사용자가 거부감을 느끼거나 교육 및 지침 리소스를 만들어야 할 수 있습니다.
결론
이 기사에서는 WebAuthn이 안전하고 편리한 로그인 경험을 위해 내부적으로 공개 키 암호화를 사용하는 비밀번호 없는 인증 프로세스를 제공하는 방법을 살펴보았습니다. 실용적인 예와 명확한 설명을 통해 웹 애플리케이션에서 WebAuthn을 설정하여 앱에서 보다 원활하고 안전한 인증 방법을 누리는 방법을 다뤘습니다.
LogRocket: 컨텍스트를 이해하여 JavaScript 오류를 더 쉽게 디버깅합니다.
코드 디버깅은 항상 지루한 작업입니다. 하지만 오류를 더 많이 이해할수록 오류를 수정하는 것이 더 쉬워집니다.
LogRocket을 사용하면 이러한 오류를 새롭고 독특한 방식으로 이해할 수 있습니다. 당사의 프런트엔드 모니터링 솔루션은 JavaScript 프런트엔드에 대한 사용자 참여를 추적하여 오류를 초래한 사용자의 행동을 정확하게 확인할 수 있는 기능을 제공합니다.
LogRocket은 콘솔 로그, 페이지 로드 시간, 스택 추적, 헤더 + 본문이 포함된 느린 네트워크 요청/응답, 브라우저 메타데이터 및 사용자 정의 로그를 기록합니다. JavaScript 코드의 영향을 이해하는 것은 결코 쉬운 일이 아닙니다!
무료로 사용해 보세요.
위 내용은 비밀번호 없는 로그인을 위한 WebAuthn 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
