تسجيل الدخول باستخدام مفتاح مرور من خلال الملء التلقائي للنموذج

أنشئ تجربة تسجيل دخول تستفيد من مفاتيح المرور مع إتاحة استخدام كلمات المرور الحالية.

Eiji Kitamura

يوضّح هذا الدليل كيفية استخدام ميزة "الملء التلقائي للنماذج" للسماح للمستخدمين بتسجيل الدخول باستخدام مفاتيح المرور وكلمات المرور. يؤدي استخدام ميزة الملء التلقائي للنموذج إلى إنشاء تجربة موحّدة لتسجيل الدخول، ما يسهّل الانتقال من كلمات المرور إلى طريقة المصادقة الأكثر أمانًا وسهولة في الاستخدام، وهي مفتاح المرور.

تعرَّف على كيفية تنفيذ واجهة المستخدم الشرطية في WebAuthn لتوفير مفتاح المرور وكلمة المرور للمستخدمين بأقل قدر من المشاكل في نماذج تسجيل الدخول الحالية.

لماذا يجب استخدام ميزة "الملء التلقائي للنماذج" لتسجيل الدخول باستخدام مفتاح مرور؟

تتيح مفاتيح المرور للمستخدمين تسجيل الدخول إلى المواقع الإلكترونية باستخدام بصمة الإصبع أو بصمة الوجه أو رقم التعريف الشخصي للجهاز.

إذا كان جميع المستخدمين لديهم مفاتيح مرور، يمكن أن يكون مسار المصادقة عبارة عن زر تسجيل دخول واحد. سيؤدي النقر على الزر إلى السماح للمستخدم بإثبات ملكية الحساب مباشرةً باستخدام قفل الشاشة وتسجيل الدخول.

ومع ذلك، يواجه المستخدمون بعض التحديات عند الانتقال من كلمات المرور إلى مفاتيح المرور. يجب أن تتيح المواقع الإلكترونية للمستخدمين تسجيل الدخول باستخدام كلمات المرور ومفاتيح المرور خلال هذه الفترة. يؤدي توقّع تذكُّر المستخدمين للمواقع الإلكترونية التي تستخدم مفاتيح المرور ومطالبتهم باختيار طريقة تسجيل الدخول مسبقًا إلى ترك انطباع سيئ لدى المستخدم.

مفاتيح المرور هي أيضًا تكنولوجيا جديدة، وقد يكون من الصعب شرحها بوضوح. يساعد استخدام واجهة الملء التلقائي المألوفة في معالجة كل من تحدي الانتقال والحاجة إلى أن يكون المستخدم على دراية بالواجهة.

استخدام واجهة مستخدم شرطية

لتقديم الدعم للمستخدمين الذين يعتمدون على مفاتيح المرور وكلمات المرور على حد سواء، عليك تضمين مفاتيح المرور في اقتراحات الملء التلقائي للنموذج. تستخدم هذه الطريقة واجهة مستخدم شرطية، وهي إحدى ميزات معيار WebAuthn.

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

يتيح ذلك للمستخدمين تسجيل الدخول إلى موقعك الإلكتروني باستخدام نموذج تسجيل الدخول الحالي، ولكن مع ميزة الأمان الإضافية التي توفّرها مفاتيح المرور إذا كان لديهم مفتاح مرور.

طريقة عمل المصادقة باستخدام مفتاح المرور

للمصادقة باستخدام مفتاح مرور، عليك استخدام WebAuthn API.

المكوّنات الأربعة في عملية المصادقة باستخدام مفتاح مرور هي:

• الخادم الخلفي: يخزّن تفاصيل حساب المستخدم، بما في ذلك المفتاح العام.
• الواجهة الأمامية: تتواصل مع المتصفّح وتجلب البيانات اللازمة من الواجهة الخلفية.
• المتصفّح: يشغّل JavaScript ويتفاعل مع WebAuthn API.
• مقدّم مفتاح المرور: ينشئ مفتاح المرور ويخزّنه. يكون ذلك عادةً مدير كلمات مرور، مثل "مدير كلمات المرور في Google"، أو مفتاح أمان.

