WebOTP API की मदद से, वेब पर फ़ोन नंबर की पुष्टि करना

एसएमएस से मिले ओटीपी से जुड़ी समस्याओं को हल करना

Eiji Kitamura

WebOTP API क्या है?

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

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

इस आइडिया को कई मामलों में पहले से ही लागू किया जा चुका है, ताकि ये काम किए जा सकें:

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

मौजूदा प्रोसेस से उपयोगकर्ताओं को परेशानी होती है. एसएमएस मैसेज में OTP ढूंढना और फिर उसे फ़ॉर्म में कॉपी करके चिपकाना मुश्किल होता है. इससे, उपयोगकर्ता के सफ़र के अहम पड़ावों में कन्वर्ज़न रेट कम हो जाते हैं. दुनिया भर के कई बड़े डेवलपर, वेब पर इस सुविधा को आसान बनाने का अनुरोध करते रहे हैं. Android में एक ऐसा एपीआई है जो ठीक यही काम करता है. iOS और Safari भी ऐसा करते हैं.

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

इसे चलाकर देखें

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

WebOTP API की मदद से, उपयोगकर्ता के लिए ये चरण एक टैप जितना आसान हो जाते हैं. इस बारे में वीडियो में बताया गया है. मैसेज मिलने पर, स्क्रीन पर एक बॉटम शीट पॉप अप होती है और उपयोगकर्ता को अपने फ़ोन नंबर की पुष्टि करने के लिए कहा जाता है. सबसे नीचे मौजूद शीट में, पुष्टि करें बटन पर क्लिक करने के बाद, ब्राउज़र फ़ॉर्म में OTP चिपकाता है. साथ ही, उपयोगकर्ता को जारी रखें बटन दबाने की ज़रूरत नहीं पड़ती और फ़ॉर्म सबमिट हो जाता है.

पूरी प्रोसेस को डायग्राम के तौर पर नीचे दी गई इमेज में दिखाया गया है.

डेमो खुद आज़माएं. यह आपसे आपका फ़ोन नंबर नहीं मांगता या आपके डिवाइस पर एसएमएस नहीं भेजता. हालांकि, आपके पास किसी दूसरे डिवाइस से एसएमएस भेजने का विकल्प होता है. इसके लिए, आपको डेमो में दिखाया गया टेक्स्ट कॉपी करना होगा. ऐसा इसलिए होता है, क्योंकि WebOTP API का इस्तेमाल करते समय यह मायने नहीं रखता कि ओटीपी भेजने वाला कौन है.

1. Android डिवाइस पर, Chrome 84 या उसके बाद के वर्शन में https://web-otp.glitch.me पर जाएं.
2. अपने फ़ोन पर, किसी दूसरे फ़ोन से यह एसएमएस भेजें.

Your OTP is: 123456.

@web-otp.glitch.me #12345

क्या आपको एसएमएस मिला है और आपको इनपुट एरिया में कोड डालने का प्रॉम्प्ट दिख रहा है? WebOTP API, उपयोगकर्ताओं के लिए इसी तरह काम करता है.

WebOTP API का इस्तेमाल करने के तीन चरण होते हैं:

• सही तरीके से एनोटेट किया गया <input> टैग
• आपके वेब ऐप्लिकेशन में JavaScript
• एसएमएस के ज़रिए भेजा गया, फ़ॉर्मैट किया गया मैसेज टेक्स्ट.

सबसे पहले, मैं <input> टैग के बारे में बताऊंगा.

<input> टैग पर एनोटेट करना

WebOTP, एचटीएमएल एनोटेशन के बिना भी काम करता है. हालांकि, अलग-अलग ब्राउज़र के साथ काम करने के लिए, हमारा सुझाव है कि आप <input> टैग में autocomplete="one-time-code" जोड़ें. ऐसा तब करें, जब आपको लगता है कि उपयोगकर्ता ओटीपी डालेगा.

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

एचटीएमएल

<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 इवेंट को सुनने के लिए, DOM ट्री के क्वेरी के लिए तैयार होने का इंतज़ार किया जाएगा.

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"
}

इसके बाद, OTP की वैल्यू को <input> फ़ील्ड में डालें. फ़ॉर्म को सीधे सबमिट करने पर, उपयोगकर्ता को बटन पर टैप करने की ज़रूरत नहीं पड़ेगी.

JavaScript

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

मैसेज भेजने की प्रोसेस को रोकना

