تاریخ انتشار: ۱۲ مه ۲۰۲۶
حالت «واسط کاربر فوری» برای ورود به سیستم قابلیت وبی است که برای ساده‌سازی جریان‌های ورود به سیستم طراحی شده است. این ویژگی به شما امکان می‌دهد وقتی کاربران به لحظه ورود به سیستم می‌رسند، مثلاً روی دکمه ورود به سیستم یا تسویه‌حساب کلیک می‌کنند، گذرکلیدها و گذرواژه‌های مدیریت‌شده را به‌صورت پیش‌کنشی مستقیماً به آن‌ها پیشنهاد دهید.
انتزاعی
حالت «میانای کاربری فوری» حالتی را ارائه می‌دهد که اگر اطلاعات اعتباری به‌صورت محلی دردسترس نباشد، به‌سرعت ناموفق می‌شود. این رفتار منعکس‌کننده preferImmediatelyAvailableCredentials
میاناهای برنامه‌سازی کاربردی (API) موجود در پلاتفرم‌های همراه مانند Android و iOS است. وقتی اطلاعات اعتباری وجود داشته باشد،
مرورگر کادر گفتگوی ورود به سیستم فوری را به کاربر ارائه می‌دهد. درغیراین‌صورت، بدون اینکه متوجه شوید، وعده را رد می‌کند و به شما امکان می‌دهد روش‌های ورود به سیستم جایگزین، برای مثال، فرم ورود به سیستم، ارائه دهید بدون اینکه تجربه کاربر را مختل کنید.
از مه ۲۰۲۶، Chrome تنها مرورگری است که از حالت «میانای کاربری فوری» پشتیبانی می‌کند.
بررسی پیش‌نیازها
برای استفاده از حالت رابط کاربری فوری، کاربر باید ازقبل اطلاعات اعتباری واجدشرایطی در دستگاهش داشته باشد. در Chrome، این اطلاعات اعتباری شامل موارد زیر می‌شود:
- گذرکلیدهای ذخیره‌شده در ارائه‌دهنده گذرکلید مثل مدیر گذرواژه Google، Windows Hello، یا iCloud Keychain.
- گذرواژه‌های ذخیره‌شده در «مدیر گذرواژه Google».
اگر اعتبارنامه محلی وجود نداشته باشد، 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 مدیریت کنید.
مدیریت جریان‌های ورود به سیستم
می‌توانید حالت «میانای کاربر فوری» را برای دو سناریو اصلی پیاده‌سازی کنید. برای راهنمایی بیشتر درباره تجربه کاربری و الگوهای ضدالگویی که باید از آن‌ها اجتناب کنید، الگوهای تجربه کاربری برای حالت «واسط کاربر فوری» را ببینید.
ورود به سیستم با دکمه
دکمه ورود به سیستم اختصاصی ارائه دهید که تجربه‌ای پاکیزه بدون پیام‌واره‌های غیرمنتظره ارائه دهد.
- کاربر روی دکمه ورود به سیستم کلیک می‌کند.
- سایت شما با
uiMode: "immediate"باnavigator.credentials.get()تماس می‌گیرد. - مرورگر وجود اطلاعات اعتباری محلی را بررسی می‌کند.
- اگر مرورگر اطلاعات اعتباری پیدا کند، گفتگوی ورود به سیستم فوری را برای کاربر نمایش می‌دهد تا حسابی را انتخاب کند.
- اگر مرورگر اطلاعات اعتباری پیدا نکند یا کاربر کادر گفتگوی ورود به سیستم فوری را ببندد، مرورگر
NotAllowedErrorرا پرتاب می‌کند. - اگر
NotAllowedErrorپرتاب شود، سایت شما با صفحه ورود به سیستم استاندارد خود ادامه می‌دهد.
قبل‌از تسویه‌حساب وارد سیستم شوید
پیش‌از اینکه کاربر کنشی انجام دهد که از اصالت‌سنجی بهره‌مند شود، مثل شروع جریان تسویه‌حساب در ویترین فروشگاه آنلاین، اعتبارنامه را به‌صورت پیش‌فرض ارائه دهید.
در تجارت الکترونیک، کاربران مهمان اغلب بین ورود به سیستم حساب موجود یا تسویه‌حساب به‌عنوان مهمان انتخاب می‌کنند. ارائه چارگوش گفتگوی ورود به سیستم فوری می‌تواند فرایند تسویه‌حساب را برای مشتریان بازگشتی ساده و کارآمد کند.
- کاربر کنشی را آغاز می‌کند، مثلاً درطول جریان خرید روی دکمه تسویه‌حساب کلیک می‌کند.
- سایت شما با
uiMode: "immediate"باnavigator.credentials.get()تماس می‌گیرد. - اگر اطلاعات اعتباری وجود داشته باشد، کاربر یکی را برای تکمیل ورود به سیستم انتخاب می‌کند.
- اگر اطلاعات اعتباری وجود نداشته باشد، مرورگر خطا می‌دهد و کادر گفتگوی ورود به سیستم فوری نشان نمی‌دهد. تجربه کاربر بدون تغییر باقی می‌ماند و می‌توانید کاربر را به صفحه تسویه‌حساب موجود ببرید، که ممکن است گزینه‌های ورود به سیستم دیگر یا فرم تسویه‌حساب مهمان را ارائه دهد.
مرور اقدامات امنیتی و حریم خصوصی
مرورگر اقدامات مهمی را برای محافظت از حریم خصوصی کاربر اجرا می‌کند:
- الزام اشاره کاربر: برای جلوگیری از کاوش بی‌صدا، باید فراخوانی API را با اشاره کاربر، مثل کلیک کردن، آغاز کنید. تماس فعال‌سازی را مصرف نمی‌کند.
- محدودیت‌های حالت ناشناس: درخواست‌ها در جلسات ناشناس یا خصوصی
همیشه
NotAllowedErrorرا برمی‌گردانند. - بدون فهرست مجازها: درخواست‌های دارای فهرست
allowCredentialsغیرخالی،NotAllowedErrorرا برای جلوگیری از ردیابی بین جلسه‌ای ایجاد می‌کنند. - لغو برنامه‌ریزی‌شده وجود ندارد: نمی‌توانید از پارامتر
signalبرای بستن برنامه‌ریزی‌شده کادر گفتگوی ورود به سیستم فوری استفاده کنید.