الملء التلقائي لرمز OTP: صيغ أندرويد وiOS والويب

Your Example code is 123456.

@example.com #123456

كيف يعمل الملء التلقائي لرمز OTP في الويب؟

أضف السمة أولًا، ثم كود JavaScript للمتصفحات التي تدعمه.

<input type="text" inputmode="numeric"
       autocomplete="one-time-code" name="otp" />

توصي وثائق Chrome بالسمة لتحقيق التوافق بين المتصفحات، وتقول إن Safari يستخدمها لاقتراح الرمز من رسالة منسقة بشكل صحيح رغم أنه يفتقر إلى واجهة WebOTP في JavaScript.

وفي Chrome على أندرويد استدعِ WebOTP بوسيلة النقل sms. تحتاج الواجهة إلى أصل آمن (HTTPS)، ويتيح AbortController إلغاء الطلب المعلّق إذا كتب المستخدم الرمز بيده.

if ("OTPCredential" in window) {
  const ac = new AbortController();
  const form = document.querySelector("form");
  const input = document.querySelector("input[autocomplete=one-time-code]");

  form.addEventListener("submit", () => ac.abort());

  navigator.credentials
    .get({ otp: { transport: ["sms"] }, signal: ac.signal })
    .then((otp) => {
      input.value = otp.code;
      form.submit();
    })
    .catch(() => {}); // user dismissed, or no matching SMS
}

يجب أن تتبع الرسالة الصيغة المرتبطة بالأصل في مواصفة WICG ودليل Chrome: رمز من أربعة إلى عشرة أحرف أبجدية رقمية فيه رقم واحد على الأقل قبل السطر الأخير، ثم سطر أخير يبدأ بـ @ ثم المضيف ثم مسافة واحدة ثم # والرمز. ويجب ألا يحتوي المضيف على أي مسافة.

هل تعمل رسالة واحدة على أندرويد وiOS والويب؟

غالبًا نعم، لأن القواعد متوافقة. ضع النص المقروء أولًا، وهاش أندرويد في سطر فوق النهاية، والسطر المرتبط بالنطاق أخيرًا. هذا التنسيق مبني على القواعد الموثّقة وليس ضمانًا من أي جهة، فاختبره.

Your Example code is 483921. Do not share it.
Ab3dE+9xYz1
@example.com #483921

سبب هذا الترتيب: تريد Apple ومواصفة الويب النطاق والرمز في السطر الأخير. وتشترط Google وجود الهاش المكوّن من 11 حرفًا في مكان ما من الرسالة، لكنها في الصفحة التي راجعناها لا تحدد موضعه. المثال أعلاه 78 بايت بأحرف لاتينية عادية، أي ضمن حد الـ 140 بايت بمسافة مريحة.

قائمة تحقق قبل الإطلاق:

1. الرمز وحدة واحدة، ومفصول بوضوح عن أي أرقام أخرى في النص.
2. النطاق في السطر الأخير يطابق الموقع والنطاق المرتبط بالتطبيق.
3. الطول الكلي ضمن 140 بايت في صيغة Retriever.
4. الهاش يطابق مفتاح توقيع الإصدار قيد الاختبار.
5. الاختبار على جهاز من كل منصة، وعبر المشغّلين الذين ترسل عبرهم فعلًا.

ماذا عن النص العربي وUnicode؟

أبقِ الرمز والجزأين المقروءين آليًا بسيطين. حد Google بالبايتات، والرسالة بترميز Unicode تتسع لأحرف أقل بكثير من GSM-7: 70 مقابل 160 في الجزء الواحد (راجع حدود أحرف الرسائل النصية وUnicode). لذلك تستهلك الجملة العربية الميزانية بسرعة، وحرف واحد خارج GSM-7 يحوّل الرسالة كلها إلى Unicode.

النهج الآمن: اترك الرمز بأرقام لاتينية، واترك @domain #code بحروف ASCII، واجعل الصياغة العربية قصيرة. لم نجد وثائق رسمية تصف الملء التلقائي لرموز مكتوبة بأنظمة أرقام أخرى، فلا نتناول ذلك ونوصي بالاختبار قبل الاستخدام.