अगर उपयोगकर्ता मैन्युअल तरीके से ओटीपी डालता है और फ़ॉर्म सबमिट करता है, तो options ऑब्जेक्ट में AbortController इंस्टेंस का इस्तेमाल करके, get() कॉल को रद्द किया जा सकता है.

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() को कॉल किया गया था. आखिर में, मैसेज इस फ़ॉर्मैट में होना चाहिए:

• मैसेज की शुरुआत, लोगों के पढ़ने लायक टेक्स्ट से होती है. यह टेक्स्ट ज़रूरी नहीं है. इसमें चार से 10 वर्णों की अल्फ़ान्यूमेरिक स्ट्रिंग होती है. इसमें कम से कम एक नंबर होना चाहिए. आखिरी लाइन, यूआरएल और ओटीपी के लिए छोड़ी जाती है.
• एपीआई को ट्रिगर करने वाली वेबसाइट के यूआरएल के डोमेन से पहले, @ होना चाहिए.
• यूआरएल में पाउंड साइन ('#') के बाद ओटीपी होना चाहिए.

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

Your OTP is: 123456.

@www.example.com #123456

यहां गलत उदाहरण दिए गए हैं:

डेमो

डेमो के साथ अलग-अलग मैसेज आज़माएं: https://web-otp.glitch.me

इसे फ़ॉर्क करके, अपना वर्शन भी बनाया जा सकता है: https://glitch.com/edit/#!/web-otp.

क्रॉस-ऑरिजिन iframe से WebOTP का इस्तेमाल करना

आम तौर पर, क्रॉस-ऑरिजिन iframe में एसएमएस ओटीपी डालने का इस्तेमाल, पेमेंट की पुष्टि करने के लिए किया जाता है. खास तौर पर, 3D Secure के साथ. WebOTP API, नेस्ट किए गए ऑरिजिन से जुड़े ओटीपी डिलीवर करता है. इसके लिए, क्रॉस-ऑरिजिन iframes के साथ काम करने वाला सामान्य फ़ॉर्मैट इस्तेमाल किया जाता है. उदाहरण के लिए:

• कोई उपयोगकर्ता क्रेडिट कार्ड से जूते खरीदने के लिए shop.example पर जाता है.
• क्रेडिट कार्ड नंबर डालने के बाद, पेमेंट का तरीका उपलब्ध कराने वाली कंपनी, bank.example से मिले फ़ॉर्म को iframe में दिखाती है. इसमें, उपयोगकर्ता से तुरंत चेकआउट करने के लिए, अपने फ़ोन नंबर की पुष्टि करने के लिए कहा जाता है.
• bank.example, उपयोगकर्ता को एक एसएमएस भेजता है. इसमें एक ओटीपी होता है, ताकि उपयोगकर्ता अपनी पहचान की पुष्टि करने के लिए उसे डाल सके.

क्रॉस-ऑरिजिन iframe में WebOTP API का इस्तेमाल करने के लिए, आपको दो काम करने होंगे:

• एसएमएस टेक्स्ट मैसेज में, टॉप-फ़्रेम ऑरिजिन और iframe ऑरिजिन, दोनों के लिए एनोटेट करें.
• अनुमतियों की नीति कॉन्फ़िगर करें, ताकि क्रॉस-ऑरिजिन iframe को सीधे उपयोगकर्ता से OTP पाया जा सके.

डेमो को https://web-otp-iframe-demo.stackblitz.io पर आज़माया जा सकता है.

एसएमएस टेक्स्ट मैसेज में बाउंड-ऑरिजिन एनोटेट करना

जब किसी iframe से WebOTP API को कॉल किया जाता है, तो एसएमएस टेक्स्ट मैसेज में @ से पहले टॉप-फ़्रेम ऑरिजिन, # से पहले ओटीपी, और आखिरी लाइन में @ से पहले iframe ऑरिजिन शामिल होना चाहिए.

Your verification code is 123456

@shop.example #123456 @bank.exmple

अनुमतियों की नीति कॉन्फ़िगर करना

क्रॉस-ऑरिजिन iframe में WebOTP का इस्तेमाल करने के लिए, एम्बेड करने वाले को otp-credentials अनुमतियों की नीति के ज़रिए इस एपीआई को ऐक्सेस देना होगा. इससे, अनचाहे व्यवहार से बचा जा सकता है. आम तौर पर, इस लक्ष्य को हासिल करने के दो तरीके हैं:

एचटीटीपी हेडर की मदद से:

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

iframe allow एट्रिब्यूट की मदद से:

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

अनुमति की नीति तय करने के तरीके के बारे में ज़्यादा उदाहरण देखें.

