معرفی نکات، درخواست‌های منبع مرتبط و سریال‌سازی JSON برای WebAuthn در کروم

کروم 128 و 129 ویژگی‌های جدید و هیجان‌انگیزی را برای WebAuthn معرفی می‌کند - API اساسی برای ساخت سیستم‌های احراز هویت مبتنی بر رمز عبور.

Eiji Kitamura

• نکات : نکات به طرف های متکی (RP) کنترل بهتری بر رابط کاربری WebAuthn در مرورگر می دهد. آنها به ویژه برای کاربران سازمانی که می خواهند از کلیدهای امنیتی استفاده کنند مفید هستند.
• درخواست‌های مبدا مرتبط : با درخواست‌های مبدا مرتبط، RP‌ها می‌توانند کلیدهای عبور را در چندین دامنه معتبر کنند. اگر صاحب چندین سایت هستید، اکنون می توانید به کاربران خود اجازه دهید از کلید عبور خود در سایت های شما استفاده مجدد کنند و اصطکاک ورود را از بین ببرید.
• سریال‌سازی JSON : APIهای سریال‌سازی JSON به شما امکان می‌دهند با رمزگذاری و رمزگشایی گزینه‌ها و اعتبارنامه‌هایی که به WebAuthn API ارسال می‌شوند، کد فرانت‌اند RP را ساده کنید.

نکات

با hints ، طرف‌های متکی (RP) اکنون می‌توانند اولویت‌های UI را برای ایجاد یک رمز عبور یا احراز هویت با یک رمز عبور مشخص کنند.

قبلاً، زمانی که یک RP می‌خواست احراز هویتی را که کاربر می‌تواند برای ایجاد یک رمز عبور یا احراز هویت استفاده کند، محدود کند، می‌توانست از authenticatorSelection.authenticatorAttachment برای تعیین "platform" یا "cross-platform" استفاده کند. آنها به ترتیب احراز هویت را به یک تأیید کننده پلتفرم یا یک تأیید کننده رومینگ محدود می کنند. با hints ، این مشخصات می تواند انعطاف پذیرتر باشد.

RP می‌تواند از hints اختیاری در PublicKeyCredentialCreationOptions یا PublicKeyCredentialRequestOptions برای مشخص کردن "security-key" ، "client-device" و "hybrid" به ترتیب ترجیحی در یک آرایه استفاده کند.

توجه: در Chrome، authenticatorAttachment در حال حاضر همچنان محترم است.

در زیر نمونه ای از درخواست ایجاد اعتبارنامه است که احراز هویت "cross-platform" با "security-key" به عنوان راهنمایی ترجیح می دهد. این به Chrome می‌گوید یک رابط کاربری متمرکز بر کلید امنیتی را برای کاربران سازمانی نشان دهد.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

با مشخص کردن "کلید امنیتی" به عنوان یک اشاره، مرورگر یک گفتگوی متمرکز بر کلید امنیتی را نشان می دهد.

هنگامی که یک RP می‌خواهد سناریوی تأیید بین دستگاهی را اولویت‌بندی کند، می‌تواند یک درخواست احراز هویت ارسال کند که احراز هویت‌های "cross-platform" را با "hybrid" به عنوان اشاره ترجیح می‌دهد.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

با مشخص کردن "هیبرید" به عنوان یک اشاره، مرورگر یک گفتگوی متمرکز بر ورود به سیستم بین دستگاه را نشان می دهد.

توجه: این نکات ممکن است در پلتفرم هایی مانند ویندوز که رابط کاربری توسط Chrome کنترل نمی شود رعایت نشوند.

درخواست های مبدا مرتبط

با Related Origin Requests ، RP ها می توانند کلیدهای عبور را از چندین دامنه قابل استفاده کنند. ایجاد یک تجربه ورود متمرکز و استفاده از پروتکل های فدراسیون راه حل پیشنهادی برای اکثر سایت ها باقی مانده است. اما اگر مالک چندین دامنه هستید و فدراسیون امکان پذیر نیست، ریشه های مرتبط ممکن است راه حلی باشد.

همه درخواست‌های WebAuthn باید یک شناسه شخص متکی (RP ID) را مشخص کنند، و همه کلیدهای عبور با یک شناسه RP مرتبط هستند. به طور سنتی، یک مبدا فقط می تواند یک شناسه RP را بر اساس دامنه خود مشخص کند، بنابراین در آن صورت www.example.co.uk می تواند یک شناسه RP از example.co.uk مشخص کند، اما example.com نه. با Related Origin Requests، شناسه RP ادعا شده را می توان با واکشی یک فایل JSON معروف واقع در /.well-known/webauthn از دامنه هدف، اعتبارسنجی کرد. بنابراین example.co.uk (و example.in ، example.de و غیره) همه می‌توانند از یک شناسه RP از example.com استفاده کنند، اگر example.com آنها را در قالب زیر مشخص کند:

