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

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);
  }
}

للحصول على توافق أوسع مع المتصفحات، استخدِم رمز التعبئة المتوفّر في مستودع 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 لإغلاق مربّع الحوار الخاص بتسجيل الدخول الفوري آليًا.