Upgrade to Pro — share decks privately, control downloads, hide ads and more …

意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn

Avatar for teamLab teamLab PRO
September 07, 2025

意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn

フロントエンドカンファレンス北海道2025にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

フロントエンドカンファレンス北海道2025
開催日:2025年9月6日(土)
会場:エア・ウォーターの森(北海道札幌市)

Avatar for teamLab

teamLab PRO

September 07, 2025
Tweet

More Decks by teamLab

Other Decks in Programming

Transcript

  1. © teamLab Inc → パスキーを実現する Web API であり   ブラウザと認証器とのやりとりを⾏う

    WebAuthn (Web Authentication API) ブラウザ/アプリケーション サーバー 認証器 (ユーザ端末側 ) WebAuthn が担う範囲 チャレンジの取得 認証要求 認証結果 認証結果の検証
  2. © teamLab Inc パスキーの⾃動作成 const credential = await navigator.credentials.create({ publicKey:

    options // サーバーから取得 mediation: 'conditional' }); 認証要求なし
  3. © teamLab Inc パスキーログイン (Conditional UI) const credential = await

    navigator.credentials.get({ publicKey: options mediation: 'conditional' }); <input type="text" name="username" autocomplete="username webauthn"> フォームの input タグ
  4. © teamLab Inc パスキーの利⽤可否チェック const capabilities = await PublicKeyCredential.getClientCapabilities(); if

    (capabilities.conditionalCreate) /** パスキー自動作成利用可能 */ const isPasskeySupport = PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() TypeScript 5.8.2 から 新たにサポート const isPasskeyAutofillSupport = await PublicKeyCredential.isConditionalMediationAvailable() パスキーの作成ができる環境か パスキーの⾃動作成ができる環境か パスキーログイン (Conditional UI) ができる環境か
  5. © teamLab Inc サポートしきれてないバージョンがちらほら WebAuthnの(現時点の)難点 try { const credential =

    await navigator.credentials.create({ publicKey: options }); } catch (error) { console.log(error) } “NotAllowedError”:途中で中断した “InvalidStateError”:すでに登録済み など... Conditional UI によるパスキーログインができない パスキーエラーの値が⼀部異なる エラーハンドリング例 iOS Safari の⼀部 Android Chrome の⼀部
  6. © teamLab Inc しかしこれからを考えるとメリットだらけ - なにより安全で楽なパスキーログイン - 最新の OS/端末ではほぼ最⼤限のパスキー機能が使える -

    2025 4⽉末:Chrome でのパスキー⾃動作成対応 - WebAuthn の TypeScript サポートも追いついてきた パスキー/WebAuthn のこれから
  7. © teamLab Inc しかしこれからを考えるとメリットだらけ - なにより安全で楽なパスキーログイン - 最新の OS/端末ではほぼ最⼤限のパスキー機能が使える -

    2025 4⽉末:Chrome でのパスキー⾃動作成対応 - WebAuthn の TypeScript サポートも追いついてきた やるしかない!! パスキー/WebAuthn のこれから
  8. © teamLab Inc 参考記事 - web.dev - パスワードレスのログイン⽤のパスキーを作成する - web.dev

    - Chrome パソコン版の Google パスワード マネージャーでパスキーを⾃動的に作成する - web.dev - フォームの⾃動⼊⼒でパスキーを使⽤してログインする - Corbado - Passkeys iOS 18: Automatic Passkey Creation & Upgrades - npmdiff - (PublicKeyCredential.getClientCapabilities()」がTypeScript 5.8.2 から新たにサポート) - Webkit - Meet Face ID and Touch ID for the Web - Git repositories on chromium - faa43ab429e4c00469326ebe45de177320ba80af