एसएमएस से ओटीपी फ़ॉर्म इस्तेमाल करने के सबसे सही तरीके

एसएमएस ओटीपी फ़ॉर्म को ऑप्टिमाइज़ करने और उपयोगकर्ता अनुभव को बेहतर बनाने का तरीका जानें.

Eiji Kitamura

उपयोगकर्ता के फ़ोन नंबर की पुष्टि करने का एक सामान्य तरीका यह है कि उससे एसएमएस से भेजा गया ओटीपी (एक बार इस्तेमाल होने वाला पासवर्ड) मांगा जाए. एसएमएस ओटीपी के इस्तेमाल के कुछ उदाहरण यहां दिए गए हैं:

• दो तरीकों से पुष्टि करने की सुविधा. उपयोगकर्ता नाम और पासवर्ड के अलावा, एसएमएस ओटीपी का इस्तेमाल, इस बात के पुख्ता सबूत के तौर पर किया जा सकता है कि खाते का मालिकाना हक उस व्यक्ति के पास है जिसे एसएमएस ओटीपी मिला है.
• फ़ोन नंबर की पुष्टि करना. कुछ सेवाएं, उपयोगकर्ता के मुख्य आइडेंटिफ़ायर के तौर पर फ़ोन नंबर का इस्तेमाल करती हैं. ऐसी सेवाओं में, उपयोगकर्ता अपनी पहचान की पुष्टि करने के लिए, अपना फ़ोन नंबर और एसएमएस से मिला ओटीपी डाल सकते हैं. कभी-कभी इसे दो तरीकों से पुष्टि करने की सुविधा के लिए, पिन के साथ जोड़ा जाता है.
• खाता वापस पाना. अगर कोई उपयोगकर्ता अपने खाते का ऐक्सेस खो देता है, तो उसे खाता वापस पाने का तरीका पता होना चाहिए. खाता वापस पाने के सामान्य तरीकों में, रजिस्टर किए गए ईमेल पते पर ईमेल भेजना या उनके फ़ोन नंबर पर ओटीपी भेजना शामिल है.
• पेमेंट की पुष्टि पेमेंट सिस्टम में, कुछ बैंक या क्रेडिट कार्ड जारी करने वाली संस्थाएं, सुरक्षा के लिहाज़ से पैसे चुकाने वाले व्यक्ति से अतिरिक्त पुष्टि करने का अनुरोध करती हैं. आम तौर पर, इस काम के लिए एसएमएस ओटीपी का इस्तेमाल किया जाता है.

इस पोस्ट में, ऊपर दिए गए इस्तेमाल के उदाहरणों के लिए, एसएमएस ओटीपी फ़ॉर्म बनाने के सबसे सही तरीकों के बारे में बताया गया है.

चेकलिस्ट

एसएमएस ओटीपी की मदद से उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, यह तरीका अपनाएं:

• <input> एलिमेंट का इस्तेमाल इनके साथ करें:
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• ओटीपी एसएमएस मैसेज की आखिरी लाइन के तौर पर @BOUND_DOMAIN #OTP_CODE का इस्तेमाल करें.
• WebOTP API का इस्तेमाल करें.

<input> एलिमेंट का इस्तेमाल करना

<input> एलिमेंट वाले फ़ॉर्म का इस्तेमाल करना, सबसे सही तरीका है. ऐसा इसलिए, क्योंकि यह सभी ब्राउज़र में काम करता है. भले ही, इस पोस्ट में दिए गए अन्य सुझाव किसी ब्राउज़र में काम न करें, फिर भी उपयोगकर्ता मैन्युअल तरीके से ओटीपी डालकर उसे सबमिट कर सकता है.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

यहां कुछ आइडिया दिए गए हैं, जिनसे यह पक्का किया जा सकता है कि इनपुट फ़ील्ड को ब्राउज़र की सुविधाओं का ज़्यादा से ज़्यादा फ़ायदा मिले.

