زيادة بنسبة% 100 في عمليات تسجيل مفاتيح المرور باستخدام WebOTP في Amedia

Henning Haaland Kulander

Yu Tsuno

تاريخ النشر: 30 يونيو 2026

Amedia هي أكبر ناشر لوسائل الإعلام التحريرية المحلية في النرويج، وتدير أكثر من 100 عنوان صحيفة وتصل إلى أكثر من مليوني قارئ يوميًا. لتقديم تجربة موحّدة وسلسة، تستخدم Amedia حلّ aID، وهو حلّ داخلي لتحديد الهوية الرقمية. لا يتيح نظام الحسابات الموحّدة المستند إلى المعايير للمستخدمين الوصول إلى شبكة Amedia بأكملها فحسب، بل اعتمدته أيضًا صحف نرويجية ودنماركية أخرى.

التحدي: تقديم مفاتيح المرور إلى قاعدة مستخدمين متنوعة

بالنسبة إلى Amedia، تشكّل عملية تسجيل الدخول المدخل إلى محتواها. فكل ثانية من التعطّل تؤثر بشكل مباشر في عدد القرّاء. في حين أنّ كلمات المرور العادية والمصادقة الثنائية المستندة إلى الرسائل القصيرة معروفة بأنّها غير مريحة للمستخدمين أثناء التنقّل، أدّى الانتقال مباشرةً إلى مفاتيح المرور إلى ظهور عائق غير متوقّع، وهو عدم الإلمام بها.

وبما أنّ معرّف aID غالبًا ما يكون أول تجربة للمستخدم مع مفتاح المرور، فقد أدّى فرض تغيير مفاجئ على طلب مصادقة بيومترية غير مألوف إلى بعض التردد. أدركت شركة Amedia أنّه لا يمكنها مجرد نشر التكنولوجيا، بل عليها مساعدة المستخدمين في فهم كيفية استخدام مفاتيح المرور.

الحلّ: مسار مدمج بين WebOTP ومفتاح المرور

بدلاً من إجبار المستخدمين على الاختيار بين عادة قديمة (الرسائل القصيرة) ومفهوم جديد تمامًا (مفاتيح المرور)، جمعت Amedia بينهما في تجربة إعداد سلسة واحدة. استخدموا WebOTP API لتبسيط عملية تأكيد الهوية المألوفة عبر الرسائل القصيرة، مع إعداد البنية الأساسية لتسجيل الدخول بدون كلمة مرور في الخلفية.

1. تسجيل الاشتراك بسلاسة على جميع المنصات

عندما يشترك مستخدم في aID، يُدخل اسمه ورقم هاتفه وبريده الإلكتروني. بعد ذلك، ترسل Amedia كلمة مرور صالحة لمرة واحدة (OTP) باستخدام الرسائل القصيرة. تعتمد Amedia تحديدًا على كلمة المرور لمرة واحدة عبر الرسائل القصيرة بدلاً من البريد الإلكتروني، لأنّ امتلاك أكثر من رقم هاتف واحد أمر نادر في الدول الإسكندنافية، ويتم نقل الأرقام بسلاسة عند التبديل بين موفّري الخدمات الجوّالة. وتجعل هذه الثبات أرقام الهواتف معرّفًا أساسيًا موثوقًا به لتسجيل الدخول ونقطة بيانات ثابتة لإنشاء ملفات شخصية موسّعة للمستخدمين. بدلاً من إجبار المستخدم على مغادرة المتصفّح وفتح تطبيق الرسائل وحفظ الرمز وكتابته، تستخدم Amedia WebOTP API. في المتصفّحات المتوافقة على الأجهزة الجوّالة، يؤدي ذلك إلى ظهور طلب في ورقة أسفل الشاشة يتيح للمستخدم النقر على إثبات الهوية. يسترد المتصفّح تلقائيًا كلمة المرور لمرة واحدة من الرسالة النصية القصيرة ويرسل النموذج.

