🙋🏿 👐🏿 ➡️ वेब संसाधनों के साथ एक QML अनुप्रयोग को एकीकृत करना 🕗 🐚 👨‍🏫

नमस्कार प्रिय बाज! मैं यह बताना चाहता हूं कि वेब संसाधनों के साथ नई-नई भाषा QML में कार्यक्रम को कैसे एकीकृत किया जाए।

अपने आप में, क्यूएमएल एक घोषणात्मक जावास्क्रिप्ट जैसी प्रोग्रामिंग भाषा है जो क्यूटी ढांचे का हिस्सा है। क्यूटी डेवलपर्स गंभीर हैं और इंटरफेस बनाने के लिए इसे मुख्य उपकरण के रूप में बढ़ावा देते हैं। इसके अलावा, वेब सर्वर के साथ काम करने की क्षमता सहित, C ++ का सहारा लिए बिना बहुत सी चीजें की जा सकती हैं।

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

उस क्यूटी 5.1 को देखते हुए, जिसका अल्फा संस्करण पिछले सप्ताह जारी किया गया था, जिसमें एंड्रॉइड और आईओएस के लिए प्रारंभिक समर्थन शामिल है, यह विषय उन लोगों के लिए विशेष रूप से दिलचस्प हो सकता है जो क्यूटी को देख रहे हैं या सक्रिय रूप से इसमें महारत हासिल कर रहे हैं। इस लेख में मैं आपको बताऊंगा कि कैसे आप वीके एपीआई उदाहरण का उपयोग करके एक क्यूएमएल एप्लिकेशन से वेब संसाधनों के साथ काम को व्यवस्थित कर सकते हैं।

बस के मामले में, मैं ध्यान दें कि मैं क्यूटी 5.0.2 के नवीनतम स्थिर संस्करण पर विचार कर रहा हूं। पहले के संस्करणों में, कुछ विशेषताएं नहीं हो सकती हैं।

XMLHttpRequest क्या है और इसकी आवश्यकता क्यों है

निश्चित रूप से, कई पाठकों ने तकनीक के बारे में सुना है जैसे कि AJAX (अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल)। यह आपको सर्वर पर अतुल्यकालिक अनुरोध भेजने और पृष्ठ को पुन: लोड किए बिना सामग्री को अपडेट करने की अनुमति देता है। आधुनिक ब्राउज़रों के पास इसके लिए विभिन्न उपकरण हैं, XMLHttpRequest उनमें से एक है। चूंकि QML एक जावास्क्रिप्ट-जैसी भाषा है और इसमें जावास्क्रिप्ट वातावरण ब्राउज़र के समान है, XMLHttpRequest भी मौजूद है। बाद में पाठ में मैं संक्षिप्त रूप में इसका नाम भी लिखूंगा - XHR।

दरअसल, यह क्या है और यह हमें क्या देता है? यह एसिंक्रोनस के लिए एक उपकरण है (तुल्यकालिक ब्राउज़रों को ब्राउज़रों में भी समर्थित है) HTTP अनुरोध। अपने नाम के बावजूद, यह आपको XML प्रारूप में न केवल डेटा स्थानांतरित करने की अनुमति देता है, हालांकि यह मूल रूप से इस उद्देश्य के लिए था। QML इंजन में कार्यान्वयन निम्नलिखित HTTP अनुरोधों का समर्थन करता है: GET, POST, HEAD, PUT और DELETE। असल में, हम पहले दो का उपयोग करेंगे।

क्यूएमएल में एक्सएचआर के कार्यान्वयन की एक विशिष्ट विशेषता यह है कि अनुरोध किसी भी होस्ट को भेजे जा सकते हैं, ब्राउज़र में इस तरह के प्रतिबंध नहीं हैं।

XMLHttpRequest प्रक्रिया

XHR के साथ काम करने की प्रक्रिया इस प्रकार है।

1. एक एक्सएचआर ऑब्जेक्ट बनाएं:

var request = new XMLHttpRequest()

2. हम ऑब्जेक्ट को प्रारंभिक करते हैं, अनुरोध के प्रकार (उर्फ एचटीटीपी विधि), पते और, यदि आवश्यक हो, तो पैरामीटर [1] का अनुरोध करते हैं, जिसे सर्वर पर प्रेषित किया जाना चाहिए:

 request.open('GET', 'http://site.com?param1=value1&param2=value2')