URL: https://example.com/.well-known/webauthn

{
  "origins": [
    "https://example.co.uk",
    "https://example.de",
    "https://example.sg",
    "https://example.net",
    "https://exampledelivery.com",
    "https://exampledelivery.co.uk",
    "https://exampledelivery.de",
    "https://exampledelivery.sg",
    "https://myexamplerewards.com",
    "https://examplecars.com"
  ]
}

با نحوه تنظیم درخواست‌های مبدا مرتبط در اجازه استفاده مجدد از کلید عبور در سایت‌های خود با درخواست‌های مبدا مرتبط، بیاموزید.

سریال سازی JSON

اشیاء درخواست و پاسخ WebAuthn دارای چندین فیلد هستند که حاوی داده های باینری خام در یک ArrayBuffer هستند، مانند شناسه اعتبار، شناسه کاربر یا چالش. اگر وب‌سایتی بخواهد از JSON برای تبادل این داده‌ها با سرور خود استفاده کند، ابتدا باید داده‌های باینری، مثلاً با Base64URL، کدگذاری شوند. این پیچیدگی غیر ضروری را برای توسعه دهندگانی که می خواهند از کلیدهای عبور در وب سایت های خود استفاده کنند، اضافه می کند.

WebAuthn اکنون APIهایی را برای تجزیه PublicKeyCredentialCreationOptions و PublicKeyCredentialRequestOptions WebAuthn درخواست اشیاء را مستقیماً از JSON ارائه می دهد و پاسخ PublicKeyCredential را مستقیماً در JSON سریال می کند. تمام فیلدهای با ارزش ArrayBuffer که داده های باینری خام را حمل می کنند به طور خودکار از یا به مقادیر کدگذاری شده با Base64URL تبدیل می شوند. این APIها از Chrome 129 در دسترس هستند.

قبل از ایجاد یک رمز عبور، یک شی PublicKeyCredentialCreationOptions با کد JSON را از سرور واکشی کنید و آن را با استفاده از PublicKeyCredential.parseCreationOptionsFromJSON() رمزگشایی کنید.

پشتیبانی مرورگر

• 129
• 129
• 119
• x

منبع

export async function registerCredential() {

  // Fetch encoded `PublicKeyCredentialCreationOptions`
  // and JSON decode it.
  const options = await fetch('/auth/registerRequest').json();

  // Decode `PublicKeyCredentialCreationOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);  

  // Invoke the WebAuthn create() function.
  const cred = await navigator.credentials.create({
    publicKey: decodedOptions,
  });
  ...

پس از ایجاد یک رمز عبور، اعتبار حاصل را با استفاده از toJSON() رمزگذاری کنید تا بتوان آن را به سرور ارسال کرد.

پشتیبانی مرورگر

• 129
• 129
• 119
• x

منبع

  ...
  const cred = await navigator.credentials.create({
    publicKey: options,
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch('/auth/registerResponse', credential);
  ...

قبل از احراز هویت با کلید عبور، یک PublicKeyRequestCreationOptions کد شده JSON را از سرور واکشی کرده و با استفاده از PublicKeyCredential.parseRequestOptionsFromJSON() رمزگشایی کنید.

پشتیبانی مرورگر

• 129
• 129
• 119
• x

منبع

export async function authenticate() {

  // Fetch encoded `PublicKeyCredentialRequestOptions`
  // and JSON decode it.
  const options = await fetch('/auth/signinRequest').json();

  // Decode `PublicKeyCredentialRequestOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);

  // Invoke the WebAuthn get() function.
  const cred = await navigator.credentials.get({
    publicKey: options
  });
  ...

پس از احراز هویت با یک رمز عبور، اعتبار حاصل را با استفاده از متد toJSON() رمزگذاری کنید تا بتوان آن را به سرور ارسال کرد.

پشتیبانی مرورگر

• 129
• 129
• 119
• x

منبع

  ...
  const cred = await navigator.credentials.get({
    publicKey: options
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch(`/auth/signinResponse`, credential);
  ...

بیشتر بدانید

برای کسب اطلاعات بیشتر در مورد WebAuthn و کلیدهای عبور، منابع زیر را بررسی کنید:

• کلیدهای عبور | Chrome for Developers
• مقدمه ای بر پیاده سازی رمز عبور سمت سرور
• passkeys.dev