डेस्कटॉप पर WebOTP का इस्तेमाल करना

Chrome में, WebOTP की मदद से दूसरे डिवाइसों पर मिले एसएमएस को ऐक्सेस किया जा सकता है. इससे, उपयोगकर्ताओं को डेस्कटॉप पर फ़ोन नंबर की पुष्टि करने में मदद मिलती है.

इस सुविधा के लिए, उपयोगकर्ता को डेस्कटॉप Chrome और Android Chrome, दोनों पर एक ही Google खाते में साइन इन करना होगा.

सभी डेवलपर को अपनी डेस्कटॉप वेबसाइट पर, वेबओटीपी एपीआई को उसी तरह लागू करना होगा जिस तरह वे अपनी मोबाइल वेबसाइट पर करते हैं. इसके लिए, उन्हें कोई खास तरीका अपनाने की ज़रूरत नहीं है.

ज़्यादा जानकारी के लिए, WebOTP API का इस्तेमाल करके, डेस्कटॉप पर फ़ोन नंबर की पुष्टि करना लेख पढ़ें.

अक्सर पूछे जाने वाले सवाल

सही फ़ॉर्मैट में मैसेज भेजने के बावजूद, डायलॉग बॉक्स नहीं दिख रहा है. क्या समस्या है?

एपीआई की जांच करते समय, इन बातों का ध्यान रखें:

• अगर मैसेज भेजने वाले का फ़ोन नंबर, मैसेज पाने वाले की संपर्क सूची में शामिल है, तो एसएमएस उपयोगकर्ता की सहमति वाले एपीआई के डिज़ाइन की वजह से, यह एपीआई ट्रिगर नहीं होगा.
• अगर आपके Android डिवाइस पर वर्क प्रोफ़ाइल का इस्तेमाल किया जा रहा है और वेबओटीपी काम नहीं कर रहा है, तो अपनी निजी प्रोफ़ाइल (जिस प्रोफ़ाइल पर आपको एसएमएस मिलते हैं) पर Chrome इंस्टॉल करके उसका इस्तेमाल करें.

फ़ॉर्मैट पर वापस जाकर देखें कि आपका एसएमएस सही फ़ॉर्मैट में है या नहीं.

क्या यह एपीआई अलग-अलग ब्राउज़र के साथ काम करता है?

Chromium और WebKit, एसएमएस टेक्स्ट मैसेज फ़ॉर्मैट पर सहमत हो गए हैं. साथ ही, Apple ने iOS 14 और macOS Big Sur में, Safari के लिए इसकी सुविधा उपलब्ध कराने का एलान किया है. Safari, WebOTP JavaScript API के साथ काम नहीं करता. हालांकि, input एलिमेंट को autocomplete=["one-time-code"] के साथ एनोटेट करने पर, डिफ़ॉल्ट कीबोर्ड अपने-आप यह सुझाव देता है कि आप ओटीपी डालें. ऐसा तब होता है, जब एसएमएस मैसेज, फ़ॉर्मैट के मुताबिक हो.

क्या पुष्टि करने के तरीके के तौर पर एसएमएस का इस्तेमाल करना सुरक्षित है?

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

Chrome में लागू करने से जुड़ी गड़बड़ियों की शिकायत कहां की जा सकती है?

क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली?

• crbug.com पर जाकर, गड़बड़ी की शिकायत करें. इसमें ज़्यादा से ज़्यादा जानकारी दें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें और कॉम्पोनेंट को Blink>WebOTP पर सेट करें.

मैं इस सुविधा को कैसे बेहतर बना सकता/सकती हूं?

क्या आपको WebOTP API का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता पाने से, हमें सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि उन्हें सहायता देना कितना ज़रूरी है. #WebOTP हैशटैग का इस्तेमाल करके, @ChromiumDev को ट्वीट करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

संसाधन

• एसएमएस ओटीपी फ़ॉर्म को इस्तेमाल करने के सबसे सही तरीके
• WebOTP API का इस्तेमाल करके, डेस्कटॉप पर फ़ोन नंबर की पुष्टि करना
• WebOTP API की मदद से, क्रॉस-ऑरिजिन iframe में ओटीपी फ़ॉर्म भरना
• Yahoo! Yahoo! JAPAN ने बिना पासवर्ड के पुष्टि करने की सुविधा शुरू की. इससे, सहायता टीम से पूछे गए सवालों की संख्या में 25% की कमी आई और साइन इन करने में लगने वाला समय 2.6 गुना कम हो गया