تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إثبات ملكية أرقام الهواتف على الويب باستخدام WebOTP API

مساعدة المستخدمين بشأن كلمات المرور لمرة واحدة (OTP) المُستلَمة عبر الرسائل القصيرة SMS

Eiji Kitamura

ما هي واجهة برمجة التطبيقات WebOTP API؟

يمتلك معظم الأشخاص حول العالم أجهزة جوّالة ويملك المطوّرون أرقام الهواتف التي يشيع استخدامها كمعرف لمستخدمي خدماتهم.

هناك طرق مختلفة للتحقق من أرقام الهواتف، ولكن يتم إنشاؤها عشوائيًا تُعد كلمات المرور التي تُستخدم مرة واحدة (OTP) والتي يتم إرسالها عن طريق الرسائل القصيرة SMS من أكثرها شيوعًا. جارٍ إرسال هذا الرمز توضح الرجوع إلى خادم المطور التحكم في رقم الهاتف.

وقد تم نشر هذه الفكرة بالفعل في العديد من السيناريوهات لتحقيق:

رقم الهاتف كمعرّف للمستخدم: عند الاشتراك في حساب تطلب بعض مواقع الويب رقم هاتف بدلاً من عنوان البريد الإلكتروني استخدامه كمعرّف حساب.
التحقّق بخطوتين: عند تسجيل الدخول، يطلب الموقع الإلكتروني إدخال رمز يُستخدم لمرة واحدة. يتم إرسالها عبر الرسائل القصيرة (SMS) بالإضافة إلى كلمة المرور أو على أي عامل معرفة آخر للحصول على الأمان.
تأكيد الدفعة: عندما يُجري المستخدم عملية دفع، ويطلب يمكن أن يساعد الرمز الذي يُستخدم لمرة واحدة والذي يتم إرساله عبر رسالة SMS في التحقق من نية الشخص.

وتسبّب العملية الحالية مشاكل للمستخدمين. العثور على كلمة المرور لمرة واحدة في رسالة SMS فإن نسخها ولصقها في النموذج مرهق، مما يقلل ومعدلات التحويل في تجارب المستخدمين الهامة. لطالما كان التخفيف من أثر هذا التحدي للويب من العديد من أكبر المطوّرين العالميين. يحتوي Android على واجهة برمجة تطبيقات تؤدي هذه المهمة بالضبط. وكذلك الحال بالنسبة إلى أجهزة iOS أو متصفّح Safari

تسمح واجهة برمجة التطبيقات WebOTP API لتطبيقك بتلقّي رسائل منسّقة بشكلٍ خاص مرتبطة إلى لنطاق تطبيقك. من هنا، يمكنك الحصول آليًا على كلمة مرور لمرة واحدة من خلال رسالة قصيرة SMS. إرسال رسالة وإثبات ملكية رقم هاتف المستخدم بسهولة أكبر.

أمثلة واقعية

لنفترض أنّ أحد المستخدمين يريد إثبات ملكية رقم هاتفه باستخدام موقع إلكتروني. الموقع الإلكتروني إرسال رسالة نصية إلى المستخدم عبر SMS وإدخال المستخدم كلمة المرور لمرة واحدة من لإثبات ملكية رقم الهاتف.

وباستخدام واجهة برمجة التطبيقات WebOTP API، يمكن للمستخدم تنفيذ هذه الخطوات بسهولة بنقرة واحدة، كما هو موضح في الفيديو. عندما تصل الرسالة النصية، تنبثق بطاقة سفلية وتطلب من المستخدم إثبات ملكية رقم هاتفه. بعد النقر على زر التحقق في الورقة السفلية، يلصق المتصفح كلمة المرور لمرة واحدة في النموذج إرسال النموذج بدون أن يحتاج المستخدم إلى الضغط على متابعة.

تم تخطيط العملية برمتها في الصورة أدناه.

جرِّب العرض التوضيحي بنفسك. لا يطلب رقم هاتفك أو إرسال رسالة قصيرة SMS إلى جهازك، ولكن يمكنك إرسال واحدة من جهاز آخر من خلال نسخ النص المعروض في العرض التوضيحي. هذا يعمل لأنه بغض النظر عن هوية المرسل عند استخدام واجهة برمجة التطبيقات WebOTP API.

