Symfony 7.4의 Passkeys : 완전히 암호가없는 미래를 구축하는 방법

현대 웹 시대에, 암호는 더 이상 충분하지 않습니다.그들은 데이터 침해의 80 % 이상의 원인이며, 피싱, 재사용 및 끔찍한 복잡성 규칙을 적용합니다. Passkeys are the future. WEB WEB WEB WEB WEB WEB WEB WEB ( ) 및 당신의 장치 (iPhone, Android, Windows Hello, YubiKey)는 개인 키를 저장하지만 서버는 공개 키만 볼 수 있습니다. WebAuthn FIDO2 이 포괄적 인 가이드에서, 우리는 Symfony와 Official을 사용하여 우리는 우리의 애플리케이션에서 암호의 개념을 완전히 제거할 것입니다. fallback 없음, “reset password” 링크 없음. will build a 100% passwordless authentication system web-auth/webauthn-symfony-bundle 핵심 아키텍처 및 요구 사항 Passkeys는 공유 비밀 (비밀번호)을 공공/개인 키 쌍으로 대체함으로써 작동합니다.개인 키는 사용자의 Apple 장치 (iPhone, Mac, iPad)를 결코 떠나지 않으며 공공 키는 Symfony 서버에 저장됩니다. 기술 스택 PHP: 8.2 이상 (최신 WebAuthn libs에 필요한) 동영상: 7.4 LTS 데이터베이스: PostgreSQL, MySQL, or SQLite for dev (Credential Sources) 주요 도서관: web-auth/webauthn-symfony-bundle 필수 패키지 다음 명령을 실행하여 필요한 의존성을 설치합니다.Run the following command to install the necessary dependencies: composer require web-auth/webauthn-symfony-bundle:^5.2 \ web-auth/webauthn-stimulus:^5.2 \ symfony/uid:^7.4 우리는 사용 AssetMapper를 통해 (네이티브 브라우저 WebAuthn API에 대한 우수한 포장 기능을 제공하기 때문에) Apple Passkeys는 프론트 엔드 상호 작용이 가장 잘 처리되기 때문에 현대적인 Symfony 환경에서 또는 React/Vue 모듈을 사용할 수 있습니다. @simplewebauthn/browser Stimulus controller 미리보기 / 브라우저 데이터베이스 Schema: The Credential Source 이것은 우리의 응용 프로그램이 전통적인 Symfony 앱에서 극적으로 다릅니다. 표준 Symfony 사용자 엔터티는 Passkey 메타데이터(AAGUID 또는 공개 키 Cose 알고리즘과 같은)를 저장할 수 있는 장비가 없습니다.We need a dedicated entity to store the credentials. 사용자 Entity 우리의 엔터테인먼트 실행 눈에 띄게 부재한 것은 . User Symfony\Component\Security\Core\User\UserInterface PasswordAuthenticatedUserInterface namespace App\Entity; use App\Repository\UserRepository; use Doctrine\ORM\Mapping as ORM; use Symfony\Component\Security\Core\User\UserInterface; use Symfony\Component\Uid\Uuid; use Symfony\Component\Validator\Constraints as Assert; #[ORM\Entity(repositoryClass: UserRepository::class)] #[ORM\Table(name: '`user`')] class User implements UserInterface { #[ORM\Id] #[ORM\GeneratedValue] #[ORM\Column] private ?int $id = null; #[ORM\Column(length: 255, unique: true)] private ?string $userHandle = null; #[ORM\Column(length: 180, unique: true)] #[Assert\NotBlank] #[Assert\Email] private ?string $email = null; public function __construct() { $this->userHandle = Uuid::v4()->toRfc4122(); } ... } PublicKeyCredentialSource 엔터티 단일 사용자는 여러 개의 패스키를 가질 수 있습니다(예를 들어, 휴대폰에서 Face ID, Mac에서 Touch ID, 키 체인에서 YubiKey).우리는 이러한 공공 키와 관련된 메타데이터를 저장할 엔터티가 필요합니다. 만들기 이 엔터티는 번역할 수 있어야 하며, bundle의 native로 번역할 수 있어야 합니다.This entity must be able to translate to and from the bundle's native 개체를 src/Entity/PublicKeyCredentialSource.php Webauthn\PublicKeyCredentialSource 가장 중요한 것은 우리가 보존해야 하는 그렇게하지 않으면 높은 보안 엔터프라이즈 하드웨어 키가 필요한 경우 필요한 인증 데이터를 파괴합니다. TrustPath namespace App\Entity; use App\Repository\PublicKeyCredentialSourceRepository; use Doctrine\ORM\Mapping as ORM; use Webauthn\PublicKeyCredentialSource as WebauthnSource; #[ORM\Entity(repositoryClass: PublicKeyCredentialSourceRepository::class)] #[ORM\Table(name: 'webauthn_credentials')] class PublicKeyCredentialSource extends WebauthnSource { #[ORM\Id] #[ORM\GeneratedValue] #[ORM\Column] private ?int $id = null; public function getId(): ?int { return $this->id; } } 이 CredentialSourceRepository 또한 A를 실행해야 합니다. 이 실행은 . CredentialSourceRepository Webauthn\Bundle\Repository\PublicKeyCredentialSourceRepository namespace App\Repository; use App\Entity\PublicKeyCredentialSource; use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository; use Doctrine\Persistence\ManagerRegistry; use Symfony\Component\ObjectMapper\ObjectMapperInterface; use Webauthn\Bundle\Repository\PublicKeyCredentialSourceRepositoryInterface; use Webauthn\Bundle\Repository\CanSaveCredentialSource; use Webauthn\PublicKeyCredentialSource as WebauthnSource; use Webauthn\PublicKeyCredentialUserEntity; class PublicKeyCredentialSourceRepository extends ServiceEntityRepository implements PublicKeyCredentialSourceRepositoryInterface, CanSaveCredentialSource { public function __construct(ManagerRegistry $registry, private readonly ObjectMapperInterface $objectMapper) { parent::__construct($registry, PublicKeyCredentialSource::class); } public function findOneByCredentialId(string $publicKeyCredentialId): ?WebauthnSource { return $this->findOneBy(['publicKeyCredentialId' => $publicKeyCredentialId]); } public function findAllForUserEntity(PublicKeyCredentialUserEntity $publicKeyCredentialUserEntity): array { return $this->findBy(['userHandle' => $publicKeyCredentialUserEntity->id]); } public function saveCredentialSource(WebauthnSource $publicKeyCredentialSource): void { $entity = $this->findOneBy(['publicKeyCredentialId' => base64_encode($publicKeyCredentialSource->publicKeyCredentialId)]) ?? $this->objectMapper->map($publicKeyCredentialSource, PublicKeyCredentialSource::class); $this->getEntityManager()->persist($entity); $this->getEntityManager()->flush(); } } WebAuthn 버킷은 추상적인 인터페이스를 사용하여 사용자와 인증서를 찾고 유지합니다.Our repositories must implement these interfaces. 사용자 Repository UserRepository는 PublicKeyCredentialUserEntityRepositoryInterface를 구현합니다.We also implement because we want the bundle to handle user creation automatically during a passkey registration. 그리고 . CanRegisterUserEntity CanGenerateUserEntity namespace App\Repository; use App\Entity\User; use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository; use Doctrine\Persistence\ManagerRegistry; use Symfony\Component\Uid\Uuid; use Webauthn\Bundle\Repository\CanGenerateUserEntity; use Webauthn\Bundle\Repository\CanRegisterUserEntity; use Webauthn\Bundle\Repository\PublicKeyCredentialUserEntityRepositoryInterface; use Webauthn\Exception\InvalidDataException; use Webauthn\PublicKeyCredentialUserEntity; class UserRepository extends ServiceEntityRepository implements PublicKeyCredentialUserEntityRepositoryInterface, CanRegisterUserEntity, CanGenerateUserEntity { public function __construct(ManagerRegistry $registry) { parent::__construct($registry, User::class); } public function saveUserEntity(PublicKeyCredentialUserEntity $userEntity): void { $user = new User(); $user->setEmail($userEntity->name); $user->setUserHandle($userEntity->id); $this->getEntityManager()->persist($user); $this->getEntityManager()->flush(); } public function generateUserEntity(?string $username, ?string $displayName): PublicKeyCredentialUserEntity { return new PublicKeyCredentialUserEntity( $username ?? '', Uuid::v4()->toRfc4122(), $displayName ?? $username ?? '' ); } ... 모델 번호:Bridging Symfony and Apple 애플은 구체적인 요구를 이 방법은 앱을 사용자의 iCloud Keychain에 식별합니다. “Relying Party” (RP) WebAuthn 구성 config/packages/webauthn.yaml 만들기 또는 업데이트: webauthn: allowed_origins: ['%env(WEBAUTHN_ALLOWED_ORIGINS)%'] credential_repository: 'App\Repository\PublicKeyCredentialSourceRepository' user_repository: 'App\Repository\UserRepository' creation_profiles: default: rp: name: '%env(RELYING_PARTY_NAME)%' id: '%env(RELYING_PARTY_ID)%' request_profiles: default: rp_id: '%env(RELYING_PARTY_ID)%' WebAuthn은 도메인에 대해 매우 엄격합니다. a passkey created for 사용할 수 없습니다 on 우리의 응용 프로그램이 환경을 통해 전송 가능하도록 하기 위해, 우리는 Relying Party (RP) 설정을 설정합니다. 파일을 example.com phishing-example.com .env 오픈 그리고 추가 : .env or .env.local ###> web-auth/webauthn-symfony-bundle ### RELYING_PARTY_ID=localhost RELYING_PARTY_NAME="My Application" WEBAUTHN_ALLOWED_ORIGINS=localhost ###< web-auth/webauthn-symfony-bundle ### 생산에 있어서, 당신의 정확한 루트 도메인 (예를 들어, ) 그리고 . RELYING_PARTY_ID example.com WebAuthn requires a secure HTTPS context Browsers only exempt localhost for development 등록 흐름 (Creation) Passkey 등록은 2 단계의 손잡이입니다 : 도전: 서버는 고유 한 도전과 “창조 옵션”을 생성합니다. 인증: 브라우저 (Safari/Chrome)는 사용자에게 FaceID/TouchID를 요청하고 도전을 서명하고 "인증 객체"를 서버로 다시 보냅니다. The Frontend : 자극과 CSRF 안전이 가장 중요하지만, 본질적으로 피싱 저항성이 있으며, 귀하의 엔드포인트는 여전히 전통에 취약합니다. 우리는 Symfony의 내장된 CSRF 토큰을 우리의 헤더를 통해 전달할 것입니다. . WebAuthn Cross-Site Request Forgery (CSRF) fetch() calls 당신이 기준을 가지고 있다고 가정하면 도우미 ( Like 메타 태그 또는 숨겨진 입력에서 토큰을 추출), 우리는 그것을 우리의 Passkey 컨트롤러에 주입. CSRF csrf_protection_controller.js import { Controller } from '@hotwired/stimulus'; import { startRegistration, startAuthentication } from '@simplewebauthn/browser'; import { generateCsrfHeaders } from './csrf_protection_controller.js'; export default class extends Controller { static values = { optionsUrl: String, resultUrl: String, isLogin: Boolean } connect() { console.log('Passkey controller connected! 🔑'); } async submit(event) { event.preventDefault(); const username = this.element.querySelector('[name="username"]')?.value; if (!this.isLoginValue && !username) { alert('Please provide a username/email'); return; } const csrfHeaders = generateCsrfHeaders(this.element); try { // 1. Fetch options const response = await fetch(this.optionsUrlValue, { method: 'POST', headers: { 'Content-Type': 'application/json', ...csrfHeaders }, body: username ? JSON.stringify({ username: username, displayName: username }) : '{}' }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); throw new Error(errorData.errorMessage || 'Failed to fetch WebAuthn options from server'); } const options = await response.json(); // 2. Trigger Apple's Passkey UI (Create or Get) let credential; if (this.isLoginValue) { credential = await startAuthentication({ optionsJSON: options }); } else { credential = await startRegistration({ optionsJSON: options }); } // 3. Send result back to verify const result = await fetch(this.resultUrlValue, { method: 'POST', headers: { 'Content-Type': 'application/json', ...csrfHeaders }, body: JSON.stringify(credential) }); if (result.ok) { window.location.reload(); } else { const errorText = await result.text(); alert('Authentication failed: ' + errorText); } } catch (e) { console.error(e); alert('WebAuthn process failed: ' + e.message); } } } 라우팅 당신은 라우팅 유형을 보장해야합니다 생성하기 - 생성하기 : webauthn config/routes/webauthn_routes.yaml webauthn_routes: resource: . type: webauthn 보안 뱅크 통합 사용자가 사용자와 함께 로그인할 수 있도록 우리는 그것을 구성할 필요가 있다. . Passkey Symfony Guard (now the Authenticator system) config/packages/security.yaml에서 다음을 참조하십시오: security: providers: app_user_provider: entity: class: App\Entity\User property: email firewalls: dev: pattern: ^/(_(profiler|wdt)|css|images|js)/ security: false main: lazy: true provider: app_user_provider webauthn: authentication: routes: options_path: /login/passkey/options result_path: /login/passkey/result registration: enabled: true routes: options_path: /register/passkey/options result_path: /register/passkey/result success_handler: App\Security\AuthenticationSuccessHandler failure_handler: App\Security\AuthenticationFailureHandler logout: path: app_logout access_control: - { path: ^/dashboard, roles: ROLE_USER } Authentication Failure Handler에 대한 리뷰 보기 때문에 의식이 포함된 프론트 엔드에서 요청하는 경우 표준 Symfony 리디렉트가 실패하면 (예를 들어, 이미 존재하는 이메일을 등록하려는 경우) 브라우저가 조용히 삼킬 것이며, 실망스러운 사용자 경험이 발생합니다. WebAuthn AJAX fetch() 우리는 습관을 실행한다. 그것은 깨끗한 것을 돌려줍니다. 요청이 Ajax인 경우 응답합니다. AuthenticationFailureHandler 401 Unauthorized JSON 만들기 : src/Security/AuthenticationFailureHandler.php namespace App\Security; use Symfony\Component\HttpFoundation\JsonResponse; use Symfony\Component\HttpFoundation\RedirectResponse; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\Routing\Generator\UrlGeneratorInterface; use Symfony\Component\Security\Core\Exception\AuthenticationException; use Symfony\Component\Security\Http\Authentication\AuthenticationFailureHandlerInterface; use Symfony\Component\Security\Http\SecurityRequestAttributes; readonly class AuthenticationFailureHandler implements AuthenticationFailureHandlerInterface { public function __construct(private UrlGeneratorInterface $urlGenerator) {} public function onAuthenticationFailure(Request $request, AuthenticationException $exception): RedirectResponse|JsonResponse { if ($request->getContentTypeFormat() === 'json' || $request->isXmlHttpRequest()) { return new JsonResponse([ 'status' => 'error', 'errorMessage' => $exception->getMessageKey(), ], Response::HTTP_UNAUTHORIZED); } // Store the error in the session $request->getSession()->set(SecurityRequestAttributes::AUTHENTICATION_ERROR, $exception); return new RedirectResponse($this->urlGenerator->generate('app_login')); } } Authentication Success Handler에 대한 리뷰 보기 Passkeys는 종종 전통적인 로그인 양식을 우회하기 때문에 사용자가 로그인 후 어디로 이동하는지 정의해야합니다. successful “Handshake.” namespace App\Security; use Symfony\Component\HttpFoundation\RedirectResponse; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\Routing\Generator\UrlGeneratorInterface; use Symfony\Component\Security\Core\Authentication\Token\TokenInterface; use Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface; readonly class AuthenticationSuccessHandler implements AuthenticationSuccessHandlerInterface { public function __construct(private UrlGeneratorInterface $urlGenerator) {} public function onAuthenticationSuccess(Request $request, TokenInterface $token): RedirectResponse { return new RedirectResponse($this->urlGenerator->generate('app_dashboard')); } } 검증 & Apple-Specific Gotchas HTTPS는 필수: 브라우저는 불안정한 출처(localhost를 제외한)에서 navigator.credentials를 노출하지 않습니다. RP ID Match: webauthn.yaml의 id가 귀하의 도메인과 정확하게 일치하는지 확인합니다. dev.example.com에 있는 경우, 귀하의 RP ID는 example.com이어야 합니다. Apple AAGUID: Apple 장치가 종종 "Zero AAGUID" (모든 제로)를 반환합니다. 라이브러리가 메타데이터를 통해 인증자를 엄격하게 검증하도록 구성되어 있다면 구성에 "Unknown Authenticators"를 허용해야 할 수도 있습니다. 결론 Symfony 7.4를 사용하여 Apple Passkeys로 전환하는 것은 단순한 보안 업그레이드가 아니라 사용자 경험에 상당한 개선입니다. , 그리고 복잡한 문자 요구 사항은 변환 및 사용자 보존을 증가시킵니다. password managers “forgot password” emails, 고위 개발자 또는 리드로서, 귀하의 우선 순위는 이 구현이 유지할 수 있도록 보장하는 것입니다. 그리고 PHP 8.x 속성, 당신은 당신의 코드베이스가 idiomatic 유지 하 고 미래의 Symfony LTS 릴리스에 대 한 준비. WebAuthn-Symfony-Bundle 배포에 대한 요약 체크리스트 SSL/TLS: 생산 환경이 유효한 인증서를 사용하는지 확인하십시오 (Passkeys는 일반 HTTP에서 실패합니다). RP ID 전략: Relaying Party ID를 상위 레벨 도메인으로 설정하여 하위 도메인을 지원할지 여부를 결정합니다.Decide if you want to support subdomains by setting your Relaying Party ID to the top-level domain. 백업 방법: FIDO2를 지원하지 않는 오래된 장치의 사용자에 대해 항상 보조 로그인 방법(마법 링크 또는 전통적인 암호와 같은)을 제공합니다. 메타데이터 검증: 높은 보안 응용 프로그램의 경우 웹-auth/webauthn-metadata-서비스를 사용하여 Passkey가 실제로 허가되지 않은 에뮬레이터가 아닌 Apple 장치에서 온지 확인하는 것을 고려하십시오. 당신은 GitHub에서 전체 구현을 찾을 수 있으며 프로젝트의 진행 상황을 추적 할 수 있습니다 : [ ] Source Code: https://github.com/mattleads/PasskeysAuth https://github.com/mattleads/PasskeysAuth 연결을 해보자! 이것이 도움이되었거나 구현에 대한 질문이 있다면, 나는 당신에게서 듣고 싶습니다. 링크드인: [https://www.linkedin.com/in/matthew-mochalkin/] 트위터 : [https://x.com/MattLeads] 텔레그램: [https://t.me/MattLeads] GitHub : [https://github.com/mattleads] https://www.linkedin.com/in/matthew-mochalkin/ https://x.com/MattLeads https://t.me/MattLeads https://github.com/mattleads