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

एसएमएस से मिले ओटीपी के ज़रिए उपयोगकर्ताओं की मदद करना

Eiji Kitamura

WebOTP API क्या है?

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

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

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

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

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

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

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

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

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

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

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

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

Your OTP is: 123456.  @chrome.dev #123456 

क्या आपको एसएमएस मिला और इनपुट एरिया में कोड डालने का प्रॉम्प्ट दिखा? 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" } 

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

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

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

Your OTP is: 123456.  @www.example.com #123456 

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

डेमो

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

सोर्स कोड यहां देखा जा सकता है: https://github.com/GoogleChromeLabs/web-identity-demos/tree/main/web-otp-demo.

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

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

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

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

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

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

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

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

Your verification code is 123456  @shop.example #123456 @bank.exmple 

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

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

एचटीटीपी हेडर के ज़रिए:

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 लागू करना होगा. उन्हें इसे उसी तरह लागू करना होगा जिस तरह वे इसे अपनी मोबाइल वेबसाइट पर लागू करते हैं. हालांकि, इसके लिए किसी खास तरीके की ज़रूरत नहीं है.

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

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

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

एपीआई की जांच करते समय, कुछ बातों का ध्यान रखना ज़रूरी है:

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

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

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

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

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

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

मैं Chrome में लागू किए गए बदलावों में मौजूद गड़बड़ियों की शिकायत कहां करूं?

क्या आपको Chrome के साथ काम करने वाले किसी एक्सटेंशन में कोई गड़बड़ी मिली?

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

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

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

संसाधन

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