انتقِل إلى https://web-otp.glitch.me في الإصدار Chrome 84 أو لاحقًا على جهاز Android.
إرسال الرسالة النصية القصيرة SMS التالية من هاتف آخر إلى هاتفك.

Your OTP is: 123456.

@web-otp.glitch.me #12345

هل تلقّيت رسالة SMS وظهرت لك رسالة تطلب منك إدخال الرمز في منطقة الإدخال؟ هكذا تعمل واجهة برمجة التطبيقات WebOTP API للمستخدمين.

يتكون استخدام واجهة برمجة التطبيقات WebOTP API من ثلاثة أجزاء:

علامة <input> التي تمت إضافة تعليقات توضيحية إليها بشكل صحيح
JavaScript في تطبيق الويب
نص الرسالة المنسَّق المُرسل عبر رسالة قصيرة SMS.

سأغطي العلامة <input> أولاً.

إضافة تعليقات توضيحية إلى علامة `<input>`

يمكن استخدام WebOTP بدون أي تعليق توضيحي بتنسيق HTML التوافق، فأنصحك بشدة بإضافة autocomplete="one-time-code" إلى العلامة <input> حيث تتوقّع أن يُدخل المستخدم كلمة مرور صالحة لمرة واحدة (OTP).

يسمح ذلك للإصدار 14 من Safari أو الإصدارات الأحدث من اقتراح المستخدم لملء <input> تلقائيًا. مع كلمة مرور لمرة واحدة (OTP) عندما يتلقّى المستخدم رسالة قصيرة SMS بالتنسيق الموضح في تنسيق الرسالة القصيرة SMS على الرغم من عدم توافقه مع WebOTP.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

استخدام واجهة برمجة التطبيقات WebOTP API

نظرًا لأن أداة WebOTP بسيطة، فما عليك سوى نسخ الرمز التالي ولصقه وظيفة. سأطلعك على ما يحدث على أي حال.

JavaScript

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 => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

رصد الميزات

يتم رصد الميزات نفسها في العديد من واجهات برمجة التطبيقات الأخرى. جارٍ الاستماع إلى سينتظر حدث DOMContentLoaded حتى يصبح شجرة نموذج العناصر في المستند جاهزًا لطلب البحث.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

معالجة كلمة المرور لمرة واحدة

واجهة برمجة التطبيقات WebOTP API نفسها بسيطة بما يكفي. استخدام navigator.credentials.get() للحصول على كلمة المرور لمرة واحدة. تضيف ميزة WebOTP خيار "otp" جديدًا إلى هذه الطريقة. تحتوي فقط على سمة واحدة: transport، ويجب أن تكون قيمتها مصفوفة تتضمّن السلسلة 'sms'.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

ويؤدي ذلك إلى تفعيل مسار إذن المتصفّح عند وصول رسالة قصيرة. إذا كان الإذن يتم قبول الوعد المرتجع من خلال عنصر OTPCredential.

محتوى عنصر OTPCredential الذي تم الحصول عليه

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

بعد ذلك، أدخِل قيمة كلمة المرور لمرة واحدة في الحقل <input>. إرسال النموذج مباشرةً سيؤدي إلى إلغاء الخطوة التي تتطلب من المستخدم النقر على زر ما.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

إلغاء الرسالة

وفي حال أدخل المستخدم يدويًا كلمة مرور صالحة لمرة واحدة (OTP) وأرسل النموذج، يمكنك إلغاء استدعاء الدالة get() باستخدام مثيل AbortController في عنصر options.

JavaScript

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

تنسيق الرسالة القصيرة

ينبغي أن تبدو واجهة برمجة التطبيقات نفسها بسيطة بالقدر الكافي، ولكن هناك بعض الأشياء التي يجب معرفتها قبل استخدامها. يجب إرسال الرسالة بعد يتم الاتصال برقم navigator.credentials.get() ويجب استلامه على الجهاز حيث تم استدعاء get(). أخيرًا، يجب أن تلتزم الرسالة بما يلي: التنسيق:

