افزایش ۱۰۰ درصدی ثبت رمز عبور در Amedia با استفاده از WebOTP

هنینگ هالند کولاندر
Henning Haaland Kulander
یو سونو
Yu Tsuno

منتشر شده: ۳۰ ژوئن ۲۰۲۶

لوگوی آمدیا

آمدیا بزرگترین ناشر رسانه‌های تحریریه محلی نروژ است که بیش از ۱۰۰ عنوان روزنامه را مدیریت می‌کند و روزانه به بیش از ۲ میلیون خواننده دسترسی دارد. برای ارائه یک تجربه یکپارچه و یکپارچه، آمدیا از aID ، راهکار هویت دیجیتال داخلی خود، استفاده می‌کند. این سیستم حساب فدرال مبتنی بر استاندارد، نه تنها به کاربران امکان دسترسی به کل شبکه آمدیا را می‌دهد، بلکه توسط سایر روزنامه‌های نروژی و دانمارکی نیز به کار گرفته شده است.

چالش: معرفی رمزهای عبور به پایگاه کاربری متنوع

برای آمدیا، فرآیند ورود به سیستم، دروازه ورود به محتوای آنهاست. هر ثانیه از این اصطکاک مستقیماً بر خوانندگان تأثیر می‌گذارد. در حالی که رمزهای عبور معمولی و احراز هویت دو مرحله‌ای مبتنی بر پیامک (2FA) برای کاربران در حال حرکت به طرز ناخوشایندی دست و پا گیر هستند، پرش مستقیم به کلیدهای عبور، یک مانع غیرمنتظره را ایجاد کرد: ناآشنایی محض .

از آنجا که aID اغلب اولین مواجهه کاربر با کلید عبور است، تغییر ناگهانی یک درخواست بیومتریک ناآشنا باعث تردیدهایی شد. Amedia متوجه شد که نمی‌تواند صرفاً از این فناوری استفاده کند: آنها باید به کاربران کمک کنند تا نحوه استفاده از کلیدهای عبور را درک کنند.

راه حل: ترکیبی از جریان WebOTP و Passkey

به جای اینکه کاربران را مجبور به انتخاب بین یک عادت قدیمی (پیامک) و یک مفهوم کاملاً بیگانه (کلیدهای عبور) کند، Amedia آنها را در یک تجربه یکپارچه و روان برای شروع به کار ترکیب کرد. آنها از WebOTP API برای ساده‌سازی فرآیند تأیید پیامکی آشنا استفاده کردند و در عین حال بی‌سروصدا زیرساخت ورود بدون رمز عبور را در پشت صحنه راه‌اندازی کردند.

۱. ثبت نام بدون دردسر در پلتفرم‌های مختلف

وقتی کاربری برای aID ثبت‌نام می‌کند، نام، شماره تلفن و ایمیل خود را وارد می‌کند. سپس Amedia یک رمز عبور یکبار مصرف (OTP) را با استفاده از پیامک ارسال می‌کند. Amedia به طور خاص به جای ایمیل، به OTP پیامکی متکی است، زیرا داشتن بیش از یک شماره تلفن در اسکاندیناوی نادر است و هنگام تغییر ارائه‌دهنده تلفن همراه، شماره‌ها به طور یکپارچه منتقل می‌شوند. این پایداری، شماره تلفن‌ها را به یک شناسه اصلی قابل اعتماد برای ورود به سیستم و یک نقطه داده ثابت برای ساخت پروفایل‌های کاربری گسترده تبدیل می‌کند. Amedia به جای مجبور کردن کاربر به ترک مرورگر، باز کردن برنامه پیام‌های خود، به خاطر سپردن کد و تایپ آن، از WebOTP API استفاده می‌کند. در مرورگرهای تلفن همراه پشتیبانی شده، این کار یک اعلان برگه پایین را فعال می‌کند که به کاربر اجازه می‌دهد فقط روی تأیید ضربه بزند. مرورگر به طور خودکار OTP را از پیامک بازیابی کرده و فرم را ارسال می‌کند.

