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

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

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"` का इस्तेमाल किया जा रहा है.

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

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
WebOTP API का इस्तेमाल किया जा रहा है.

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 की ओर से अपलोड की गई फ़ोटो.