كيف تتعامل قوالب المصادقة في واتساب مع الملء التلقائي؟

تأتي قوالب المصادقة من Meta بثلاثة أنماط من الأزرار، لكل منها نص أساسي ثابت بصيغة <code> is your verification code.

وتذكر وثائق Meta أيضًا أنه في iOS 26 وما بعده توفر اقتراحات لوحة المفاتيح الملء التلقائي دون أي تكامل، وأن المستخدمين على المنصات التي لا تدعم الخيار بلا لمس يتلقون زر نسخ الرمز. يمكنك ضبط مدة الصلاحية بـ code_expiration_minutes، وتقبل واجهة المعاينة قيمًا من 1 إلى 90 دقيقة. قارن القناتين في OTP واتساب مقابل OTP عبر SMS.

مثال تطبيقي: تسجيل الدخول إلى تطبيق لطلب السيارات

يملك "Qafila Rides" (مثال افتراضي) تطبيق أندرويد وتطبيق iOS وموقعًا للجوال على qafila.example.

1. يشغّل تطبيق أندرويد SMS Retriever عندما يلمس المستخدم "إرسال الرمز".
2. ينشئ الخادم رمزًا من ستة أرقام صالحًا لبضع دقائق، ويرسل الرسالة ذات الأسطر الثلاثة أعلاه عبر SMS API.
3. يسلّم أندرويد الرسالة إلى التطبيق. ويعرض iOS الرمز فوق لوحة المفاتيح. وفي موقع الجوال يقترحه Safari ويملؤه Chrome عبر WebOTP.
4. يتحقق الخادم من الرمز مرة واحدة، ويرفض إعادة استخدامه والرموز المنتهية، ويحدّ من معدل الطلبات.
5. إذا لم يتأكد وصول الرسالة النصية خلال مهلة قصيرة، يعرض الخادم قالب مصادقة في واتساب مسارًا ثانيًا.

ما الأخطاء الشائعة؟

• رمز غير منفرد. أرقام إضافية (هاتف أو سعر أو تاريخ) بجانب الرمز تربك الاكتشاف. استخدم رمزًا واحدًا لكل رسالة.
• هاش خاطئ. يتبع الهاش شهادة التوقيع. وهاش من مفتاح تطوير لن يطابق إصدار الإنتاج.
• عدم تطابق النطاق. يجب أن يطابق @example.com الموقع أو النطاق المرتبط، وإلا لن يعرض iOS وWebOTP الرمز.
• سطر أخير مكسور. أي شيء بعد #code، أو مسافة ناقصة، أو فراغ داخل النطاق يكسر الصيغة.
• رسالة طويلة جدًا أو كثيرة Unicode، فتتجاوز حد 140 بايت في Retriever.
• الاستماع المتأخر. تتجاهل User Consent API الرسائل التي وصلت قبل بدئها.
• اعتبار الملء التلقائي أمانًا. هو وسيلة راحة. تحقق من الرمز في الخادم، وأنهِ صلاحية الرموز، وحدّ المحاولات، وراقب احتيال SMS pumping.
• النطاق. يغطي هذا الدليل السلوك الموثّق وقت الكتابة. قواعد المنصات تتغير، فراجع المصادر المرفقة قبل الإطلاق.

لصياغة الرسالة واختيار مدة الصلاحية راجع دليل رسائل OTP والمصادقة.

كيف تساعدك OmniChannels.ai

ترسل OmniChannels.ai رموز OTP عبر SMS وواتساب بالاتصال المباشر بالمشغّلين لدى BroadNet، فتتحكم في نص الرسالة الدقيق الذي تعتمد عليه صيغة الملء التلقائي. وتغطي قوالب واتساب المصادقة بنسخ الرمز وبلمسة واحدة وبلا لمس. ويُضبط التحويل بين القنوات، مثل واتساب ثم SMS، لكل حالة استخدام، وتصل حالات التسليم بصيغة webhook واحدة. راجع وثائق SMS API ووثائق WhatsApp API وحل OTP.