type="text"

आम तौर पर, ओटीपी पांच या छह अंकों का होता है. इसलिए, इनपुट फ़ील्ड के लिए type="number" का इस्तेमाल करना आसान हो सकता है, क्योंकि इससे मोबाइल कीबोर्ड सिर्फ़ संख्याओं में बदल जाता है. इसका सुझाव नहीं दिया जाता, क्योंकि ब्राउज़र को लगता है कि इनपुट फ़ील्ड में एक से ज़्यादा संख्याओं के बजाय, गिनती की जा सकने वाली संख्या होनी चाहिए. इससे गड़बड़ी हो सकती है. type="number" का इस्तेमाल करने पर, इनपुट फ़ील्ड के बगल में अप और डाउन बटन दिखते हैं. इन बटन को दबाने पर, संख्या बढ़ती या घटती है. साथ ही, पहले से मौजूद शून्य हट सकते हैं.

इसके बजाय, type="text" का इस्तेमाल करें. इससे मोबाइल कीबोर्ड सिर्फ़ संख्याओं में नहीं बदलेगा, लेकिन इससे कोई फ़र्क़ नहीं पड़ता, क्योंकि inputmode="numeric" का इस्तेमाल करने का अगला तरीका, यही काम करता है.

inputmode="numeric"

मोबाइल कीबोर्ड को सिर्फ़ अंकों में बदलने के लिए, inputmode="numeric" का इस्तेमाल करें.

