تسمح Web Authenticator API، المعروفة أيضًا باسم WebAuthn، للخوادم باستخدام تشفير المفتاح العام، بدلاً من كلمات المرور، لتسجيل المستخدمين ومصادقتهم. ويتم ذلك من خلال تفعيل التكامل بين هذه الخوادم وبرامج المصادقة القوية. قد تكون أجهزة المصادقة هذه أجهزة مادية مخصّصة (مثل مفاتيح الأمان) أو مدمجة مع أنظمة أساسية (مثل قارئات بصمات الأصابع). يمكنك قراءة المزيد حول WebAuthn هنا في webauthn.guide.
الشكاوى لدى المطور
قبل هذا المشروع، كان WebAuthn يفتقر إلى دعم تصحيح الأخطاء الأصلي في Chrome. لنفترض أنّ أحد المطوّرين ينشئ تطبيقًا يستخدم WebAuth، طلب الإذن بالوصول إلى برامج المصادقة الفعلية. وقد كان ذلك صعبًا لسببَين:
تتوفر العديد من النكهات المختلفة لصانعي المحتوى. استلزم تصحيح أخطاء مجموعة واسعة من الإعدادات والإمكانيات أن يكون لدى المطوّر إذن بالوصول إلى العديد من برامج المصادقة المختلفة التي قد تكون مكلفة في بعض الأحيان.
أجهزة المصادقات المادية آمنة بطبيعتها وبالتالي، يكون من المستحيل عادةً فحص حالتها.
وأردنا أن نسهّل عليك ذلك من خلال توفير إمكانية تصحيح الأخطاء مباشرةً في "أدوات مطوري البرامج في Chrome".
الحل: علامة تبويب WebAuthn جديدة
تسهّل علامة التبويب WebAuthn DevTools تصحيح أخطاء WebAuthn عن طريق السماح للمطوّرين بمحاكاة برامج المصادقة هذه وتخصيص إمكاناتها وفحص حالاتها.
التنفيذ
كانت إضافة دعم تصحيح الأخطاء إلى WebAuthn عملية مكونة من جزأين.
الجزء الأول: إضافة نطاق WebAuthn إلى بروتوكول "أدوات مطوّري البرامج في Chrome"
أولاً، أضفنا نطاقًا جديدًا في بروتوكول Chrome DevTools (CDP) يتم ربطه بمعالج يتواصل مع الواجهة الخلفية لWebAuthn.
يربط CDP الواجهة الأمامية لأدوات مطوّري البرامج ومتصفّح Chromium. في حالتنا، استخدمنا أعمال نطاق WebAuthn للربط بين علامة تبويب "أدوات مطوري البرامج في WebAuthn" وتنفيذ متصفِّح Chromium لواجهة برمجة التطبيقات WebAuthn.
يتيح نطاق WebAuthn تفعيل وإيقاف بيئة Virtual Authenticator، التي تؤدّي إلى إلغاء الربط بين المتصفِّح وعملية اكتشاف أداة المصادقة الحقيقية وتوصيل جهاز استكشاف افتراضي بدلاً من ذلك.
ونعرض أيضًا طرقًا في النطاق تعمل كطبقة رقيقة للواجهة الحالية لتطبيق Virtual Authenticator وواجهة Virtual Discovery، والتي تعتبر جزءًا من تنفيذ WebAuthn من Chromium. وتشمل هذه الطرق إضافة برامج المصادقات وإزالتها، بالإضافة إلى إنشاء بيانات الاعتماد المسجَّلة والحصول عليها ومحوها.
(يُرجى قراءة الرمز.)
الجزء الثاني: إنشاء علامة التبويب الموجّهة للمستخدم
ثانيًا، أنشأنا علامة تبويب موجّهة للمستخدمين في الواجهة الأمامية لأدوات مطوّري البرامج. تتألف علامة التبويب من طريقة عرض ونموذج. يربط الوكيل الذي يتم إنشاؤه تلقائيًا النطاق بعلامة التبويب.
في حين أن هناك 3 مكونات ضرورية، نحتاج إلى الاهتمام بعنصرين فقط: model وmodel. يتم إنشاء المكون الثالث وهو الوكيل تلقائيًا بعد إضافة النطاق. باختصار، الوكيل هو الطبقة التي تحمل الاتصالات بين الواجهة الأمامية وCDP.
النموذج
النموذج هو طبقة JavaScript التي تربط الوكيل وطريقة العرض. بالنسبة لحالتنا هذه، هذا النموذج بسيط للغاية. يأخذ الأوامر من العرض، ويبني الطلبات على نحو يجعلها قابلة للاستهلاك من قبل CDP، ثم يرسلها عن طريق الوكيل. تكون هذه الطلبات عادةً أحادية الاتجاه ولا يتم إرسال أي معلومات إلى العرض.
ومع ذلك، نردّ أحيانًا من النموذج إمّا لتقديم معرّف لبرنامج مصادقة تم إنشاؤه حديثًا أو لعرض بيانات الاعتماد المخزّنة في برنامج مصادقة حالي.
(يُرجى قراءة الرمز.)
العرض
ونستخدم العرض لتوفير واجهة المستخدم التي يمكن للمطوّر العثور عليها عند الوصول إلى أدوات مطوّري البرامج. وتحتوي على:
- شريط أدوات لتفعيل بيئة برنامج المصادقة الافتراضية
- قسم لإضافة برامج مصادقة
- قسم مخصّص لبرامج المصادقة التي تم إنشاؤها
(يُرجى قراءة الرمز.)
شريط الأدوات لتفعيل بيئة المصادقة الافتراضية
ولأنّ معظم تفاعلات المستخدم تتم باستخدام برنامج مصادقة واحد في كل مرة بدلاً من علامة التبويب بأكملها، فإنّ الوظيفة الوحيدة التي نقدّمها في شريط الأدوات هي التبديل بين تشغيل وإيقاف تشغيل البيئة الافتراضية.
ما أهمية ذلك؟ ومن المهم أن يضطر المستخدم إلى تبديل البيئة بشكل صريح لأنّ ذلك يؤدّي إلى فصل المتصفّح عن ميزة اكتشاف أداة المصادقة الحقيقية. لذلك، عندما يكون هذا الخيار مفعَّلاً، لن يتم التعرّف على أجهزة المصادقة الفعلية المتصلة، مثل قارئ بصمات الأصابع.
قرّرنا أنّ التبديل الواضح يساعد على تحسين تجربة المستخدم، خاصةً للمستخدمين الذين ينتقلون إلى علامة التبويب WebAuthn بدون توقُّع إيقاف ميزة الاكتشاف الحقيقي.
إضافة قسم Authenticator
بعد تفعيل بيئة برنامج المصادقة الافتراضية، نقدِّم للمطوّر نموذجًا مضمّنًا يسمح له بإضافة برنامج مصادقة افتراضي. في هذا النموذج، نقدِّم خيارات تخصيص تتيح للمستخدم تحديد بروتوكول برنامج المصادقة وطرق النقل، وكذلك ما إذا كان برنامج المصادقة يتيح استخدام المفاتيح المضمّنة وعملية التحقّق من المستخدم.
بعد أن ينقر المستخدم على إضافة، يتم تجميع هذه الخيارات وإرسالها إلى النموذج الذي يُجري الطلب لإنشاء برنامج مصادقة. بعد اكتمال ذلك، ستتلقى الواجهة الأمامية ردًا، ثم تعدّل واجهة المستخدم لتشمل برنامج المصادقة الذي تم إنشاؤه حديثًا.
عرض Authenticator
وفي كل مرة يتم فيها محاكاة برنامج مصادقة، نضيف قسمًا إلى عرض برنامج المصادقة لتمثيله. ويتضمّن كل قسم من أقسام برنامج المصادقة اسمًا ورقم تعريف وخيارات ضبط وأزرارًا لإزالة تطبيق المصادقة أو ضبطه وجدول بيانات اعتماد.
اسم تطبيق Authenticator
اسم برنامج المصادقة قابل للتخصيص، ويتم إعداده تلقائيًا على "Authenticator" مع ربطه بآخر 5 أحرف من معرّفه. في الأصل، كان اسم برنامج المصادقة هو معرّفه الكامل ولا يمكن تغييره. أضفنا أسماء قابلة للتخصيص ليتمكّن المستخدم من تصنيف برنامج المصادقة استنادًا إلى إمكاناته أو برنامج المصادقة الفعلي المطلوب محاكته أو أي لقب يسهل استيعابه إلى حد ما من معرّف مكون من 36 حرفًا.
جدول بيانات الاعتماد
أضفنا جدولاً إلى كل قسم برنامج مصادقة يعرض جميع بيانات الاعتماد المسجّلة. وفي كل صف، نوفّر معلومات عن بيانات الاعتماد، بالإضافة إلى أزرار لإزالة بيانات الاعتماد أو تصديرها.
في الوقت الحالي، نجمع المعلومات لملء هذه الجداول من خلال استطلاع رأي مركز CDP للحصول على بيانات الاعتماد المسجَّلة لكل برنامج مصادقة. نخطّط في المستقبل لإضافة حدث لإنشاء بيانات الاعتماد.
الزر "نشط"
أضفنا أيضًا زر اختيار نشط إلى كل قسم من أقسام برنامج المصادقة. إنّ برنامج المصادقة المفعّل حاليًا هو الجهاز الوحيد الذي يستمع إلى بيانات الاعتماد ويسجّلها. وبدون ذلك، لن يكون من الضروري تسجيل بيانات الاعتماد التي تحصل عليها برامج مصادقة متعدّدة، ما قد يشكّل عيبًا خطيرًا عند محاولة اختبار WebAuthn أثناء استخدامه.
تم تنفيذ الحالة "نشطة" باستخدام طريقة SetUserPresence على برامج المصادقة الافتراضية. تحدّد طريقة SetUserPresence ما إذا كانت اختبارات حضور المستخدم ناجحة لأداة مصادقة معيّنة. في حال إيقاف هذا الخيار، لن يتمكّن برنامج المصادقة من الاستماع إلى بيانات الاعتماد. ولذلك، يمكننا فرض سلوك حتمي من خلال التأكّد من تفعيله لبرنامج مصادقة واحد على الأكثر (الذي تم ضبطه على أنّه نشط)، وإيقاف ظهور المستخدم لجميع البرامج الأخرى.
كان التحدي المثير للاهتمام الذي واجهناه أثناء إضافة الزر النشط هو تجنب حالة السباق. ضع في اعتبارك السيناريو التالي:
ينقر المستخدم على زر الاختيار نشط في Authenticator X، ما يؤدي إلى إرسال طلب إلى CDP لضبط X على أنّه نشط. يتم تحديد زر الاختيار نشط لـ X، ويتم إلغاء اختيار جميع العناصر الأخرى.
بعد ذلك مباشرةً، ينقر المستخدم على زر الاختيار نشط لتطبيق Authenticator Y، ما يرسل طلبًا إلى CDP لضبط Y على أنّه نشط. يتم تحديد زر الاختيار نشط لـ Y، ويتم إلغاء تحديد جميع العناصر الأخرى، بما في ذلك X.
وفي الخلفية، تكتمل عملية طلب تعيين Y على أنها نشطة وتم حلها. الرمز Y نشط حاليًا وجميع برامج المصادقة الأخرى غير نشطة.
في الخلفية، تكتمل عملية طلب تعيين X على أنها نشطة وتم حلها. أصبح X نشط الآن وجميع برامج المصادقة الأخرى، بما في ذلك Y، ليست كذلك.
واليوم، يكون الموقف الناتج عن ذلك كما يلي: هي برنامج المصادقة النشِط. ومع ذلك، لا يتم تحديد زر الاختيار نشط لـ X. ليس برنامج المصادقة النشط. ومع ذلك، يتم تحديد زر الاختيار نشط لـ Y. هناك خلاف بين الواجهة الأمامية والحالة الفعلية لبرنامج المصادقة. من الواضح أن هذه مشكلة.
الحل الذي نقدمه: إنشاء اتصال ثنائي الاتجاه بين أزرار الاختيار وجهاز المصادقة النشط. أولاً، نحتفظ بمتغير activeId في العرض لتتبع رقم تعريف برنامج المصادقة النشِط حاليًا. بعد ذلك، ننتظر إلى أن يتم ضبط برنامج مصادقة نشط على الظهور ثم نضبط activeId على رقم تعريف برنامج المصادقة هذا. وأخيرًا، نستعرض كل قسم من أقسام برنامج المصادقة. إذا كان رقم تعريف هذا القسم يساوي activeId، سنضبط الزرّ على أنّه محدّد. وبخلاف ذلك، نضبط الزر على "إلغاء اختياره".
إليك كيف يبدو ذلك:
async _setActiveAuthenticator(authenticatorId) {
await this._clearActiveAuthenticator();
await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
this._activeId = authenticatorId;
this._updateActiveButtons();
}
_updateActiveButtons() {
const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
Array.from(authenticators).forEach(authenticator => {
authenticator.querySelector('input.dt-radio-button').checked =
authenticator.getAttribute('data-authenticator-id') === this._activeId;
});
}
async _clearActiveAuthenticator() {
if (this._activeId) {
await this._model.setAutomaticPresenceSimulation(this._activeId, false);
}
this._activeId = null;
}
مقاييس الاستخدام
أردنا تتبع استخدام هذه الميزة. في البداية، توصلنا إلى خيارين.
الاحتساب في كل مرة تم فيها فتح علامة التبويب WebAuthn في "أدوات مطوري البرامج". قد يؤدي هذا الخيار إلى زيادة عدد العناصر في الحساب، حيث قد يفتح شخص علامة التبويب بدون استخدامها فعليًا.
تتبُّع عدد المرات التي تم فيها تبديل مربّع الاختيار "تفعيل بيئة برنامج المصادقة الافتراضية" في شريط الأدوات واجه هذا الخيار أيضًا مشكلة محتملة في الحساب، حيث قد يبدّل البعض تشغيل البيئة وإيقافها عدة مرات في الجلسة نفسها.
في النهاية، قرّرنا استخدام الإجراء الثاني مع تقييد عملية الاحتساب من خلال إجراء عملية تحقّق لمعرفة ما إذا كان قد سبق تفعيل البيئة في الجلسة. لذلك، سنزيد العدد بمقدار 1 فقط بغض النظر عن عدد المرات التي بدِّل فيها مطوّر البرامج البيئة. ويعود السبب في ذلك إلى إنشاء جلسة جديدة في كل مرة تتم فيها إعادة فتح علامة التبويب، ما يؤدي إلى إعادة ضبط التحقّق والسماح بزيادة المقياس مرة أخرى.
ملخّص
شكرًا على القراءة. إذا كانت لديك أي اقتراحات لتحسين علامة التبويب WebAuthn، يُرجى إعلامنا بها من خلال تقديم خطأ.
إليك بعض الموارد إذا كنت تريد معرفة المزيد من المعلومات عن WebAuthn:
- مستند تصميم الواجهة الأمامية في WebAuthn DevTools
- مستند تصميم واجهة برمجة التطبيقات لاختبار مصادقة الويب
- مواصفات واجهة برمجة تطبيقات مصادقة الويب (WebAuthn)
- شرح ودليل WebAuthn
تنزيل قنوات المعاينة
يمكنك استخدام إصدار Canary أو إصدار مطوّري البرامج أو الإصدار التجريبي من Chrome ليكون متصفِّح التطوير التلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات أدوات مطوّري البرامج، واختبار واجهات برمجة التطبيقات المتطورة للأنظمة الأساسية للويب، والعثور على المشاكل في موقعك الإلكتروني قبل أن يتمكّن المستخدمون من ذلك.
التواصل مع فريق "أدوات مطوري البرامج في Chrome"
يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة، أو أي موضوع آخر مرتبط بـ "أدوات مطوري البرامج".
- يمكنك إرسال اقتراحات أو ملاحظات إلينا عبر crbug.com.
- يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية
> مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج". - نشر تغريدة على @ChromeDevTools
- يمكنك إضافة تعليقات على الميزات الجديدة في الفيديوهات على YouTube في "أدوات مطوري البرامج" أو الفيديوهات على YouTube التي تتضمّن نصائح حول أدوات مطوّري البرامج.