🖥️ 프론트엔드 구현

1. 기본 HTML 구조 만들기

먼저 간단한 HTML 페이지를 만들어 봅시다:

<!DOCTYPE html>
<html>
<head>
  <title>WebAuthn 데모</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
    button { padding: 10px 15px; margin: 10px 0; cursor: pointer; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <h1>WebAuthn 생체인증 데모</h1>
  
  <div id="registerSection">
    <h2>새 계정 등록하기</h2>
    <input type="text" id="username" placeholder="사용자 이름 입력">
    <button id="registerButton">생체 인증 등록하기</button>
  </div>
  
  <div id="loginSection" class="hidden">
    <h2>로그인하기</h2>
    <input type="text" id="loginUsername" placeholder="사용자 이름 입력">
    <button id="loginButton">생체 인증으로 로그인</button>
  </div>
  
  <div id="statusMessage"></div>
  
  <script src="webauthn.js"></script>
</body>
</html>

2. JavaScript로 WebAuthn 기능 구현하기

이제 webauthn.js 파일을 만들어 실제 WebAuthn 기능을 구현해봅시다:

// webauthn.js
document.addEventListener('DOMContentLoaded', () => {
  // DOM 요소 가져오기
  const registerButton = document.getElementById('registerButton');
  const loginButton = document.getElementById('loginButton');
  const usernameInput = document.getElementById('username');
  const loginUsernameInput = document.getElementById('loginUsername');
  const statusMessage = document.getElementById('statusMessage');
  const registerSection = document.getElementById('registerSection');
  const loginSection = document.getElementById('loginSection');
  
  // WebAuthn 지원 여부 확인
  if (!window.PublicKeyCredential) {
    statusMessage.textContent = '이런! 😢 브라우저가 WebAuthn을 지원하지 않아요.';
    registerButton.disabled = true;
    loginButton.disabled = true;
    return;
  }
  
  // 등록 버튼 클릭 이벤트
  registerButton.addEventListener('click', async () => {
    const username = usernameInput.value;
    if (!username) {
      statusMessage.textContent = '사용자 이름을 입력해주세요!';
      return;
    }
    
    try {
      statusMessage.textContent = '서버에 등록 요청 중...';
      
      // 1. 서버에 등록 요청 보내기
      const response = await fetch('/register/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username })
      });
      
      const options = await response.json();
      
      // ArrayBuffer로 변환
      options.challenge = base64UrlDecode(options.challenge);
      options.user.id = base64UrlDecode(options.user.id);
      if (options.excludeCredentials) {
        for (let cred of options.excludeCredentials) {
          cred.id = base64UrlDecode(cred.id);
        }
      }
      
      // 2. 브라우저 WebAuthn API 호출
      statusMessage.textContent = '생체 인증을 진행해주세요...';
      const credential = await navigator.credentials.create({ publicKey: options });
      
      // 3. 생성된 인증정보 서버로 전송
      const credentialResponse = {
        id: credential.id,
        rawId: arrayBufferToBase64Url(credential.rawId),
        response: {
          clientDataJSON: arrayBufferToBase64Url(credential.response.clientDataJSON),
          attestationObject: arrayBufferToBase64Url(credential.response.attestationObject)
        },
        type: credential.type
      };
      
      const finishResponse = await fetch('/register/finish', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentialResponse)
      });
      
      const finishResult = await finishResponse.json();
      
      if (finishResult.success) {
        statusMessage.textContent = '✅ 등록 성공! 이제 로그인할 수 있어요.';
        registerSection.classList.add('hidden');
        loginSection.classList.remove('hidden');
        loginUsernameInput.value = username;
      } else {
        statusMessage.textContent = '❌ 등록 실패: ' + finishResult.message;
      }
    } catch (error) {
      console.error('등록 오류:', error);
      statusMessage.textContent = '❌ 등록 중 오류 발생: ' + error.message;
    }
  });
  
  // 로그인 버튼 클릭 이벤트
  loginButton.addEventListener('click', async () => {
    const username = loginUsernameInput.value;
    if (!username) {
      statusMessage.textContent = '사용자 이름을 입력해주세요!';
      return;
    }
    
    try {
      statusMessage.textContent = '로그인 요청 중...';
      
      // 1. 서버에 로그인 요청 보내기
      const response = await fetch('/login/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username })
      });
      
      const options = await response.json();
      
      // ArrayBuffer로 변환
      options.challenge = base64UrlDecode(options.challenge);
      if (options.allowCredentials) {
        for (let cred of options.allowCredentials) {
          cred.id = base64UrlDecode(cred.id);
        }
      }
      
      // 2. 브라우저 WebAuthn API 호출
      statusMessage.textContent = '생체 인증을 진행해주세요...';
      const credential = await navigator.credentials.get({ publicKey: options });
      
      // 3. 인증 결과 서버로 전송
      const authResponse = {
        id: credential.id,
        rawId: arrayBufferToBase64Url(credential.rawId),
        response: {
          clientDataJSON: arrayBufferToBase64Url(credential.response.clientDataJSON),
          authenticatorData: arrayBufferToBase64Url(credential.response.authenticatorData),
          signature: arrayBufferToBase64Url(credential.response.signature),
          userHandle: credential.response.userHandle ? arrayBufferToBase64Url(credential.response.userHandle) : null
        },
        type: credential.type
      };
      
      const finishResponse = await fetch('/login/finish', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(authResponse)
      });
      
      const finishResult = await finishResponse.json();
      
      if (finishResult.success) {
        statusMessage.textContent = '🎉 로그인 성공! 환영합니다, ' + username + '님!';
      } else {
        statusMessage.textContent = '❌ 로그인 실패: ' + finishResult.message;
      }
    } catch (error) {
      console.error('로그인 오류:', error);
      statusMessage.textContent = '❌ 로그인 중 오류 발생: ' + error.message;
    }
  });
  
  // 유틸리티 함수들
  function arrayBufferToBase64Url(buffer) {
    const bytes = new Uint8Array(buffer);
    let str = '';
    for (const byte of bytes) {
      str += String.fromCharCode(byte);
    }
    return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
  }
  
  function base64UrlDecode(base64Url) {
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const padLength = (4 - (base64.length % 4)) % 4;
    const padded = base64 + '='.repeat(padLength);
    const binary = atob(padded);
    const buffer = new ArrayBuffer(binary.length);
    const bytes = new Uint8Array(buffer);
    for (let i = 0; i < binary.length; i++) {
      bytes[i] = binary.charCodeAt(i);
    }
    return buffer;
  }
});

우와~ 코드가 좀 길죠? ㅋㅋㅋ 하지만 주석을 따라가보면 크게 어렵지 않아요! 기본적으로 등록과 로그인 두 가지 기능을 구현했습니다. 😎