وضع واجهة المستخدم الفوري لعمليات تسجيل الدخول

Eiji Kitamura

José Luis Zapata

تاريخ النشر: 12 مايو 2026

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

ملخص

يوفّر وضع واجهة المستخدم الفوري وضعًا يتعذّر تنفيذه على الفور إذا لم تتوفّر بيانات اعتماد على الجهاز. يتطابق هذا السلوك مع preferImmediatelyAvailableCredentials واجهات برمجة التطبيقات المتوفّرة على الأنظمة الأساسية للأجهزة الجوّالة، مثل Android وiOS. عند توفّر بيانات الاعتماد، يعرض المتصفّح مربّع حوار تسجيل دخول فوريًا للمستخدم. وفي حال عدم توفّرها، يتم رفض العمليّة غير المكتملة بدون إشعار، ما يتيح لك توفير طرق بديلة لتسجيل الدخول، مثل نموذج تسجيل الدخول، بدون التأثير في تجربة المستخدم.

اعتبارًا من مايو 2026، سيكون Chrome هو المتصفّح الوحيد الذي يتيح وضع واجهة المستخدم الفوري.

التحقّق من المتطلبات الأساسية

لاستخدام وضع واجهة المستخدم الفورية، يجب أن تتوفّر لدى المستخدم بيانات اعتماد مؤهّلة مخزّنة محليًا على جهازه. في Chrome، تشمل بيانات الاعتماد هذه ما يلي:

• مفاتيح المرور المحفوظة في خدمة توفير مفاتيح المرور، مثل مدير كلمات المرور في Google أو Windows Hello أو سلسلة مفاتيح iCloud
• كلمات المرور المحفوظة في "مدير كلمات المرور في Google"

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

رصد توفّر الميزة

قبل استدعاء وضع واجهة المستخدم الفورية، تحقَّق مما إذا كان المتصفّح يتيح إمكانية immediateGet باستخدام طريقة PublicKeyCredential.getClientCapabilities(). إذا لم تكن هذه الطريقة متاحة، يمكنك استخدام طرق تسجيل الدخول الحالية، مثل نماذج البريد الإلكتروني وكلمة المرور أو إثبات رقم الهاتف أو تسجيل الدخول باستخدام حساب على وسائل التواصل الاجتماعي.

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

للحصول على توافق أوسع مع المتصفحات، استخدِم polyfill المتاح في مستودع WebAuthn Polyfills على GitHub.

طلب بيانات الاعتماد

لتفعيل عملية تسجيل الدخول الفوري، استدعِ الدالة navigator.credentials.get() مع ضبط الحقل uiMode على 'immediate'.

من خلال تضمين password: true في طلبك، يمكن للمستخدمين الاستفادة من هذه التجربة إذا كان المتصفّح يتيح بيانات اعتماد كلمات المرور.

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

يجب التعامل مع NotAllowedError في كتلة catch لتوفير تجربة تسجيل دخول احتياطية.

التعامل مع مسارات تسجيل الدخول

يمكنك تنفيذ وضع واجهة المستخدم الفوري في سيناريوهَين أساسيَّين.

زر تسجيل الدخول

توفير زر مخصّص لتسجيل الدخول يقدّم تجربة سلسة بدون طلبات غير متوقّعة

1. ينقر المستخدم على زر تسجيل الدخول.
2. يتصل موقعك الإلكتروني بـ navigator.credentials.get() باستخدام uiMode: "immediate".
3. يبحث المتصفّح عن بيانات الاعتماد المحلية.
4. إذا عثر المتصفّح على بيانات اعتماد، سيظهر للمستخدم مربّع حوار لتسجيل الدخول مباشرةً كي يختار حسابًا.
5. إذا لم يعثر المتصفّح على أي بيانات اعتماد أو إذا أغلق المستخدم مربّع الحوار الفوري لتسجيل الدخول، سيظهر الخطأ NotAllowedError.
6. في حال ظهور الخطأ NotAllowedError، سيتابع موقعك الإلكتروني عرض صفحة تسجيل الدخول العادية.

تسجيل الدخول قبل إتمام عملية الدفع

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

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

1. يبدأ المستخدم إجراءً، مثل النقر على زر الدفع أثناء عملية تسوّق.
2. يتصل موقعك الإلكتروني بـ navigator.credentials.get() باستخدام uiMode: "immediate".
3. إذا كانت بيانات الاعتماد متوفّرة، يختار المستخدم إحداها لإكمال عملية تسجيل الدخول.
4. إذا لم تكن بيانات الاعتماد متوفّرة، سيعرض المتصفّح رسالة خطأ ولن يظهر مربّع حوار تسجيل الدخول الفوري. ستبقى تجربة المستخدم بدون تغيير، ويمكنك توجيه المستخدم إلى شاشة الدفع الحالية التي قد توفّر خيارات أخرى لتسجيل الدخول أو نموذج إتمام الدفع بلا تسجيل دخول.

مراجعة تدابير الخصوصية والأمان

يتّخذ المتصفّح إجراءات مهمة لحماية خصوصية المستخدمين، وهي:

• شرط إيماءة المستخدم: يجب بدء طلب البيانات من واجهة برمجة التطبيقات بإيماءة من المستخدم، مثل النقر، وذلك لمنع إجراء عمليات التحقّق بدون علم المستخدم. لا تستهلك المكالمة عملية التفعيل.
• قيود وضع التصفّح المتخفي: تعرض الطلبات في جلسات التصفّح المتخفي أو بخصوصية تامة دائمًا الخطأ NotAllowedError.
• عدم توفّر قوائم السماح: تؤدي الطلبات التي تتضمّن قائمة allowCredentials غير فارغة إلى طرح الخطأ NotAllowedError لمنع التتبّع على مستوى الجلسات.
• لا يمكن الإلغاء آليًا: لا يمكنك استخدام المَعلمة signal لإغلاق مربّع حوار تسجيل الدخول الفوري آليًا.