جریان تأیید WebOTP

علاوه بر این، Amedia ارسال پیامک خود را به‌روزرسانی کرد تا از قالب پیام استاندارد مبتنی بر مبدا (برای مثال، @www.aid.no #123456 ) استفاده کند و ورود به سیستم بدون مشکل را در سراسر اکوسیستم گسترده‌تر امکان‌پذیر سازد. این استاندارد نه تنها API WebOTP را در مرورگرهایی مانند کروم، اپرا و ویوالدی در اندروید و دسکتاپ تقویت می‌کند، بلکه ویژگی autocomplete="one-time-code" سافاری را نیز به طور یکپارچه فعال می‌کند. در نتیجه، کاربران در پلتفرم‌های موبایل و دسکتاپ، یک جریان OTP امن و خودکار را بدون نیاز به منطق backend خاص پلتفرم تجربه می‌کنند. برای کسب اطلاعات بیشتر ، به بهترین شیوه‌های فرم OTP پیامکی مراجعه کنید.

// Detect feature support using OTPCredential availability
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;

    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', (e) => {
         ac.abort();
      });
    }

    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: ac.signal
    }).then(otp => {
      // Automatically fill the input and submit the form
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error('WebOTP error:', err);
    });
  });
}

۲. ثبت فوری رمز عبور

پیش از این، پس از اینکه کاربر تأیید WebOTP را تکمیل می‌کرد، Amedia به آنها یک انتخاب می‌داد: ایجاد یک رمز عبور معمولی یا تنظیم یک کلید عبور. همانطور که قابل پیش‌بینی بود، اکثر کاربران هنگام مواجهه با یک اصطلاح فنی ناآشنا، مسیر کمترین مقاومت را در پیش می‌گرفتند: یا کاملاً از این مرحله صرف نظر می‌کردند یا به یک رمز عبور استاندارد روی می‌آوردند.

در اواسط فوریه، تیم Amedia رویکرد خود را تغییر داد. آنها بلافاصله پس از تأیید، قبل از اینکه حتی گزینه‌هایی را به آنها ارائه دهند، درخواست ثبت رمز عبور را در جریان پس از تأیید ادغام کردند. برای رعایت الزامات سختگیرانه حرکات کاربر در مرورگرهایی مانند کروم و سافاری، Amedia تعامل را به طور یکپارچه زنجیره‌ای کرد. از آنجا که کاربر ابتدا رمز یکبار مصرف را تأیید می‌کند، این ضربه اولیه به عنوان حرکت کاربر مورد نیاز برای فراخوانی مستقیم درخواست navigator.credentials.create() عمل می‌کند. Amedia با تبدیل کلیدهای عبور به تجربه پیش‌فرض به جای یک تنظیم اختیاری، فوراً نرخ ثبت نام موفق خود را دو برابر کرد.

اگرچه این اقدام فوری بسیار مؤثر واقع شد، تیم تلاش کرد تا با استفاده از « ایجاد شرطی »، مکانیزمی که یک کلید عبور را کاملاً در پس‌زمینه و بدون نیاز به اقدام مستقیم کاربر ایجاد می‌کند، این تجربه را حتی ساده‌تر کند. با این حال، آنها با یک مانع فنی مواجه شدند: ایجاد شرطی نیاز به ورود قبلی با استفاده از یک رمز عبور معتبر ذخیره شده در یک مدیر رمز عبور دارد. از آنجا که جریان WebOTP Amedia کاملاً بدون رمز عبور است، این معیار امنیتی را برآورده نمی‌کند. برای حل این محدودیت، Amedia اکنون ایجاد شرطی را فقط برای جریان‌های ورود دو مرحله‌ای معمولی (رمز عبور و کد OTP) رزرو می‌کند، در حالی که از حرکت زنجیروار کاربر برای ورود بدون رمز عبور استفاده می‌کند.

راهنمای ثبت رمز عبور