تبدأ الرسالة بنص (اختياري) يمكن للإنسان قراءته ويحتوي على أربعة إلى عشرة سلسلة أحرف أبجدية رقمية مع رقم واحد على الأقل يترك السطر الأخير لعنوان URL وكلمة المرور لمرة واحدة
يجب أن يسبق جزء النطاق في عنوان URL للموقع الإلكتروني الذي استدعى واجهة برمجة التطبيقات من قناة "@"
يجب أن يحتوي عنوان URL على علامة الجنيه ('#') متبوعة بكلمة المرور لمرة واحدة.

على سبيل المثال:

Your OTP is: 123456.

@www.example.com #123456

في ما يلي بعض الأمثلة السيئة:

مثال على نص رسالة SMS مكتوب بشكلٍ غير صحيح	سبب عدم نجاح هذا الأمر
`Here is your code for @example.com #123456`	من المتوقع أن يكون `@` هو الحرف الأول من السطر الأخير.
`Your code for @example.com is #123456`	من المتوقع أن يكون `@` هو الحرف الأول من السطر الأخير.
`Your verification code is 123456` `@example.com\t#123456`	من المتوقع وجود مسافة واحدة بين `@host` و`#code`.
`Your verification code is 123456` `@example.com` `#123456`	من المتوقع وجود مسافة واحدة بين `@host` و`#code`.
`Your verification code is 123456` `@ftp://example.com #123456`	لا يمكن تضمين مخطط عنوان URL.
`Your verification code is 123456` `@https://example.com #123456`	لا يمكن تضمين مخطط عنوان URL.
`Your verification code is 123456` `@example.com:8080 #123456`	لا يمكن تضمين المنفذ.
`Your verification code is 123456` `@example.com/foobar #123456`	يتعذّر تضمين المسار.
`Your verification code is 123456` `@example .com #123456`	ما مِن مسافة بيضاء في النطاق.
`Your verification code is 123456` `@domain-forbiden-chars-#%/:<>?@[] #123456`	عدم وجود أحرف محظورة في النطاق.
`@example.com #123456` `Mambo Jumbo`	من المتوقع أن يكون السطر `@host` و`#code` هو السطر الأخير.
`@example.com #123456` `App hash #oudf08lkjsdf834`	من المتوقع أن يكون السطر `@host` و`#code` هو السطر الأخير.
`Your verification code is 123456` `@example.com 123456`	لم يتم توفير `#`.
`Your verification code is 123456` `example.com #123456`	لم يتم توفير `@`.
`Hi mom, did you receive my last text`	لم يتم توفير `@` و`#`.

إصدارات تجريبية

جرِّب استخدام رسائل مختلفة مع العرض التوضيحي: https://web-otp.glitch.me

يمكنك أيضًا تشغيله وإنشاء الإصدار الخاص بك: https://glitch.com/edit/#!/web-otp.

استخدام كلمة المرور لمرة واحدة (OTP) عبر الويب من إطار iframe متعدد المصادر

عادةً ما يتم استخدام إدخال كلمة مرور لمرة واحدة (OTP) عبر الرسائل القصيرة في إطار iframe متعدد المصادر للدفع. التأكيد، خاصة باستخدام 3D Secure. إن وجود التنسيق المشترك لدعم إطارات iframe متعددة المصادر، تتيح واجهة برمجة التطبيقات WebOTP API إرسال كلمات المرور لمرة واحدة (OTP) المرتبطة بالأصول المتداخلة. بالنسبة مثال:

يزور أحد المستخدمين shop.example لشراء زوج من الأحذية باستخدام بطاقة ائتمان.
بعد إدخال رقم بطاقة الائتمان، يعرض مقدم خدمات الدفع المدمج نموذج من bank.example ضمن إطار iframe يطلب من المستخدم إثبات ملكيته أو رقم الهاتف للدفع السريع.
يرسل bank.example إلى المستخدم رسالة قصيرة تحتوي على كلمة المرور لمرة واحدة حتى يتمكن من إدخاله للتحقق من هويته.