पहला पैरामीटर अनुरोध का प्रकार है, दूसरा URL है। एक GET अनुरोध के लिए, मापदंडों को यहां पास किया जाना चाहिए, उन्हें प्रतीक के साथ पते से अलग करते हुए '?'। पैरामीटर 'और' वर्ण द्वारा अलग किए गए हैं।

पोस्ट अनुरोध के लिए, आपको सामग्री का प्रकार निर्दिष्ट करना होगा। यदि हम क्वेरी पैरामीटर द्वारा डेटा पास करते हैं, तो यह निम्नानुसार किया जाता है:

 request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

3. अनुरोध स्थिति को बदलने के लिए हैंडलर सेट करें। ज्यादातर मामलों में, हमें अनुरोध पूरा होने तक इंतजार करना होगा और फिर परिणाम या त्रुटियों को संसाधित करना होगा। अनुरोध के अंत में, रेडीस्टेट पैरामीटर XMLHttpRequest.DONE के बराबर होगा (मूल्यों पर अधिक जानकारी के लिए, [2] देखें)।

 request.onreadystatechange = function () { if (request.readyState === XMLHttpRequest.DONE) { if (request.status === 200) { console.log(request.responseText) } else { console.log("HTTP request failed", request.status) } } }

हमारा अनाम कार्य हर परिवर्तन पर तैयार को कॉल करेगा। हम अनुरोध को पूरा करने में रुचि रखते हैं, जिसके बाद हम जांचते हैं कि क्या यह सफलतापूर्वक पूरा हुआ था। ऐसा करने के लिए, हम सफलता कोड (200) के साथ स्थिति कोड की जांच करते हैं। HTTP एक पाठ प्रोटोकॉल है और कोडों के संख्यात्मक मूल्यों के अलावा, एक पाठ विवरण भी प्रेषित होता है, इसलिए आप इस स्थिति के अनुरूप स्ट्रिंग के साथ statusText संपत्ति की तुलना कर सकते हैं, इस मामले में, यह स्ट्रिंग "ओके" है:

 if (request.statusText === 'OK')

एक त्रुटि के मामले में, स्थिति और स्टेटसटैक्स में HTTP स्टेटस कोड (उदाहरण के लिए, 404 और "नॉट फाउंड", क्रमशः) का कोड और टेक्स्ट विवरण होगा।

4. एक अनुरोध भेजें।

 request.send()

POST के मामले में, यहां आपको अनुरोध पैरामीटर पारित करने की आवश्यकता है:

 request.send('param1=value1&param2=value2')

क्वेरी मापदंडों में सभी वर्णों को प्रेषित नहीं किया जा सकता है। इसलिए, पैरामीटर और मान दोनों को एन्कोड किया जाना चाहिए और, यदि आवश्यक हो, तो विशेष फ़ंक्शन के अनुसार डीकोड किया गया है - एन्कोडर्कोम्पोनेंट () और डिकोड्यूरिकोम्पोनेंट ()। उपयोग उदाहरण:

 request.send('%1=%2'.arg(encodeURIComponent(param)).arg(encodeURIComponent(value)))

यह एन्कोडेड स्ट्रिंग को आगे की प्रक्रिया के लिए अनुशंसित किया गया है और "+ 20" अक्षर के साथ अनुक्रम "% 20" (यानी, एन्कोडेड स्पेस) को बदल दिया गया है। क्रमशः डिकोडिंग से पहले, विपरीत करें।

आमतौर पर, क्वेरी पैरामीटर सरल प्रकारों के मूल्यों को पास करते हैं। आप एक सरणी भी पास कर सकते हैं, लेकिन सिंटैक्स कुछ मैला है। उदाहरण के लिए, दो मानों के बराबर का एक सरणी भेजना इस तरह दिखेगा:

 request.send('params[]=value1&params[]=value2')

यदि आप इसे नरक से बाहर निकालते हैं, तो आप ऑब्जेक्ट (!) को मूल्यों के रूप में भी स्थानांतरित कर सकते हैं, लेकिन यह पूरी तरह से विश्वसनीय नहीं हो सकता है, इस अर्थ में कि प्राप्त करने पर यह एक सरणी में बदल सकता है :)