تتّبع عملية المصادقة باستخدام مفاتيح المرور الخطوات التالية:

1. ينتقل المستخدم إلى صفحة تسجيل الدخول، ويطلب الواجهة الأمامية اختبار التحقّق من الهوية من الخادم الخلفي.
2. ينشئ الخادم الخلفي اختبار WebAuthn ويرسله، ويكون مرتبطًا بحساب المستخدم.
3. تطلب واجهة المستخدم من navigator.credentials.get() تقديم التحدّي لبدء عملية المصادقة باستخدام المتصفّح.
4. يطلب المتصفّح من المستخدم، من خلال التفاعل مع مقدّم مفتاح المرور، اختيار مفتاح مرور (غالبًا باستخدام مربّع حوار الملء التلقائي الذي يتم تشغيله من خلال التركيز على حقل تسجيل الدخول) وإثبات هويته باستخدام قفل شاشة الجهاز أو المقاييس الحيوية.
5. بعد إثبات هوية المستخدم بنجاح، يوقّع موفّر مفتاح المرور على التحدّي، ويعرض المتصفّح بيانات اعتماد المفتاح العام الناتجة (بما في ذلك التوقيع) على واجهة المستخدم.
6. يرسل الواجهة الأمامية بيانات الاعتماد هذه إلى الخادم الخلفي.
7. يتحقّق الخادم الخلفي من توقيع بيانات الاعتماد مقارنةً بالمفتاح العام المخزَّن للمستخدم. في حال نجاح عملية التحقّق، تسجّل الخلفية دخول المستخدم.

المصادقة باستخدام مفتاح مرور من خلال ميزة "الملء التلقائي للنماذج"

لبدء المصادقة باستخدام مفتاح المرور من خلال ميزة الملء التلقائي للنماذج، عليك إجراء طلب WebAuthn get مشروط عند تحميل صفحة تسجيل الدخول. يتضمّن طلب البيانات هذا إلى navigator.credentials.get() الخيار mediation: 'conditional'.
لا يعرض الطلب الشرطي إلى واجهة برمجة التطبيقات WebAuthnnavigator.credentials.get() واجهة المستخدم على الفور. بدلاً من ذلك، ينتظر في حالة معلّقة إلى أن يتفاعل المستخدم مع طلب التعبئة التلقائية لحقل اسم المستخدم. إذا اختار المستخدم مفتاح مرور، سيحلّ المتصفّح الوعد المعلّق باستخدام بيانات اعتماد لتسجيل دخول المستخدم، مع تخطّي عملية إرسال النموذج التقليدية. إذا اختار المستخدم كلمة مرور بدلاً من ذلك، لن يتم تنفيذ الوعد، وستستمر عملية تسجيل الدخول باستخدام كلمة المرور العادية، وستكون الصفحة مسؤولة عن تسجيل دخول المستخدم.

حقل إدخال النموذج مع تعليق توضيحي

لتفعيل ميزة "الملء التلقائي" لمفاتيح المرور، أضِف السمة autocomplete إلى حقل اسم المستخدم input في النموذج. أدرِج username وwebauthn كقيم مفصولة بمسافة.

<input type="text" name="username" autocomplete="username webauthn" autofocus>

تؤدي إضافة autofocus إلى هذا الحقل تلقائيًا إلى ظهور طلب الملء التلقائي عند تحميل الصفحة، ما يؤدي إلى عرض كلمات المرور ومفاتيح المرور المتاحة على الفور.

رصد الميزات

قبل استدعاء WebAuthn API مشروط، تحقَّق مما يلي:

• يتوافق المتصفّح مع WebAuthn باستخدام PublicKeyCredential.

• يتوافق المتصفّح مع رصد الإمكانات باستخدام PublicKeyCredential.getClientCapabilities().