لاستخدام واجهة برمجة التطبيقات WebOTP API من داخل إطار iframe متعدد المصادر، عليك اتخاذ إجراءين:

إضافة تعليقات توضيحية إلى كل من أصل الإطار العلوي وأصل إطار iframe في نص الرسالة القصيرة SMS .
يمكنك إعداد سياسة الأذونات للسماح لإطار iframe متعدد المصادر بتلقّي كلمة المرور لمرة واحدة. من المستخدم مباشرةً.

واجهة برمجة التطبيقات WebOTP API ضمن إطار iframe.

يمكنك تجربة العرض التوضيحي على https://web-otp-iframe-demo.stackblitz.io.

إضافة تعليقات توضيحية إلى المصادر المرتبطة بالرسالة النصية القصيرة SMS

عند استدعاء واجهة برمجة التطبيقات WebOTP API من داخل إطار iframe، يجب أن تتضمن الرسالة النصية القصيرة SMS يجب تضمين مصدر الإطار العلوي مسبوقًا بـ @ متبوعًا بكلمة مرور لمرة واحدة مسبوقة بـ # وأصل إطار iframe مسبوقة بـ @ في السطر الأخير.

Your verification code is 123456

@shop.example #123456 @bank.exmple

إعداد سياسة الأذونات

لاستخدام WebOTP في إطار iframe متعدد المصادر، يجب أن تمنح أداة التضمين إذن الوصول إلى هذا الإطار واجهة برمجة التطبيقات من خلال سياسة أذونات بيانات اعتماد otp لتجنُّب الزيارات غير المقصودة السلوك. بشكل عام، هناك طريقتان لتحقيق هذا الهدف:

عبر عنوان HTTP:

Permissions-Policy: otp-credentials=(self "https://bank.example")

عبر سمة allow لإطار iframe:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

يمكنك الاطّلاع على مزيد من الأمثلة حول كيفية تحديد سياسة أذونات .

ملاحظة: في الوقت الحالي، لا يدعم Chrome سوى طلبات البيانات من واجهة برمجة التطبيقات WebOTP API من إطارات iframe من مصادر متعددة. التي ليس لها أكثر من أصل فريد في سلسلة أصلها. في جلسة المعمل، السيناريوهات التالية:

a.com -> b.com
a.com -> b.com -> b.com
a.com -> a.com -> b.com
a.com -> b.com -> c.com

استخدام بروتوكول WebOTP في b.com متاح ولكن استخدامه في c.com غير متاح. يُرجى العلم أنّ السيناريو التالي غير متاح أيضًا بسبب نقص الطلب. وتعقيدات تجربة المستخدم.

a.com -> b.com -> a.com (طلبات واجهة برمجة التطبيقات WebOTP API)

استخدام كلمة المرور لمرة واحدة (OTP) على جهاز كمبيوتر مكتبي

في Chrome، يدعم WebOTP الاستماع إلى الرسائل القصيرة SMS المُستلَمة على الأجهزة الأخرى مساعدة المستخدمين في إتمام عملية إثبات ملكية رقم الهاتف على جهاز كمبيوتر مكتبي.

واجهة برمجة التطبيقات WebOTP API على أجهزة الكمبيوتر المكتبي

وتتطلّب هذه الميزة من المستخدِم تسجيل الدخول إلى حساب Google نفسه على Chrome لأجهزة الكمبيوتر المكتبية وChrome Android.

على كل مطوري البرامج تنفيذ واجهة برمجة التطبيقات WebOTP API على موقع سطح المكتب، بنفس الطريقة التي يستخدمونها على موقع ويب الهاتف المحمول، ولكن لا توجد حيل خاصة مطلوبة.

يمكنك الاطّلاع على مزيد من التفاصيل بالانتقال إلى مقالة إثبات ملكية رقم هاتف على جهاز كمبيوتر مكتبي باستخدام واجهة برمجة التطبيقات WebOTP API.

الأسئلة الشائعة