بالإضافة إلى ذلك، عدّلت Amedia طريقة إرسال الرسائل القصيرة لتستخدم تنسيق الرسائل الموحّد المرتبط بالمصدر (على سبيل المثال، @www.aid.no #123456)، ما أتاح عمليات تسجيل دخول سلسة في جميع أنحاء النظام المتكامل الأوسع نطاقًا. لا يتيح هذا المعيار استخدام واجهة برمجة التطبيقات WebOTP على متصفّحات مثل Chrome وOpera وVivaldi على أجهزة Android وأجهزة الكمبيوتر فحسب، بل يفعّل أيضًا ميزة autocomplete="one-time-code" في Safari بسلاسة. نتيجةً لذلك، يحصل المستخدمون على جميع المنصات، سواء على الأجهزة الجوّالة أو أجهزة الكمبيوتر، على تدفّق آمن وتلقائي لكلمة المرور صالحة لمرة واحدة (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);
    });
  });
}

2. تسجيل مفتاح المرور على الفور

في السابق، بعد أن يكمل المستخدم عملية تأكيد WebOTP، كانت Amedia تتيح له خيارًا من اثنين: إنشاء كلمة مرور عادية أو إعداد مفتاح مرور. وكما هو متوقّع، عندما واجه معظم المستخدمين مصطلحًا فنيًا غير مألوف، اتّبعوا أسهل طريقة، وهي إما تخطّي الخطوة بالكامل أو استخدام كلمة مرور عادية.

في منتصف شباط (فبراير)، غيّر فريق Amedia أسلوبه. وقد أدرجوا طلب تسجيل مفتاح المرور مباشرةً في مسار ما بعد إثبات الملكية، قبل أن يعرضوا على المستخدمين أي خيارات. للامتثال لمتطلبات الإجراء التفاعلي من المستخدم الصارمة في المتصفّحات، مثل Chrome وSafari، ربطت Amedia التفاعل بسلاسة. بما أنّ المستخدم يؤكّد كلمة المرور صالحة لمرة واحدة (OTP) أولاً، فإنّ هذه النقرة الأولية تعمل كإجراء تفاعلي من المستخدم المطلوب لتفعيل طلب 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);
  }
}

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

في زيارة المستخدم التالية إلى إحدى منشورات 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 ومفاتيح المرور إلى تحسينات واضحة في التشغيل والتجربة:

• عمليات تسجيل أسرع بكثير: انخفض الوقت الإجمالي المطلوب لإنشاء حساب جديد على aID بشكل كبير بسبب إدخال WebOTP تلقائيًا وإزالة عملية إنشاء كلمة المرور يدويًا بالكامل.
• ‫48% من المستخدمين الجدد ينشئون مفاتيح مرور: من خلال الطلب من المستخدمين إنشاء مفتاح مرور مباشرةً بعد إثبات ملكية رقم الهاتف باستخدام WebOTP، حقّقت Amedia معدّل إحالات ناجحة مرتفعًا للغاية في ما يتعلّق بتسجيل مفتاح المرور، ما يمثّل زيادة بنسبة% 100 مقارنةً بمسار الإعداد السابق المستند إلى الاختيار.
• تسجيل دخول أسرع بنسبة% 82: يمكن للمستخدمين المكرري الزيارة المصادقة أسرع بأكثر من خمس مرات باستخدام مفاتيح المرور مقارنةً بالطرق البديلة، مثل كلمات المرور أو إدخال كلمة المرور صالحة لمرة واحدة يدويًا.

في النهاية، ومع استمرار مواجهة المنظومة المتكاملة الرقمية الأوسع نطاقًا لتحديات بشأن مصطلحات مفاتيح المرور وتثقيف المستخدمين، يقدّم نهج Amedia الاستباقي مخططًا ناجحًا. إنّ دمج مفاتيح المرور في خدمة عالية التكرار يستخدمها الملايين يوميًا يضع معيارًا جديدًا للوصول السلس في مجال الإعلام، ما يوفّر تحسينًا دائمًا للأمان بدون التأثير في معدل الاحتفاظ بالمستخدمين.