WebAuthn和FIDO2是實現(xiàn)無密碼認證的關(guān)鍵技術(shù)，其核心在於使用公鑰加密代替?zhèn)鹘y(tǒng)密碼。 1. WebAuthn是由W3C制定的瀏覽器API，允許網(wǎng)站通過公鑰註冊和驗證用戶；2. FIDO2由FIDO聯(lián)盟推動，包含WebAuthn和CTAP協(xié)議，支持外部硬件如YubiKey；3. 註冊流程包括生成挑戰(zhàn)、收集用戶信息、調(diào)用create()創(chuàng)建密鑰對、存儲公鑰並驗證證明響應(yīng)；4. 認證流程類似，但使用get()並要求用戶確認存在性；5. 實施建議包括使用庫處理細節(jié)、保留備用登錄方式、跨平臺測試、啟用跨設(shè)備同步以及加強端點安全。這些步驟共同保障了安全且流暢的無密碼體驗。

If you're looking to implement secure, passwordless authentication on the web, WebAuthn and FIDO2 are two of the most powerful tools available today. These standards allow users to log in using biometrics, security keys, or built-in platform authenticators — no passwords required.

Here's how they work and what you need to know as a developer.

What Are WebAuthn and FIDO2?

WebAuthn is a web standard developed by the W3C that allows websites to register and authenticate users via public-key cryptography instead of passwords. It's part of the larger FIDO2 project led by the FIDO Alliance, which includes both WebAuthn (the browser API) and CTAP (Client to Authenticator Protocol), which handles communication with external hardware like YubiKeys.

The key idea: Instead of storing passwords on your server, you store a user's public key. The private key stays on their device and never leaves it. When they log in, the site asks the device to prove it owns the private key — without ever transmitting the key itself.

This makes phishing and credential theft much harder.

How to Register a New User Using WebAuthn

Setting up passwordless registration involves a few steps:

1. Generate a challenge
   The server creates a random byte string (the challenge) to prevent replay attacks.

2. Get user info
   Collect a username and display name from the user. This helps identify the account later.

3. Call navigator.credentials.create()
   The browser prompts the OS or authenticator to generate a new key pair. The private key stays on the device; the public key gets sent back.

4. Store the public key and credential ID
   Save this data on your backend along with the user's identity.

5. Verify the attestation response
   The browser returns a signed response proving the key was generated securely. You need to validate this on the server side.

You'll typically structure this in JSON format for the frontend to consume. Here's a simplified example:

 {
  "challenge": "random-bytes-as-base64",
  "rp": { "name": "My App" },
  "user": {
    "id": "user-unique-id",
    "name": "alice@example.com",
    "displayName": "Alice"
  },
  "pubKeyCredParams": [
    {"type": "public-key", "alg": -7},
    {"type": "public-key", "alg": -257}
  ]
}

Once the user completes registration, you can use the same system for login.

How to Authenticate an Existing User

Authentication follows a similar flow but uses navigator.credentials.get() instead of .create() . Here's how it works:

• The server sends a challenge again.
• The browser finds matching credentials on the user's device.
• The user confirms presence (eg, by touching a key or scanning a fingerprint).
• The authenticator signs the challenge and returns it.
• Your server verifies the signature against the stored public key.

One thing to note: Credential IDs must be unique per registered device or method. So if a user logs in from a new laptop or phone, they'll need to register a new credential.

Also, browsers enforce privacy protections — for example, Chrome may ask users to select an account before showing passkeys, even if only one exists.

Practical Tips for Implementation

Here are some things to keep in mind when building with WebAuthn:

• Use libraries where possible
  Libraries like SimpleWebAuthn handle many of the edge cases and cryptographic validations for you.

• Support fallbacks
  Not all devices support WebAuthn yet. Keep traditional login methods around until adoption grows.

• Test across platforms
  Behavior varies between Windows Hello, Touch ID, Android, iOS, and USB keys. Make sure your UX is consistent.

• Enable cross-device sync
  Passkeys can be synced through iCloud Keychain or Google Password Manager. Encourage users to enable syncing so they don't lose access.

• Secure your endpoints
  Don't skip server-side validation. Even though the browser does most of the crypto, you still need to verify responses properly.

That's basically how WebAuthn and FIDO2 work together to enable passwordless auth. It's not overly complex once you understand the flow, but there are enough moving parts to make careful implementation important.

以上是探索JavaScript Webauthn和Fido2，以獲取無密碼驗證的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！