POST अनुरोधों का उपयोग करते हुए, हम डेटा को न केवल अनुरोध पैरामीटर, बल्कि अनुरोध निकाय में भी स्थानांतरित कर सकते हैं। उदाहरण के लिए, आप JSON प्रारूप में डेटा भेज सकते हैं। ऐसा करने के लिए, सही सामग्री-प्रकार और सामग्री आकार (सामग्री-लंबाई) सेट करें। ऐसा अनुरोध भेजने का एक उदाहरण:

 request.setRequestHeader('Content-Type', 'application/json') var params = { param1: value1, param2: value2 } var data = JSON.stringify(params) request.setRequestHeader('Content-Length', data.length) request.send(data)

यहाँ JSON QML में उपलब्ध एक वैश्विक वस्तु है जो इस प्रारूप [3] के साथ काम करने के लिए उपकरण प्रदान करता है।

वास्तव में, जिस प्रारूप में हम डेटा स्थानांतरित कर सकते हैं वह सर्वर द्वारा निर्धारित किया जाता है। यदि यह JSON को स्वीकार करता है - ठीक है, JSON हेलमेट। उम्मीद है कि डेटा अनुरोध पैरामीटर द्वारा आएगा - इसलिए इसे भेजा जाना चाहिए।

अब जब हमने आवश्यक सैद्धांतिक जानकारी का अध्ययन कर लिया है, तो हम VKontakte के साथ अभ्यास और काम करना शुरू कर देंगे।

मित्रों की सूची प्राप्त करना और प्रदर्शित करना

शुरू करने के लिए, उन तरीकों के साथ एक सरल उदाहरण पर विचार करें जिन्हें प्राधिकरण और अन्य अनावश्यक इशारों की आवश्यकता नहीं है। एक मित्र सूची प्राप्त करना इस श्रेणी में आता है। हम एक साधारण प्रोग्राम लिखेंगे जो स्टार्टअप पर दोस्तों की सूची प्राप्त करने के लिए XHR भेजता है और इसे प्राप्त करने के बाद उपयोगकर्ता के नाम और उनके अवतार प्रदर्शित करता है।

अधिकांश कोड डिस्प्ले इंटरफ़ेस है और इसका विशेष रूप से वर्णन करने का कोई मतलब नहीं है। मैं केवल यह नोट करता हूं कि यदि एक जावास्क्रिप्ट ऑब्जेक्ट या एरे को मॉडल के रूप में उपयोग किया जाता है, तो मॉडल डेटा प्राप्त करने के लिए मॉडल के बजाय मॉडलडैट का उपयोग किया जाता है।

यहां सबसे दिलचस्प हिस्सा सर्वर के साथ काम कर रहा है। वीके एपीआई का उपयोग करने के लिए, एक विशेष पता है: api.vk.com/method । हम प्राप्त पते के लिए विधि का नाम जोड़ते हैं (विधियों की एक सूची [4] में पाई जा सकती है), हमारे मामले में यह मित्र है। विधि। इस पते पर आपको आवश्यक मापदंडों के साथ एक POST या GET अनुरोध भेजने की आवश्यकता है। उत्तर JSON प्रारूप में आएगा। हमें यूजर आईडी को यूआईडी पैरामीटर में पास करना होगा। फ़ील्ड पैरामीटर में भी हम फ़ोटो प्राप्त करने के लिए एक और photo_medium पास करेंगे और ताकि यह सबसे छोटा आकार न हो।