कुछ वेबसाइटें ओटीपी इनपुट फ़ील्ड के लिए type="tel" का इस्तेमाल करती हैं, क्योंकि फ़ोकस होने पर यह मोबाइल कीबोर्ड को सिर्फ़ संख्याओं (* और # को शामिल करके) में बदल देता है. इस हैक का इस्तेमाल पहले तब किया जाता था, जब inputmode="numeric" का इस्तेमाल ज़्यादातर जगहों पर नहीं किया जाता था. Firefox ने inputmode="numeric" के साथ काम करना शुरू कर दिया है. इसलिए, सिमेंटिक तौर पर गलत type="tel" हैक का इस्तेमाल करने की ज़रूरत नहीं है.

autocomplete="one-time-code"

autocomplete एट्रिब्यूट की मदद से, डेवलपर यह तय कर सकते हैं कि ब्राउज़र को ऑटोमैटिक भरने की सुविधा देने के लिए कौनसी अनुमति देनी है. साथ ही, यह एट्रिब्यूट ब्राउज़र को यह भी बताता है कि फ़ील्ड में किस तरह की जानकारी होनी चाहिए.

autocomplete="one-time-code" की मदद से, जब भी किसी उपयोगकर्ता को कोई फ़ॉर्म खुला होने पर मैसेज मिलेगा, तो ऑपरेटिंग सिस्टम, मैसेज में मौजूद ओटीपी को हेरिस्टिक तरीके से पार्स करेगा. साथ ही, कीबोर्ड उपयोगकर्ता को ओटीपी डालने का सुझाव देगा. यह सुविधा सिर्फ़ Safari 12 और उसके बाद के वर्शन पर, iOS, iPadOS, और macOS पर काम करती है. हालांकि, हमारा सुझाव है कि आप इसका इस्तेमाल करें, क्योंकि यह उन प्लैटफ़ॉर्म पर एसएमएस ओटीपी के अनुभव को बेहतर बनाने का आसान तरीका है.

autocomplete="one-time-code" से उपयोगकर्ता अनुभव बेहतर होता है. हालांकि, यह पक्का करके और भी बेहतर अनुभव दिया जा सकता है कि एसएमएस मैसेज, ऑरिजिन-बाउंड मैसेज फ़ॉर्मैट के मुताबिक हो.

एसएमएस के टेक्स्ट को फ़ॉर्मैट करना

एसएमएस के ज़रिए भेजे गए, ओरिजिन से जुड़े एक बार इस्तेमाल होने वाले कोड के लिए तय की गई शर्तों के मुताबिक काम करके, ओटीपी डालने के अनुभव को बेहतर बनाएं.

फ़ॉर्मैट का नियम आसान है: एसएमएस मैसेज को पाने वाले व्यक्ति के डोमेन के साथ खत्म करें. इसके पहले @ और ओटीपी के पहले # लिखें.

उदाहरण के लिए:

Your OTP is 123456

@web-otp.glitch.me #123456

ओटीपी मैसेज के लिए स्टैंडर्ड फ़ॉर्मैट का इस्तेमाल करने से, उनसे कोड निकालना आसान और ज़्यादा भरोसेमंद हो जाता है. वेबसाइटों के साथ ओटीपी कोड जोड़ने से, उपयोगकर्ताओं को नुकसान पहुंचाने वाली साइटों को कोड देने के लिए धोखाधड़ी करना मुश्किल हो जाता है.

इस फ़ॉर्मैट का इस्तेमाल करने से ये फ़ायदे मिलते हैं:

• ओटीपी, डोमेन से जुड़ा होगा. अगर उपयोगकर्ता, मैसेज में बताए गए डोमेन के अलावा किसी दूसरे डोमेन पर है, तो उसे ओटीपी का सुझाव नहीं दिखेगा. इससे, फ़िशिंग हमलों और खाते के हाइजैक होने का जोखिम भी कम हो जाता है.
• ब्राउज़र अब रहस्यमयी और अमान्य हेयुरिस्टिक्स पर निर्भर किए बिना, ओटीपी को भरोसेमंद तरीके से निकाल पाएगा.

जब कोई वेबसाइट autocomplete="one-time-code" का इस्तेमाल करती है, तो iOS 14 या इसके बाद के वर्शन वाला Safari, ऊपर दिए गए नियमों के हिसाब से ओटीपी का सुझाव देगा.

एसएमएस मैसेज के इस फ़ॉर्मैट से, Safari के अलावा अन्य ब्राउज़र को भी फ़ायदा मिलता है. Android पर Chrome, Opera, और Vivaldi भी WebOTP API के साथ, ऑरिजिन-बाउंड वन-टाइम कोड के नियम के साथ काम करते हैं. हालांकि, ये autocomplete="one-time-code" के ज़रिए काम नहीं करते.

WebOTP API का इस्तेमाल करना

WebOTP API, एसएमएस मैसेज में मिले OTP का ऐक्सेस देता है. otp टाइप (OTPCredential) के साथ navigator.credentials.get() को कॉल करने पर, जहां transport में sms शामिल है, तो वेबसाइट उस एसएमएस का इंतज़ार करेगी जो ऑरिजिन-बाउंड वन-टाइम कोड के मुताबिक हो. इस एसएमएस को डिलीवर करने के बाद, उपयोगकर्ता को ऐक्सेस दिया जाएगा. ओटीपी को JavaScript में पास करने के बाद, वेबसाइट उसका इस्तेमाल किसी फ़ॉर्म में कर सकती है या उसे सीधे सर्वर पर पोस्ट कर सकती है.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);

WebOTP API की मदद से, वेब पर फ़ोन नंबर की पुष्टि करना लेख में, WebOTP API का इस्तेमाल करने का तरीका जानें. इसके अलावा, नीचे दिया गया स्निपेट कॉपी करके चिपकाएं. (पक्का करें कि <form> एलिमेंट में action और method एट्रिब्यूट सही तरीके से सेट हों.)

// Feature detection
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    // Cancel the WebOTP API if the form is submitted manually.
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        // Cancel the WebOTP API.
        ac.abort();
      });
    }
    // Invoke the WebOTP API
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      // Automatically submit the form when an OTP is obtained.
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Unsplash पर, Jason Leung की ओर से अपलोड की गई फ़ोटो.