برای اطمینان از یک تجربه قابل اعتماد، سیستم از یک جریان ثبت نام استاندارد استفاده می‌کند. این باعث ایجاد یک گفتگوی رابط کاربری مرورگر می‌شود که در آن سیستم به طور ایمن رابط کاربری ثبت رمز عبور مرورگر را درخواست می‌کند. کاربر با استفاده از قفل صفحه نمایش دستگاه خود (بیومتریک یا پین) یک رمز عبور ایجاد می‌کند. با اتصال این رمز عبور درست پس از WebOTP، کاربر بدون نیاز به یافتن رمز عبور، تنظیمات را تکمیل می‌کند.

// Triggered immediately after successful WebOTP verification
async function registerPasskey(creationOptionsFromServer) {
  try {
    const credential = await navigator.credentials.create({
      publicKey: {
        ...creationOptionsFromServer,
        authenticatorSelection: {
          residentKey: "required",
          userVerification: "required"
        }
      }
    });

    // Send the new credential to the server for registration
    await sendCredentialToServer(credential);
  } catch (error) {
    console.error("Passkey registration failed", error);
  }
}

۳. ورودهای بعدی سریع

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

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

// Triggering conditional UI for autofill suggestions
async function authenticateWithPasskey(requestOptionsFromServer) {
  try {
    const credential = await navigator.credentials.get({
      publicKey: requestOptionsFromServer,
      mediation: "conditional" // Enables autofill integration
    });

    // Authenticate the user on the server
    await verifyAssertionWithServer(credential);
  } catch (error) {
    console.error("Passkey authentication failed", error);
  }
}

تأثیر: زنجیره‌سازی برای پذیرش بدون اصطکاک

با نوآوری در روند جذب مشتری، Amedia به طور قابل توجهی مشکلات خوانندگان جدید و قدیمی را کاهش داد. ترکیب WebOTP و کلیدهای عبور، بهبودهای عملیاتی و تجربه کاربری واضحی را به همراه داشت:

  • ثبت نام بسیار سریعتر : به دلیل ورود خودکار WebOTP و حذف کامل ایجاد رمز عبور دستی، زمان کلی مورد نیاز برای ایجاد یک حساب کاربری جدید aID به طور قابل توجهی کاهش یافته است.
  • ۴۸٪ از کاربران جدید رمز عبور ایجاد می‌کنند : با درخواست ایجاد رمز عبور بلافاصله پس از تأیید WebOTP، Amedia به نرخ تبدیل فوق‌العاده بالایی برای ثبت رمز عبور دست یافت که نشان‌دهنده افزایش ۱۰۰ درصدی نسبت به جریان ورود به سیستم قبلی مبتنی بر انتخاب آنها است.
  • ۸۲٪ سرعت ورود سریع‌تر : کاربران دائمی با استفاده از کلیدهای عبور، در مقایسه با روش‌های جایگزین مانند رمز عبور یا ورود دستی OTP، بیش از پنج برابر سریع‌تر احراز هویت می‌شوند.
متریک ارزش
نرخ ایجاد رمز عبور برای کاربران جدید ۴۸٪
ورود سریع‌تر برای کاربران قدیمی ۸۲٪
افزایش پذیرش رمز عبور ۱۰۰٪

در نهایت، در حالی که اکوسیستم دیجیتال گسترده‌تر همچنان با چالش‌های پیرامون اصطلاحات کلید عبور و آموزش کاربر دست و پنجه نرم می‌کند، رویکرد پیشگیرانه‌ی Amedia یک طرح اولیه‌ی موفق ارائه می‌دهد. ادغام کلیدهای عبور در یک سرویس با فرکانس بالا که روزانه میلیون‌ها نفر از آن استفاده می‌کنند، استاندارد جدیدی را برای دسترسی یکپارچه در صنعت رسانه ایجاد می‌کند و بدون به خطر انداختن حفظ کاربر، ارتقاء امنیتی دائمی را ارائه می‌دهد.