नीचे कार्यक्रम का वास्तविक स्रोत कोड है। उपयोगकर्ता आईडी मुख्य रूप से उपयोगकर्ता आईडी है।

 import QtQuick 2.0 Rectangle { id: main property int userId: XXX property var friends width: 320 height: 640 color: 'skyblue' function getFriends() { var request = new XMLHttpRequest() request.open('POST', 'https://api.vk.com/method/friends.get') request.onreadystatechange = function() { if (request.readyState === XMLHttpRequest.DONE) { if (request.status && request.status === 200) { console.log("response", request.responseText) var result = JSON.parse(request.responseText) main.friends = result.response } else { console.log("HTTP:", request.status, request.statusText) } } } request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') request.send('fields=photo_medium&uid=%1'.arg(main.userId)) } ListView { id: view anchors.margins: 10 anchors.fill: parent model: friends spacing: 10 delegate: Rectangle { width: view.width height: 100 anchors.horizontalCenter: parent.horizontalCenter color: 'white' border { color: 'lightgray' width: 2 } radius: 10 Row { anchors.margins: 10 anchors.fill: parent spacing: 10 Image { id: image height: parent.height fillMode: Image.PreserveAspectFit source: modelData['photo_medium'] } Text { width: parent.width - image.width - parent.spacing anchors.verticalCenter: parent.verticalCenter elide: Text.ElideRight renderType: Text.NativeRendering text: "%1 %2".arg(modelData['first_name']).arg(modelData['last_name']) } } } } Component.onCompleted: { getFriends() } }

मैंने उत्तर में क्या आएगा के कंसोल पर एक निष्कर्ष दिया, यह सुविधाजनक है अगर इस उदाहरण के साथ खेलने की इच्छा है।

प्रोग्राम चलाना, यदि एक मान्य आईडी निर्दिष्ट किया गया था, तो हमें निम्नलिखित चित्र के बारे में मिलता है:

यहां सबसे बड़ी कठिनाई XHR के साथ काम करने में ठीक है। आइए इसे जानने की कोशिश करें और कोड को थोड़ा सरल करें।

XMLHttpRequest के साथ काम का सरलीकरण

एक्सएचआर के साथ काम करने के लिए दो चुनौतियां हैं।

1. अनुरोध पैरामीटर द्वारा डेटा संचारित करते समय, इस अनुरोध को संकलित करने की आवश्यकता होती है। यदि ये पैरामीटर बदल सकते हैं, तो सबसे अधिक संभावना है कि कोड में कई ऑपरेशन होंगे जो टुकड़ों से अनुरोध पैरामीटर को गोंद करते हैं। इसके अलावा, हमें यह नहीं भूलना चाहिए कि संकलन करते समय एन्कोडर्कोम्पोनेंट का उपयोग करके कुंजियों और मूल्यों को एनकोड करना अच्छा होगा, जैसा कि मैंने ऊपर लिखा था। कुल मिलाकर, इन मापदंडों को बनाने वाला कोड बोझिल हो सकता है और बहुत स्पष्ट नहीं है। किसी ऑब्जेक्ट का उपयोग करना अधिक सुविधाजनक होगा जिसमें संबंधित फ़ील्ड को पैरामीटर के रूप में सेट किया गया है।

मैंने एक छोटी सी जावास्क्रिप्ट लाइब्रेरी लिखी, जो एक ऑब्जेक्ट को क्वेरी पैरामीटर में परिवर्तित करती है, जो कि सब कुछ एनकोड करती है, सामान्य तौर पर, एक तैयार स्ट्रिंग पैदा करती है जिसे तुरंत भेजा जा सकता है। एक फ़ंक्शन भी है जो क्वेरी मापदंडों को डिकोड करता है और उनसे एक ऑब्जेक्ट बनाता है (लेकिन यह केवल सरल प्रकारों का समर्थन करता है, मापदंडों में एक सरणी या ऑब्जेक्ट पार्स नहीं करता है, हालांकि, इसकी आवश्यकता होने की संभावना नहीं है)। आप इसे यहाँ ले जा सकते हैं: github.com/krnekit/qml-utils/blob/master/qml/URLQuery.js ।

2. अनुरोध के प्रकार के आधार पर, डेटा को अलग-अलग तरीकों से भेजा जाना चाहिए, और अतिरिक्त हेडर सेट करना भी आवश्यक हो सकता है। मैंने एक पुस्तकालय लिखा है जो एकल इंटरफ़ेस प्रदान करके XHR को भेजना आसान बनाता है। यह किसी भी प्रारूप में डेटा भेज सकता है, इसके लिए आप सामग्री प्रकार को एक पैरामीटर के रूप में पारित कर सकते हैं, डिफ़ॉल्ट रूप से इसे अभी भी एक ही "एप्लिकेशन / x-www-form-urlencoded" माना जाता है, लेकिन याद रखें कि GET अनुरोध का उपयोग करके किसी भिन्न प्रकार के डेटा को प्रेषित नहीं किया जा सकता है इस स्थिति में, आपको POST का उपयोग करना होगा। सामग्री-लंबाई भी स्वचालित रूप से गणना और सेट की जाएगी। यह अनुरोध प्रकार, URL, कॉलबैक फ़ंक्शन (वैकल्पिक) को स्वीकार करता है, जिसे अनुरोध पूरा होने पर कॉल किया जाएगा, और डेटा प्रकार (वैकल्पिक)। फ़ंक्शन त्रुटि के मामले में अनुरोध ऑब्जेक्ट को स्वयं या शून्य देता है। आप इसे यहाँ ले जा सकते हैं: github.com/krnekit/qml-utils/blob/master/qml/XHR.js

दो पुस्तकालय डेटा का उपयोग करते हुए, मैंने पिछले उदाहरण को सरल किया। मैंने यहां सभी कोड नहीं दिए हैं, हम केवल उस पर विचार करेंगे जो बदल गया है।
फ़ाइल की शुरुआत में, हम पुस्तकालयों को शामिल करते हैं (इस उदाहरण में, लाइब्रेरी फ़ाइलें उसी निर्देशिका में हैं जैसे qml फ़ाइल):

 import 'URLQuery.js' as URLQuery import 'XHR.js' as XHR

हम पुस्तकालयों को आयात करते हैं और उनके लिए नाम स्थान निर्धारित करते हैं जिसके माध्यम से हम पुस्तकालयों से कार्यों का उपयोग करेंगे।

XHR भेजने वाला फ़ंक्शन अब इस तरह दिखता है:

 function getFriends() { var params = { fields: 'photo_medium', uid: main.userId } function callback(request) { if (request.status && request.status === 200) { console.log("response", request.responseText) var result = JSON.parse(request.responseText) main.friends = result.response } else { console.log("HTTP:", request.status, request.statusText) } } XHR.sendXHR('POST', 'https://api.vk.com/method/friends.get', callback, URLQuery.serializeParams(params)) }

सबसे पहले, हम क्वेरी पैरामीटर के साथ एक ऑब्जेक्ट को परिभाषित करते हैं। फिर कॉलबैक फ़ंक्शन, जिसे अनुरोध पूरा होने पर कहा जाता है। फ़ंक्शन पैरामीटर के रूप में स्वयं अनुरोध प्राप्त करता है। और फिर हम स्वयं को अनुरोध भेजते हैं, ऑब्जेक्ट को सीरीज़परामेस फ़ंक्शन का उपयोग करके मापदंडों के साथ परिवर्तित करते हैं।
नतीजतन, कोड का आकार, कोई कह सकता है, बदल नहीं गया है, लेकिन यह बहुत अधिक संरचित और समझ में आ गया है।

मैं भविष्य में इन कार्यों का उपयोग कोड को सरल बनाने के लिए करूंगा। यदि वे किसी के लिए उपयोगी हैं, तो आप एमआईटी लाइसेंस ले सकते हैं और उसका उपयोग कर सकते हैं।

क्यूएमएल से प्राधिकरण वी.के.

सभी तरीके प्राधिकरण के बिना काम नहीं करते हैं, इसलिए सबसे अधिक संभावना है कि हमें लॉग इन करना होगा। नतीजतन, हमें तथाकथित मिलना चाहिए प्राधिकरण टोकन, जिसे हम VKontakte के अनुरोधों में स्थानांतरित करेंगे। ताकि हम लॉग इन कर सकें, आपको VKontakte पर एक एप्लिकेशन बनाने की आवश्यकता है। आप इसे यहां कर सकते हैं: vk.com/editapp?act=create स्टैंडअलोन एप्लिकेशन के प्रकार का चयन करें। फिर हम एक अनुरोध पैरामीटर के साथ इसकी आईडी को स्थानांतरित करेंगे।

1. प्राधिकरण के तरीके

चूंकि हम एक स्टैंडअलोन एप्लिकेशन बना रहे हैं, अर्थात् प्राधिकरण के दो तरीके, दोनों की अपनी समस्याएं हैं, इसलिए आपको कम से कम बुराई चुनने की आवश्यकता है :)

1. प्रत्यक्ष प्राधिकरण। एक HTTP अनुरोध एक विशिष्ट पते पर लॉगिन जानकारी के साथ भेजा जाता है। प्रतिक्रिया JSON प्रारूप में डेटा होगी जिसमें एक टोकन या त्रुटि विवरण होगा।

फायदे:

सादगी।

नुकसान:

आवेदन के गुप्त कोड को स्थानांतरित करना आवश्यक है (इसे कार्यक्रम में सीवन भी करना पड़ सकता है), तदनुसार इसके रिसाव का खतरा है।
यह विधि केवल विश्वसनीय अनुप्रयोगों के लिए काम करेगी। जब आप एक नया एप्लिकेशन बनाते हैं, तो यह अनुपलब्ध होगा और इसे सक्षम करने के लिए आपको समर्थन लिखना होगा।

2. OAuth प्राधिकरण। इसे निम्नानुसार कार्यान्वित किया जाता है। ब्राउज़र को उस प्रोग्राम में बनाया जाना चाहिए जिसमें उपयोगकर्ता को एक विशेष लॉगिन पृष्ठ दिखाया गया हो। प्राधिकरण के बाद, किसी अन्य पृष्ठ पर पुनर्निर्देशित होगा और वर्तमान URL में एक टोकन या त्रुटि विवरण होगा। VKontakte इस विधि को मुख्य के रूप में रखता है।

फायदे:

मुख्य और बहुत महत्वपूर्ण लाभ यह है कि यह सभी अनुप्रयोगों के लिए काम करता है और उन अनुप्रयोगों के लिए जिन्हें प्रत्यक्ष प्राधिकरण की अनुमति नहीं है, यह आमतौर पर एकमात्र तरीका है।
गुप्त कुंजी को पारित करने की आवश्यकता नहीं है।
OAuth एक मानक है और आप उदाहरण के लिए फेसबुक पर भी लॉग इन कर सकते हैं।

हालांकि, नुकसान भी महत्वपूर्ण हैं।

आपको वीके पृष्ठ खोलने की आवश्यकता है, जिसका अर्थ है कि या तो इसे प्रोग्राम विंडो में एम्बेड करने का प्रयास करें या इसे एक अलग विंडो में खोलें।
चूंकि हम पेज खोलते हैं, हमें एक ब्राउज़र की भी आवश्यकता होती है। तदनुसार, आपको QtWebkit और उसके साथ खींचने वाली हर चीज को खींचना होगा, जो कार्यक्रम को वजन पर डाल देगा।
आपको अंतर्निहित ब्राउज़र के URL को बदलने, इस URL को पार्स करने और उसमें से मापदंडों का चयन करने की घटनाओं को रोकना होगा, जो कि XHR से कुछ अधिक जटिल है।

2. प्रत्यक्ष प्राधिकरण

बेशक, मैंने अनुरोध किया कि वे प्रत्यक्ष प्राधिकरण को सक्षम करें, लेकिन VKontakte समर्थन ने पहले इत्मीनान से मुझसे पूछा कि मुझे क्या चाहिए और फिर पूरी तरह से उपयोग पर बंद हो गया :( तो, चलो एक सैद्धांतिक दृष्टिकोण लेते हैं। यह कुछ इस तरह दिखाई देगा:

 function login() { var params = { grant_type: 'password', client_id: 123456, client_secret: 'XXX', username: 'XXX', password: 'XXX', scope: 'audio' } function callback(request) { if (request.status && request.status === 200) { console.log("response", request.responseText) var result = JSON.parse(request.responseText) if (result.error) { console.log("Error:", result.error, result.error_description) } else { main.authToken = result.auth_token // Now do requests with this token } } else { console.log("HTTP:", request.status, request.statusText) } } XHR.sendXHR('POST', 'https://oauth.vk.com/token', callback, URLQuery.serializeParams(params)) }

शुरुआत में, हम पैरामीटर बनाते हैं, उनमें मैंने उदाहरण के लिए संकेत दिया है कि उपयोगकर्ता के ऑडियो रिकॉर्ड तक पहुंच की आवश्यकता है (गुंजाइश पैरामीटर)। तब कॉलबैक फ़ंक्शन, जो त्रुटि के मामले में कंसोल को लिखता है, और यदि सफल होता है, तो टोकन बचाता है और एपीआई अनुरोधों पर जा सकता है।

बस, मैं प्रलेखन के लिए एक लिंक छोड़ दूंगा : vk.com/dev/auth_direct ।

3. OAuth के माध्यम से प्राधिकरण।

इस प्रकार के प्राधिकरण के लिए, हमें उपयोगकर्ता को लॉगिन वेब पेज दिखाना होगा। QtQuick में एक WebView घटक होता है जो आपको एक WebKit इंजन को QML एप्लिकेशन में एम्बेड करने की अनुमति देता है। उपयोगकर्ता के लॉग इन करने के बाद, ब्राउज़र में URL बदल जाएगा और सफल प्राधिकरण के मामले में, अनुरोध मापदंडों में एक टोकन या एंकर में त्रुटि का विवरण होगा [5] ।

इस URL को पार्स न करने के लिए, हम URLQuery से parseParams फ़ंक्शन का उपयोग करते हैं। आप पूरे URL को एक बार में पास कर सकते हैं, आउटपुट में हमें मापदंडों के साथ एक ऑब्जेक्ट मिलता है।

इस कार्यक्षमता को लागू करने वाला घटक नीचे वर्णित है।

LoginWindow.qml:

 import QtQuick 2.0 import QtQuick.Window 2.0 import QtWebKit 3.0 import "URLQuery.js" as URLQuery Window { id: loginWindow property string applicationId property string permissions property var finishRegExp: /^https:\/\/oauth.vk.com\/blank.html/ signal succeeded(string token) signal failed(string error) function login() { var params = { client_id: applicationId, display: 'popup', response_type: 'token', redirect_uri: 'http://oauth.vk.com/blank.html' } if (permissions) { params['scope'] = permissions } webView.url = "https://oauth.vk.com/authorize?%1".arg(URLQuery.serializeParams(params)) } width: 1024 height: 768 WebView { id: webView anchors.fill: parent onLoadingChanged: { console.log(loadRequest.url.toString()) if (loadRequest.status === WebView.LoadFailedStatus) { loginWindow.failed("Loading error:", loadRequest.errorDomain, loadRequest.errorCode, loadRequest.errorString) return } else if (loadRequest.status === WebView.LoadStartedStatus) { return } if (!finishRegExp.test(loadRequest.url.toString())) { return } var result = URLQuery.parseParams(loadRequest.url.toString()) if (!result) { loginWindow.failed("Wrong responce from server", loadRequest.url.toString()) return } if (result.error) { loginWindow.failed("Error", result.error, result.error_description) return } if (!result.access_token) { loginWindow.failed("Access token absent", loadRequest.url.toString()) return } succeeded(result.access_token) return } } }

हम इस घटक को एक अलग विंडो में प्रदर्शित करते हैं। लॉगिन () विधि को कॉल करने के बाद, लॉगिन पेज लोड हो जाएगा।

प्राधिकरण के बाद, आपको एक URL पर पुनः निर्देशित किया जाएगा जिसमें oauth.vk.com/blank.html पते के रूप में इस्तेमाल किया जाएगा, और फिर 'के माध्यम से?' या '#' परिणाम जाएगा। अनुमतियों के पैरामीटर के साथ हम अपनी आवश्यकता के उपयोग के अधिकार सेट करते हैं। यदि हम वहां कुछ इंगित करते हैं, तो हमारे विजेट में लॉग इन करते समय, उपयोगकर्ता को एप्लिकेशन तक पहुंच अधिकार प्रदान करने के लिए एक संवाद दिखाई देगा।

यह समझने के लिए कि जब हम सही पते पर पहुंचे, तो हमने onLadingChanged हैंडलर सेट किया। यह एक loadRequest ऑब्जेक्ट लेता है, जिसमें से हमें वह सभी जानकारी मिलती है जिसकी हमें आवश्यकता होती है। इसे कई बार कहा जाता है और हम उस स्थिति में रुचि रखते हैं जब कोई त्रुटि हुई हो, जिस स्थिति में हम उचित संकेत भेजते हैं, या जब वांछित पृष्ठ लोड होता है। इस मामले में, हम जांचते हैं कि क्या एक टोकन हमारे पास आया है और यदि हां, तो सफल प्राधिकरण के बारे में संकेत भेजें, अन्यथा त्रुटि संकेत।

ठीक है, अब इस विजेट का उपयोग करने वाले कार्यक्रम पर विचार करें। सफल प्राधिकरण के मामले में, कार्यक्रम "परीक्षण" के लिए उपयोगकर्ता की स्थिति निर्धारित करता है। उपयोगकर्ता आईडी मुख्य में userId संपत्ति द्वारा निर्धारित की जाती है।

 import QtQuick 2.0 import 'URLQuery.js' as URLQuery import 'XHR.js' as XHR Rectangle { id: main property int userId: XXX property var authToken width: 640 height: 320 function processLoginSuccess(token) { loginWindow.visible = false authToken = token setStatus() } function setStatus() { var params = { access_token: main.authToken, text: 'test' } function callback(request) { if (request.status == 200) { console.log('result', request.responseText) var result = JSON.parse(request.responseText) if (result.error) { console.log('Error:', result.error.error_code,result.error.error_msg) } else { console.log('Success') } } else { console.log('HTTP:', request.status, request.statusText) } Qt.quit() } XHR.sendXHR('POST', 'https://api.vk.com/method/status.set', callback, URLQuery.serializeParams(params)) } LoginWindow { id: loginWindow applicationId: XXX permissions: 'status' visible: false onSucceeded: processLoginSuccess(token) onFailed: { console.log('Login failed', error) Qt.quit() } } Component.onCompleted: { loginWindow.visible = true loginWindow.login() } }

लोड करने के बाद, हम लॉगिन विंडो देखेंगे। लॉगिन के बाद, यह छिपा हुआ है और उपयोगकर्ता की स्थिति को बदलने के लिए सर्वर को एक अनुरोध भेजा जाता है। उसके बाद, प्रोग्राम कंसोल को परिणाम लिखता है और समाप्त होता है।

हमारे द्वारा लॉग इन करने के बाद, हमें अब एक टोकन का अनुरोध करने की आवश्यकता नहीं है, अगर हमें कुछ अतिरिक्त एक्सेस अधिकारों की आवश्यकता नहीं है या इसका जीवनकाल समाप्त नहीं हुआ (हम सफल प्राधिकरण के मामले में, टोकन के साथ वापस आ जाएंगे)।

और क्या आप के लिए XMLHttpRequest का उपयोग कर सकते हैं

मैं आपको VKontakte से संबंधित नहीं, बल्कि XHR से संबंधित, अपने अनुभव से एक छोटी कहानी बताऊंगा।

किसी तरह मेरे सहयोगी का QML में XML डेटा प्राप्त करने और संसाधित करने का कार्य था।

QtQuick में एक विशेष प्रकार का XmlListModel है जो मॉडल के रूप में XML फ़ाइल को खींच, पार्स और रेंडर कर सकता है। उसे टाइप एक्सपीथ की एक क्वेरी सेट करने की आवश्यकता है, जिसके अनुसार मॉडल भरा जाएगा। समस्या यह थी कि XML फ़ाइल में न केवल उन तत्वों को शामिल किया गया था जिन्हें मॉडल में चयनित और रखा जाना चाहिए, बल्कि कुछ अतिरिक्त जानकारी भी प्राप्त करने की आवश्यकता थी।

कई समाधान विधियाँ हैं। आप दो XmlListModel ऑब्जेक्ट का उपयोग कर सकते हैं, लेकिन यह एक अस्पष्ट बैसाखी है, इसके अलावा, मैं नहीं चाहता था कि XML फ़ाइल को दो बार डाउनलोड किया जाए (और इसे चेक किया जाएगा)। आप Qt का उपयोग करके इस कार्यक्षमता को लागू कर सकते हैं, जिसमें कई पार्सर विकल्प हैं, लेकिन शुद्ध QML में समस्या को हल करने की इच्छा थी।

चूंकि XMLHttpRequest को मूल रूप से XML के साथ काम करने का इरादा था, इसलिए इसमें XML के साथ काम करने के लिए उपकरण हैं। तदनुसार, आप XML को उसके टूल के साथ प्राप्त कर सकते हैं और आवश्यक जानकारी का चयन कर सकते हैं। फिर आप उसी XML को XmlListModel में स्थानांतरित कर सकते हैं (वहां आप न केवल URI, बल्कि XML फ़ाइल की सामग्री भी पास कर सकते हैं)।

तो, इस तथ्य के बावजूद कि अब XMLHttpRequest का उपयोग किसी भी चीज़ के लिए किया जाता है, आपको यह नहीं भूलना चाहिए कि यह क्यों बनाया गया था और यह कि XML के साथ काम करने के लिए उपकरण भी हैं।

एक छोटा सारांश

QML में ब्राउज़र में जावास्क्रिप्ट के लिए कई उपकरण उपलब्ध हैं। XMLHttpRequest आपको HTTP अनुरोध भेजने और इस तरह वेब संसाधनों के साथ QML अनुप्रयोगों के एकीकरण को सुनिश्चित करने की अनुमति देता है। XHR का उपयोग करना कई मामलों में सर्वर के साथ डेटा का आदान-प्रदान करने के लिए C ++ का उपयोग किए बिना करने की अनुमति देता है और जिससे विकास सरल हो जाता है।

वेब संसाधनों के साथ एक QML अनुप्रयोग को एकीकृत करना