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

WebOTP API को अब iframes में ओटीपी मिल सकते हैं.

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

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

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

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

WebOTP API, अपने-आप में काफ़ी आसान है:

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

एसएमएस मैसेज को एक बार वाले ऑरिजिन के हिसाब से फ़ॉर्मैट किया जाना चाहिए कोड.

Your OTP is: 123456.

@web-otp.glitch.me #12345

ध्यान दें कि आखिरी पंक्ति में इसमें वह मूल शामिल है जिसके साथ मूल होना चाहिए @ के बाद ओटीपी और उससे पहले #.

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

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

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

क्रॉस-ऑरिजिन iframe में मौजूद किसी फ़ॉर्म में ओटीपी डालना, पेमेंट के तरीके में आम तौर पर इस्तेमाल होता है . क्रेडिट कार्ड जारी करने वाले कुछ बैंक/कंपनियों को पुष्टि करने के एक और चरण की ज़रूरत होती है, ताकि पैसे चुकाने वाले की प्रामाणिकता की जांच करें. इसे 3D सिक्योर कहते हैं और फ़ॉर्म आम तौर पर उसी पेज पर 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-क्रेडेंशियल के ज़रिए एपीआई की अनुमतियों की नीति व्यवहार. आम तौर पर इस लक्ष्य को हासिल करने के दो तरीके हैं:

  • एचटीटीपी हेडर के ज़रिए:
Permissions-Policy: otp-credentials=(self "https://bank.example")
  • iframe allow एट्रिब्यूट के ज़रिए:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

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

चेतावनियां

नेस्ट करने के लेवल

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

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

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

ध्यान दें कि मांग में कमी की वजह से, नीचे दिया गया उदाहरण भी काम नहीं करता और UX से जुड़ी दिक्कतों को दूर करना.

  • a.com -> b.com -> a.com (calls WebOTP API)

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

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

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

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

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

संसाधन

Unस्प्लैश पर rupixen.com की फ़ोटो