لا يظهر مربع الحوار على الرغم من إرسال رسالة منسّقة بشكلٍ صحيح. ما هي المشكلة؟

في ما يلي بعض المحاذير عند اختبار واجهة برمجة التطبيقات:

إذا كان رقم هاتف المُرسِل مُدرجًا في قائمة جهات اتصال المُستلِم، لن لن يتم تشغيل واجهة برمجة التطبيقات بسبب تصميم واجهة برمجة التطبيقات للموافقة على رسائل SMS الأساسية.
إذا كنت تستخدم ملفًا شخصيًا للعمل على جهاز Android وكانت كلمة المرور لمرة واحدة (WebOTP) تستخدم لا يعمل، جرّب تثبيت Chrome واستخدامه على ملفك الشخصي بدلاً من ذلك (أي الملف الشخصي نفسه الذي تتلقى فيه الرسائل القصيرة)

راجِع التنسيق لمعرفة ما إذا كان قد تم تنسيق رسالة SMS بشكل صحيح.

هل واجهة برمجة التطبيقات هذه متوافقة بين المتصفحات المختلفة؟

اتّفق Chromium وWebKit على تنسيق الرسائل النصية القصيرة وأعلنت Apple عن إتاحة متصفّح Safari لذلك بدءًا من iOS 14 وmacOS Big Sur. على الرغم من أنّ Safari لا يدعم WebOTP JavaScript API، من خلال إضافة تعليقات توضيحية لعنصر input بـ autocomplete=["one-time-code"]، وهو الإعداد التلقائي تقترح لوحة المفاتيح تلقائيًا إدخال كلمة المرور لمرة واحدة (OTP) في حال توافق رسالة SMS مع التنسيق.

هل من الآمن استخدام الرسائل القصيرة SMS كطريقة للمصادقة؟

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

أين يمكنني الإبلاغ عن أخطاء في تنفيذ Chrome؟

هل واجهت مشكلة في التنفيذ في Chrome؟

الإبلاغ عن خطأ على https://new.crbug.com. قم بتضمين أكبر قدر ممكن من التفاصيل وتعليمات بسيطة لإعادة الإنتاج ضبط المكونات على Blink>WebOTP.

كيف يمكنني المساعدة في هذه الميزة؟

هل تخطّط لاستخدام واجهة برمجة تطبيقات WebOTP API؟ يساعدنا دعمك العام في منح الأولوية وتوضح لموردي المتصفح الآخرين مدى أهمية دعمهم لها. إرسال تغريدة إلى @ChromiumDev باستخدام علامة التصنيف #WebOTP عليك إعلامنا بمكان تطبيقك وطريقة استخدامه

إثبات ملكية أرقام الهواتف على الويب باستخدام WebOTP API

ما هي واجهة برمجة التطبيقات WebOTP API؟

أمثلة واقعية

إضافة تعليقات توضيحية إلى علامة <input>

استخدام واجهة برمجة التطبيقات WebOTP API

رصد الميزات

معالجة كلمة المرور لمرة واحدة

إلغاء الرسالة

تنسيق الرسالة القصيرة

إصدارات تجريبية

استخدام كلمة المرور لمرة واحدة (OTP) عبر الويب من إطار iframe متعدد المصادر

إضافة تعليقات توضيحية إلى المصادر المرتبطة بالرسالة النصية القصيرة SMS

إعداد سياسة الأذونات

استخدام كلمة المرور لمرة واحدة (OTP) على جهاز كمبيوتر مكتبي

الأسئلة الشائعة

لا يظهر مربع الحوار على الرغم من إرسال رسالة منسّقة بشكلٍ صحيح. ما هي المشكلة؟

هل واجهة برمجة التطبيقات هذه متوافقة بين المتصفحات المختلفة؟

هل من الآمن استخدام الرسائل القصيرة SMS كطريقة للمصادقة؟

أين يمكنني الإبلاغ عن أخطاء في تنفيذ Chrome؟

كيف يمكنني المساعدة في هذه الميزة؟

الموارد

إضافة تعليقات توضيحية إلى علامة `<input>`