حالت رابط کاربری فوری برای ورود به سیستم

Eiji Kitamura

José Luis Zapata

منتشر شده: ۱۲ مه ۲۰۲۶

حالت رابط کاربری فوری برای ورود به سیستم، یک قابلیت وب است که برای ساده‌سازی جریان ورود به سیستم طراحی شده است. این ویژگی به شما امکان می‌دهد تا به‌طور فعال، کلیدهای عبور و رمزهای عبور مدیریت‌شده را مستقیماً در اختیار کاربران خود قرار دهید، زمانی که به لحظه ورود به سیستم می‌رسند، مانند کلیک روی دکمه ورود یا پرداخت .

چکیده

حالت رابط کاربری فوری، حالتی را فراهم می‌کند که در صورت عدم وجود اعتبارنامه به صورت محلی، فوراً از کار می‌افتد. این رفتار، منعکس‌کننده‌ی APIهای preferImmediatelyAvailableCredentials است که در پلتفرم‌های موبایل مانند اندروید و iOS یافت می‌شوند. هنگامی که اعتبارنامه وجود داشته باشد، مرورگر یک کادر محاوره‌ای ورود فوری به کاربر ارائه می‌دهد. در غیر این صورت، وعده را بی‌سروصدا رد می‌کند و به شما امکان می‌دهد روش‌های ورود به سیستم جایگزین، مانند یک فرم ورود به سیستم، را بدون ایجاد اختلال در تجربه کاربر ارائه دهید.

از ماه مه ۲۰۲۶، کروم تنها مرورگری است که از حالت رابط کاربری فوری پشتیبانی می‌کند.

پیش‌نیازها را بررسی کنید

برای استفاده از حالت رابط کاربری فوری، کاربر باید از قبل اعتبارنامه‌های واجد شرایط را به صورت محلی در دستگاه خود داشته باشد. در کروم، این اعتبارنامه‌ها شامل موارد زیر هستند:

• کلیدهای عبور ذخیره شده در یک ارائه دهنده کلید عبور مانند Google Password Manager ، Windows Hello یا iCloud Keychain .
• رمزهای عبور ذخیره شده در مدیریت رمز عبور گوگل

اگر هیچ اعتبارنامه محلی وجود نداشته باشد، API درخواست را بدون نمایش کادر محاوره‌ای ورود فوری رد می‌کند.

پشتیبانی از ویژگی را تشخیص دهید

قبل از فراخوانی حالت رابط کاربری فوری، با استفاده از متد PublicKeyCredential.getClientCapabilities() بررسی کنید که آیا مرورگر از قابلیت immediateGet پشتیبانی می‌کند یا خیر. اگر پشتیبانی نمی‌شود، به متدهای ورود به سیستم موجود، مانند فرم‌های ایمیل و رمز عبور، تأیید شماره تلفن یا ورود از طریق شبکه‌های اجتماعی، مراجعه کنید.

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 موجود در مخزن GitHub مربوط به WebAuthn Polyfills استفاده کنید.

درخواست اعتبارنامه

برای فعال کردن جریان ورود فوری، تابع 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. اگر اطلاعات ورود وجود نداشته باشد، مرورگر خطایی صادر می‌کند و هیچ پنجره‌ی ورود فوری نمایش داده نمی‌شود. تجربه‌ی کاربری بدون تغییر باقی می‌ماند و می‌توانید کاربر را به صفحه‌ی پرداخت موجود هدایت کنید، که ممکن است گزینه‌های ورود دیگری یا فرم پرداخت مهمان را ارائه دهد.

بررسی اقدامات حفظ حریم خصوصی و امنیتی

مرورگر اقدامات حیاتی را برای محافظت از حریم خصوصی کاربر انجام می‌دهد:

• الزام اشاره کاربر : برای جلوگیری از کاوش بی‌صدا، باید فراخوانی API را با یک اشاره کاربر، مانند کلیک، آغاز کنید. این فراخوانی، فعال‌سازی را مصرف نمی‌کند.
• محدودیت‌های حالت ناشناس : درخواست‌ها در جلسات ناشناس یا خصوصی همیشه NotAllowedError نشان می‌دهند.
• بدون لیست‌های مجاز : درخواست‌هایی که لیست allowCredentials خالی نباشد، NotAllowedError را برای جلوگیری از ردیابی متقابل ارسال می‌کنند.
• لغو برنامه‌نویسی‌شده : شما نمی‌توانید از پارامتر signal برای لغو برنامه‌نویسی‌شده‌ی پنجره‌ی ورود فوری استفاده کنید.