WebOTP एपीआई की मदद से, क्रॉस-ऑरिजिन iframe में ओटीपी फ़ॉर्म भरें

WebOTP API अब iframe से ओटीपी पा सकता है.

Eiji Kitamura
Yi Gu
एसएमएस से मिलने वाले ओटीपी (एक बार इस्तेमाल होने वाले पासवर्ड) का इस्तेमाल, आम तौर पर फ़ोन नंबर की पुष्टि करने के लिए किया जाता है. उदाहरण के लिए, पुष्टि करने के दूसरे चरण के तौर पर या वेब पर पेमेंट की पुष्टि करने के लिए. हालांकि, ओटीपी को कॉपी-पेस्ट करने या मैन्युअल तरीके से डालने के लिए, ब्राउज़र और एसएमएस ऐप्लिकेशन के बीच स्विच करने से गलतियां होने की संभावना बढ़ जाती है. साथ ही, इससे उपयोगकर्ता अनुभव भी खराब होता है.

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

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

WebOTP API कैसे काम करता है

WebOTP API काफ़ी आसान है:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

एसएमएस को ओरिजिन-बाउंड वन-टाइम कोड के साथ फ़ॉर्मैट किया जाना चाहिए.

Your OTP is: 123456.

@web-otp.example.com #12345

ध्यान दें कि आखिरी लाइन में, बाउंड किए जाने वाले ऑरिजिन से पहले @ और ओटीपी से पहले # मौजूद है.

मैसेज मिलने पर, जानकारी वाला एक बार पॉप-अप होता है. इसमें उपयोगकर्ता को अपना फ़ोन नंबर सत्यापित करने के लिए कहा जाता है. जब उपयोगकर्ता Verify बटन पर क्लिक करता है, तो ब्राउज़र अपने-आप ओटीपी को साइट पर भेज देता है और navigator.credentials.get() को रिज़ॉल्व कर देता है. इसके बाद, वेबसाइट ओटीपी को निकाल सकती है और पुष्टि की प्रक्रिया पूरी कर सकती है.

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

क्रॉस-ऑरिजिन iframe के इस्तेमाल के उदाहरण

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

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

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

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

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

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

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

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

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

@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>

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

चेतावनियां

नेस्टिंग लेवल

फ़िलहाल, Chrome सिर्फ़ उन क्रॉस-ऑरिजिन iframe से WebOTP API कॉल के साथ काम करता है जिनकी पैरंट चेन में एक से ज़्यादा यूनीक ऑरिजिन नहीं हैं. इन स्थितियों में:

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

b.com में WebOTP का इस्तेमाल किया जा सकता है, लेकिन c.com में नहीं.

ध्यान दें कि मांग की कमी और यूज़र एक्सपीरियंस से जुड़ी जटिलताओं की वजह से, इस स्थिति में भी यह सुविधा काम नहीं करती.

  • a.com -> b.com -> a.com (WebOTP API को कॉल करता है)

इंटरोऑपरेबिलिटी

Chromium के अलावा अन्य ब्राउज़र इंजन, WebOTP API को लागू नहीं करते. हालांकि, Safari अपने input[autocomplete="one-time-code"] की मदद से, उसी एसएमएस फ़ॉर्मैट का इस्तेमाल करता है. Safari में, ओरिजिन से जुड़े वन-टाइम कोड फ़ॉर्मैट वाला एसएमएस मिलते ही, कीबोर्ड इनपुट फ़ील्ड में ओटीपी डालने का सुझाव देता है.

अप्रैल 2021 से, Safari में % का इस्तेमाल करके, यूनीक एसएमएस फ़ॉर्मैट वाले iframe का इस्तेमाल किया जा सकता है. हालांकि, स्पेसिफ़िकेशन पर हुई चर्चा के बाद, @ को इस्तेमाल करने का फ़ैसला लिया गया. हमें उम्मीद है कि एसएमएस के लिए इस्तेमाल किए जाने वाले फ़ॉर्मैट को लागू करने की प्रोसेस एक जैसी होगी.

सुझाव/राय दें या शिकायत करें

WebOTP API को बेहतर बनाने के लिए, आपके सुझाव, शिकायत या राय बहुत ज़रूरी है. इसलिए, इसे आज़माएं और हमें अपनी राय बताएं.

संसाधन