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

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

Eiji Kitamura

• تلميحات: تمنح التلميحات الجهات الموثوقة (RPs) إمكانية تحكُّم أفضل في 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 رقم تعريف جهة موثوق بها (رقم تعريف الجهة المحظورة) وجميع مفاتيح المرور. ترتبط بمعرّف جهة محظورة واحد. في العادة، لا يمكن للمصدر تحديد رقم تعريف الجهة المحظورة استنادًا إلى نطاقه، وبالتالي يمكن أن يحدّد www.example.co.uk في هذه الحالة رقم تعريف الجهة المحظورة example.co.uk، ولكن ليس example.com مع مصدر ذي صلة يمكن التحقّق من طلبات الجهة المحظورة التي تمت المطالبة بها من خلال استرجاع ملف 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 الآن واجهات برمجة تطبيقات لتحليلها PublicKeyCredentialCreationOptions أو PublicKeyCredentialRequestOptions تطلب WebAuthn العناصر مباشرةً من JSON، وينشئ تسلسلاً PublicKeyCredential الاستجابة مباشرة إلى JSON. جميع الحقول التي لها قيمة ArrayBuffer والتي تحمل بيانات ثنائية أوّلية يتم تحويلها تلقائيًا من قيمها بترميز Base64URL أو إليها. تتوفّر واجهات برمجة التطبيقات هذه في الإصدار 129 من Chrome.

قبل إنشاء مفتاح مرور، يجب استرجاع ملف بتنسيق JSON كائن PublicKeyCredentialCreationOptions من الخادم وفك ترميزه باستخدام 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);
  ...

قبل المصادقة باستخدام مفتاح مرور، عليك استرجاع ملف بتنسيق JSON PublicKeyRequestCreationOptions من الخادم وفك ترميزه باستخدام 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