إضافة تلميحات وطلبات المصدر ذي الصلة وتسلسل JSON لـ WebAuthn في Chrome

يقدّم الإصداران Chrome 128 وChrome 129 ميزات جديدة ومثيرة للاهتمام WebAuthn، واجهة برمجة التطبيقات الأساسية لتصميم أنظمة مصادقة مستندة إلى مفتاح المرور.

Eiji Kitamura

• التلميحات: تمنح التلميحات الجهات الموثوق بها (RP) إمكانية التحكّم بشكل أفضل في واجهة مستخدم WebAuthn في المتصفّح. وهي مفيدة بشكل خاص لمستخدمي المؤسسات الذين يريدون استخدام مفاتيح الأمان.
• طلبات المصادر ذات الصلة: باستخدام طلبات المصادر ذات الصلة، يمكن لمسؤولي الحسابات جعل مفاتيح المرور صالحة في نطاقات متعددة. إذا كنت تملك عدة مواقع إلكترونية، يمكنك الآن السماح للمستخدمين بإعادة استخدام مفتاح المرور على جميع مواقعك الإلكترونية، ما يزيل أي مشاكل في تسجيل الدخول.
• تسلسل JSON: تتيح لك واجهات برمجة التطبيقات لتسلسل JSON تبسيط رمز الواجهة الأمامية لمسؤول المعالجة من خلال ترميز الخيارات وفك ترميزها، وكذلك بيانات الاعتماد التي يتم تمريرها إلى WebAuthn API ومنها.

تلميحات

باستخدام hints، يمكن الآن للأطراف المعتمِدة (RP) تحديد الإعدادات المفضّلة لواجهة المستخدم لإنشاء مفتاح مرور أو المصادقة باستخدام مفتاح مرور.

في السابق، عندما أراد مقدّم الخدمات تقييد معرّف الهوية الذي يمكن للمستخدم استخدامه ل إنشاء مفتاح مرور أو للمصادقة، كان بإمكانه استخدام authenticatorSelection.authenticatorAttachment لتحديد "platform" أو "cross-platform". وهما يحدّدان المصادقة على التوالي على مصادقة النظام الأساسي أو مصادقة التجوال. باستخدام hints، يمكن أن تكون هذه المواصفات أكثر مرونة.

يمكن للجهة المحظورة استخدام السمة hints الاختيارية في PublicKeyCredentialCreationOptions أو PublicKeyCredentialRequestOptions لتحديد "security-key" و"client-device" و"hybrid" بترتيب الإعدادات المفضّلة في مصفوفة.

في ما يلي مثال على طلب إنشاء بيانات اعتماد يفضّل استخدام مصادقة "cross-platform" مع "security-key" كإشارة. يؤدي ذلك إلى إعلام Chrome بعرض واجهة مستخدم تركّز على مفتاح الأمان لمستخدمي الإصدار الخاص بالمؤسسات.

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

عندما يريد مقدّم الخدمة منح الأولوية لسيناريو إثبات الهوية على جميع الأجهزة، يمكنه إرسال طلب مصادقة يفضّل "cross-platform" مصادقة مع "hybrid" كإشارة.

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

طلبات المصدر ذات الصلة

باستخدام طلبات المنشأ المرتبط، يمكن لموفّري الخدمات جعل مفاتيح المرور قابلة للاستخدام من نطاقات متعددة. يبقى إنشاء تجربة تسجيل دخول متمركزة واستخدام بروتوكولات الدمج هو الحلّ المُقترَح ل معظم المواقع الإلكترونية. ولكن إذا كنت تملك نطاقات متعددة ولم يكن الدمج ممكنًا، قد تكون المواقع الإلكترونية ذات المصدر المرتبط هي الحلّ.

يجب أن تحدِّد جميع طلبات WebAuthn رقم تعريف الطرف الموثوق به (رقم تعريف RP)، وتكون جميع مفاتيح المرور مرتبطة برقم تعريف RP واحد. في العادة، لا يمكن لنقطة الانطلاق تحديد سوى معرّف مقدّم الخدمة استنادًا إلى نطاقها، لذا في هذه الحالة يمكن أن تحدّد www.example.co.uk معرّف مقدّم الخدمة example.co.uk، ولكن ليس example.com. باستخدام طلبات Related Origin Requests، يمكن التحقّق من رقم تعريف موفِّر الموارد الذي تمّت المطالبة به من خلال جلب ملف JSON معروف جيدًا يقع على العنوان /.well-known/webauthn من النطاق المستهدَف. بالتالي، يمكن لـ example.co.uk (وexample.in وexample.de وما إلى ذلك) استخدام رقم تعريف الجهة المحظورة 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 الآن واجهات برمجة تطبيقات لتحليل كائنات طلب WebAuthn PublicKeyCredentialCreationOptions و PublicKeyCredentialRequestOptions مباشرةً من تنسيق JSON، وتسلسل استجابة PublicKeyCredential مباشرةً إلى تنسيق JSON. يتم تلقائيًا تحويل كل الحقول التي تحتوي على قيم ArrayBuffer والتي تحمل بيانات ثنائية خامة من قيمها المشفَّرة باستخدام Base64URL أو إليها. تتوفّر واجهات برمجة التطبيقات هذه اعتبارًا من الإصدار 129 من Chrome.

قبل إنشاء مفتاح مرور، احصل على عنصر PublicKeyCredentialCreationOptions بترميز JSON من الخادم وفك تشفيره باستخدام PublicKeyCredential.parseCreationOptionsFromJSON().

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() لكي تتمكّن من إرسالها إلى الخادم.

  ...
  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().

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() حتى يتم إرسالها إلى الخادم.

  ...
  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 للمطوّرين
• مقدّمة عن تنفيذ مفتاح المرور من جهة الخادم
• passkeys.dev