Passkeys와 WebAuthn — 비밀번호 없는 인증의 미래

[사용자] → [브라우저] → [서버: 챌린지 + RP 정보 생성]
                ↓
[브라우저] → navigator.credentials.create() 호출
                ↓
[Authenticator] → 생체인증/PIN 확인 → 키 쌍 생성
                ↓
[브라우저] → [서버: 공개키 + attestation 데이터 전송]
                ↓
[서버] → 검증 후 공개키 저장

[사용자] → [브라우저] → [서버: 챌린지 생성 + 허용된 credential ID 목록]
                ↓
[브라우저] → navigator.credentials.get() 호출
                ↓
[Authenticator] → 생체인증/PIN 확인 → 챌린지를 개인키로 서명
                ↓
[브라우저] → [서버: 서명된 assertion 데이터 전송]
                ↓
[서버] → 공개키로 서명 검증 → 인증 성공

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .formLogin(withDefaults())  // 폴백용 폼 로그인
            .webAuthn(webAuthn -> webAuthn
                .rpName("My Application")       // Relying Party 이름 (사용자에게 표시)
                .rpId("example.com")            // Relying Party ID (도메인)
                .allowedOrigins("https://example.com")  // 허용 origin
            )
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/login", "/webauthn/**").permitAll()
                .anyRequest().authenticated()
            );

        return http.build();
    }
}

// 사용자 엔티티 정보를 관리하는 리포지토리
public interface PublicKeyCredentialUserEntityRepository {

    // 사용자 이름으로 UserEntity 조회
    PublicKeyCredentialUserEntity findByUsername(String username);

    // UserEntity 저장
    void save(PublicKeyCredentialUserEntity userEntity);

    // UserEntity 삭제
    void delete(byte[] id);
}

@Component
public class JpaCredentialUserEntityRepository
        implements PublicKeyCredentialUserEntityRepository {

    private final UserCredentialJpaRepository jpaRepository;

    public JpaCredentialUserEntityRepository(UserCredentialJpaRepository jpaRepository) {
        this.jpaRepository = jpaRepository;
    }

    @Override
    public PublicKeyCredentialUserEntity findByUsername(String username) {
        // DB에서 사용자의 credential 엔티티 조회
        return jpaRepository.findByUsername(username)
                .map(this::toPublicKeyEntity)
                .orElse(null);
    }

    @Override
    public void save(PublicKeyCredentialUserEntity userEntity) {
        // 신규 credential 저장 또는 기존 credential 업데이트
        UserCredentialEntity entity = toJpaEntity(userEntity);
        jpaRepository.save(entity);
    }

    @Override
    public void delete(byte[] id) {
        // credential 삭제 (사용자가 Passkey를 해제할 때)
        jpaRepository.deleteByCredentialId(id);
    }

    // ... 변환 메서드 생략
}

// 한 사용자가 여러 Credential을 가질 수 있으므로 1:N 관계
@Bean
public UserCredentialRepository userCredentialRepository(DataSource dataSource) {
    // JDBC 기반 구현체 — 테이블을 자동 생성하지 않으므로 스키마 관리 필요
    return new JdbcUserCredentialRepository(
        new JdbcTemplate(dataSource)
    );
}

async function registerPasskey() {
    // 1. 서버에서 등록 옵션 요청
    const optionsResponse = await fetch('/webauthn/register/options', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    });
    const options = await optionsResponse.json();

    // 2. ArrayBuffer로 변환 (서버에서 Base64로 인코딩된 값)
    options.challenge = base64ToArrayBuffer(options.challenge);
    options.user.id = base64ToArrayBuffer(options.user.id);

    // 3. 브라우저의 WebAuthn API 호출 → 생체인증 프롬프트 표시
    const credential = await navigator.credentials.create({
        publicKey: options
    });

    // 4. 생성된 credential을 서버에 전송
    const registrationResponse = await fetch('/webauthn/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            id: credential.id,
            rawId: arrayBufferToBase64(credential.rawId),
            response: {
                // attestation 데이터 — 공개키가 포함되어 있음
                attestationObject: arrayBufferToBase64(
                    credential.response.attestationObject
                ),
                clientDataJSON: arrayBufferToBase64(
                    credential.response.clientDataJSON
                )
            },
            type: credential.type
        })
    });
}

async function loginWithPasskey() {
    // 1. 서버에서 인증 옵션 요청
    const optionsResponse = await fetch('/webauthn/authenticate/options', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    });
    const options = await optionsResponse.json();

    // 2. 챌린지와 허용된 credential ID를 ArrayBuffer로 변환
    options.challenge = base64ToArrayBuffer(options.challenge);
    options.allowCredentials = options.allowCredentials.map(cred => ({
        ...cred,
        id: base64ToArrayBuffer(cred.id)
    }));

    // 3. 브라우저의 WebAuthn API 호출 → 생체인증 프롬프트 표시
    const assertion = await navigator.credentials.get({
        publicKey: options
    });

    // 4. 서명된 assertion을 서버에 전송
    const authResponse = await fetch('/webauthn/authenticate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            id: assertion.id,
            rawId: arrayBufferToBase64(assertion.rawId),
            response: {
                // 개인키로 서명된 데이터
                authenticatorData: arrayBufferToBase64(
                    assertion.response.authenticatorData
                ),
                clientDataJSON: arrayBufferToBase64(
                    assertion.response.clientDataJSON
                ),
                signature: arrayBufferToBase64(
                    assertion.response.signature
                )
            },
            type: assertion.type
        })
    });
}

// ArrayBuffer → Base64URL 변환
function arrayBufferToBase64(buffer) {
    const bytes = new Uint8Array(buffer);
    let binary = '';
    bytes.forEach(b => binary += String.fromCharCode(b));
    return btoa(binary)
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
}

// Base64URL → ArrayBuffer 변환
function base64ToArrayBuffer(base64) {
    const padded = base64.replace(/-/g, '+').replace(/_/g, '/');
    const binary = atob(padded);
    const bytes = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) {
        bytes[i] = binary.charCodeAt(i);
    }
    return bytes.buffer;
}

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    http
        // 1순위: Passkey 인증
        .webAuthn(webAuthn -> webAuthn
            .rpName("My Application")
            .rpId("example.com")
            .allowedOrigins("https://example.com")
        )
        // 2순위: 폴백으로 폼 로그인 유지
        .formLogin(form -> form
            .loginPage("/login")
            .permitAll()
        )
        // 3순위: OAuth2 소셜 로그인도 병행 가능
        .oauth2Login(oauth -> oauth
            .loginPage("/login")
        );

    return http.build();
}

// Attestation 검증 레벨 설정
.webAuthn(webAuthn -> webAuthn
    .rpName("Enterprise App")
    .rpId("enterprise.example.com")
    .allowedOrigins("https://enterprise.example.com")
    // attestation 모드: none, indirect, direct, enterprise
    // 대부분 "none"으로 충분하지만, 높은 보안 요구 시 "direct" 사용
)

[등록]
사용자 → "Passkey 등록" 클릭
       → 서버가 챌린지 + RP 정보 생성
       → 브라우저가 navigator.credentials.create() 호출
       → 디바이스가 생체인증 후 키 쌍 생성
       → 공개키를 서버에 저장

[인증]
사용자 → "Passkey로 로그인" 클릭
       → 서버가 챌린지 생성
       → 브라우저가 navigator.credentials.get() 호출
       → 디바이스가 생체인증 후 챌린지를 개인키로 서명
       → 서버가 공개키로 서명 검증 → 인증 완료