Google Chrome के लिए एक्सटेंशन से VKontakte API के साथ काम करना

इस विषय में, मैं Google क्रोम के लिए एक्सटेंशन से VKontakte API के साथ काम करने के बारे में बात करने की कोशिश करूंगा।

वास्तव में, सबसे कठिन हिस्सा VKontakte API तक पहुंचने के लिए एक टोकन मिल रहा है, लेकिन पहले चीजें पहले। स्पष्टता के लिए, मैं एक न्यूनतम उपयोगी विस्तार का एक उदाहरण दूंगा (ताकि यह कम से कम कुछ उपयोगी हो, लेकिन सामान्य तौर पर इसे जीआईएफ की सुविधाजनक मेजबानी के लिए बनाया गया था)। और इसलिए विस्तार सरल होगा, लेकिन काम करना होगा।


यह विस्तार क्या करता है:

1. यह ब्राउज़र संदर्भ मेनू में पंजीकृत है।
2. उस छवि का URL प्राप्त करता है जिस पर उन्होंने हमारे एक्सटेंशन के मेनू आइटम को क्लिक किया और चुना।
3. OAuth 2.0 प्रोटोकॉल में लॉग इन करता है और VKontakte API (यदि यह पहले से नहीं है) तक पहुंच प्राप्त करता है, और Google क्रोम स्टोरेज में टोकन भी बचाता है।
4. XMLHttpRequest का उपयोग करके ब्राउज़र कैश से ब्लॉब के लिए एक तस्वीर अपलोड करता है।
5. VKontakte एपीआई के लिए कई अनुरोधों को पूरा करता है और दस्तावेज़ अनुभाग (VKontakte वेबसाइट पर) में तस्वीर बचाता है। एक ही समय में अंत में काम का परिणाम दिखा रहा है।

अनुभाग के दस्तावेज क्यों? बहुत सरल, प्रति फ़ाइल 200mb की सीमा और दस्तावेजों के लिए असीमित स्थान, साथ ही उत्कृष्ट डाउनलोड गति।

मेरा मानना ​​है कि आपके पास पहले से ही Google क्रोम एक्सटेंशन का बुनियादी ज्ञान है, अन्यथा आपको प्रलेखन पढ़ना चाहिए - वहां सब कुछ बहुत सरल है। और यहां हब पर पर्याप्त पद थे, यहां तक ​​कि सबसे शुरुआती के लिए भी। इसके अलावा, देखें कि VKontakte के लिए आवेदन कैसे पंजीकृत करें , वहां भी सब कुछ बहुत सरल है। आपको अभी भी इसे पढ़ना है, इसलिए देरी न करें। आप जल्दी से इस लिंक पर VKontakte के लिए एक आवेदन पंजीकृत कर सकते हैं।

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

आइए हमारे विस्तार के घटकों के एक संक्षिप्त विवरण के साथ शुरू करें:

मैनिफ़ेस्ट .json - मेनिफ़ेस्ट, मुख्य एक्सटेंशन फ़ाइल। सभी विकल्पों और अभिगम अधिकारों के साथ हमारे विस्तार का विवरण।
background.js मुख्य स्क्रिप्ट है जो एक तस्वीर पर एक क्लिक के बारे में सूचनाएं दर्ज करता है और प्राप्त करता है, और VKontakte API तक पहुंचने के लिए एक टोकन भी प्राप्त करता है।
अपलोड। html - एक स्टब पृष्ठ दिखा रहा है कि एक्सटेंशन कुछ के साथ व्यस्त है ( अपलोड करते समय एक एनिमेटेड जीआईएफ प्रदर्शित होता है)।
upload.js - एक स्क्रिप्ट जो सीधे VKontakte सर्वर पर चित्र अपलोड करती है।
Wait.gif - वास्तव में GIF - प्रगति बार।
imageinfo-128.png - एप्लिकेशन आइकन बड़ा है।
imageinfo-16.png - एप्लिकेशन आइकन छोटा है।
imageinfo-48.png - एप्लिकेशन आइकन औसत दर्जे का है।

अब महत्वपूर्ण बातों के बारे में अधिक विस्तार से:
विस्तार प्रकट में, हमारे काम के लिए आवश्यक घटक इंगित किए गए हैं:

"permissions": [ "contextMenus", "tabs", "storage" , "http://*/*", "https://*/*" ] 

हम ब्राउज़र संदर्भ मेनू, टैब, ब्राउज़र स्टोरेज तक पहुंच प्राप्त करते हैं और एक्सटेंशन सभी खुले पृष्ठों पर सक्रिय होगा।

इसके अलावा, हमारी मुख्य लिपि में, जिसका वर्णन इस प्रकार है:

  "background": { "scripts": [ "background.js" ]} 

ब्राउज़र प्रसंग मेनू में हमारी सनक जोड़ें:

 chrome.contextMenus.create( { "title": "Rehost on vk.com", "type": "normal", "contexts": ["image"], "onclick": getClickHandler() }); 

तदनुसार, संदर्भ मेनू में हमारे आइटम पर क्लिक करके, getClickHandler () फ़ंक्शन को बुलाया जाएगा। इसके अलावा, getClickHandler () में दिलचस्प पहले से ही शुरू होता है। सबसे पहले, Google क्रोम स्टोरेज में VKontakte API एक्सेस करने के लिए टोकन चेक करें, अचानक हमें पहले से ही मिल गया।

 chrome.storage.local.get({'vkaccess_token': {}}, function(items) { ... 

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

और इसलिए, हमने जाँच की और पता चला कि स्टोर में कोई टोकन नहीं है। आपको OAuth 2.0 प्रोटोकॉल का उपयोग करके VKontakte API एक्सेस करने के लिए लॉग इन करने और टोकन प्राप्त करने की आवश्यकता है। ऐसा करने के लिए, हम VKontakte सर्वर पर एक विशेष पते के साथ एक टैब खोलेंगे और इसे पास करेंगे:

oauth.vk.com/authorize?client_id=3315996&scope=docs,offline&redirect_uri=http%3A%2F%2Foauth.vk.com%2Fblank.html&display=page&response_type=token

1. client_id = 3315996 आपके एप्लिकेशन की आईडी है जो VKontakte आपको देगा। इस पते पर अपना आवेदन पंजीकृत करें। आवेदन को पंजीकृत करने और अपनी आईडी प्राप्त करने के लिए, बस नाम लिखें और स्टैंडअलोन एप्लिकेशन का चयन करें। अपने अनुप्रयोगों के लिए मेरी आईडी का उपयोग न करें, इससे कुछ भी अच्छा नहीं होगा। प्रत्येक आवेदन के लिए, एक client_id पंजीकृत होना चाहिए।

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

3. रीडायरेक्ट_यूरी = चूंकि हमारे पास एक अलग एप्लिकेशन है और हमारे पास कोई सर्वर नहीं है, इसलिए हम VKontakte सर्वर पर एक विशेष यूरी का चयन करते हैं, जिसमें टोकन प्राप्त करने वाले ब्राउज़र (या नहीं) को रीडायरेक्ट किया जाएगा। टोकन इस उरी के मापदंडों में होगा (ये सभी OAuth 2.0 प्राधिकरण मानक के भाग हैं। बहुत सरल और सुविधाजनक हैं)।

4. प्रदर्शन = पृष्ठ - प्राधिकरण विंडो की उपस्थिति
5. response_type = token - हम VKontakte सर्वर से क्या अनुरोध करेंगे।

ये सभी विकल्प बुद्धिमानी से VKontakte डेवलपर्स पेज पर लिखे गए हैं।

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

 var authUrl = 'https://oauth.vk.com/authorize?client_id=3315996&scope=docs,offline&redirect_uri=http%3A%2F%2Foauth.vk.com%2Fblank.html&display=page&response_type=token'; chrome.tabs.create({url: authUrl,selected: true}, function(tab) {... 

VKontakte सर्वर यह जांचता है कि उपयोगकर्ता साइट पर अधिकृत है या नहीं (यदि नहीं, तो आपको पहले पासवर्ड दर्ज करना होगा और लॉगिन करना होगा)
(ये VKontakte के प्रलेखन से चित्र हैं, एक उदाहरण के रूप में दिए गए हैं)



और फिर पूछता है कि क्या आपके आवेदन को अनुमति देने के लिए यह अनुरोध करता है।



यदि आप उत्तर देते हैं - अनुमति देते हैं, तो एक पुनर्निर्देशन में निर्दिष्ट पृष्ठ पर परिवर्तन किया जाता है और इस uri के मापदंडों में हमारे द्वारा VK API तक पहुँच के लिए access_token का अनुरोध किया जाएगा। यदि आप इसकी अनुमति नहीं देते हैं, तो पैरामीटर त्रुटि = access_denied हो जाएगा और इसका कुछ भी नहीं आएगा।

बेशक , हम एक्सेस की अनुमति देंगे और उस टैब में जिसे हम खोलते हैं, वह oauth.vk.com/blank.html पेज पर रीडायरेक्ट किया जाएगा, जिसमें हमें उन मापदंडों के साथ टोकन की आवश्यकता होगी। टोकन प्राप्त करने के लिए, टैब खोलने के बाद, हम टैब अपडेट हैंडलर स्थापित करेंगे।

  authTabId = tab.id; chrome.tabs.onUpdated.addListener(function tabUpdateListener(tabId, changeInfo) { if(tabId == authTabId && changeInfo.url != undefined && changeInfo.status == "loading") { if ( changeInfo.url.indexOf('oauth.vk.com/blank.html') > -1 ) { ... 

हम अपने टैब की आईडी को बचाएंगे और उपयोगकर्ता के लिए हमें प्रतीक्षा करने की अनुमति देंगे और टैब की uri में access_token दिखाई देगा। जैसे ही हमें टैब डेटा अपडेट करते समय access_token मिलता है, हम इसे निकालते हैं और इसे अपने स्टोरेज में सेव करते हैं:

 chrome.storage.local.set({'vkaccess_token': accToken}, function() { ... 

और फिर तुरंत हमारे विस्तार के दूसरे भाग के लिए आगे बढ़ें। अर्थात्, चित्र प्राप्त करना और VKontakte सर्वर पर चित्र अपलोड करना।

ऐसा करने के लिए, हम अपने टैब को (उसी को) अपने एक्सटेंशन में पहले से तैयार पेज पर अपलोड करेंगे - upload.html । मापदंडों में हम वह सब कुछ स्थानांतरित करेंगे जो हमें काम करने की आवश्यकता है। यह एक एक्सेस टोकन और यूआरआई पिक्चर्स है। यह पृष्ठ केवल उपयोगकर्ता को दिखाने के लिए आवश्यक है कि कुछ हो रहा है। अचानक लोडिंग में बहुत समय लगेगा, और इस समय हमारा पेज एक एनिमेटेड प्रगति बार दिखा सकता है। कुछ चल रहा है - उपयोगकर्ता शांत है।
यहां हम जाते हैं अगर टोकन पहले से ही प्राप्त हो गया है और भंडारण में संग्रहीत है।

 chrome.tabs.update(tabId,{'url': 'upload.html#' + imgSrc + '&' + accToken,'active': true}, function(tab){}); 

हमारा upload.html पृष्ठ सरल है। डिफ़ॉल्ट रूप से, यह प्रगति बार दिखाता है - एक gif। और बैकग्राउंड में upload.js स्क्रिप्ट काम करती है ।

वहां कुछ खास नहीं है: शुरुआत में आप एक जीईटी अनुरोध के अनुसार, ब्राउज़र की कैश से हमारी छवि को एक ब्लॉब के रूप में प्राप्त करते हैं।

 var x = new XMLHttpRequest(); x.onload = function() { .. } x.responseType = 'blob'; x.open('GET', imageUrl); x.send(); 

छवि पहले ही ब्राउज़र द्वारा डाउनलोड की जा चुकी है और यह तेज़ होगी। उसी समय, हम हर तरह की ट्रिकी इमेज होस्टिंग सेवाओं के आसपास जाते हैं, जो कि Google से आने पर इमेज दिखाती हैं, और जैसे ही रेफ़रर Google नहीं होता है, इमेज के नीचे रिसोर्स का विज्ञापन दिखाई देता है। नतीजतन, हमारे पास एक साफ तस्वीर है जो हमने इसे देखा था।

अगला VKontakte API के अनुरोधों की एक श्रृंखला है जो कड़ाई से प्रलेखन के अनुसार है। हमें छवि को लोड करने के लिए सर्वर का पता मिलता है ( docs.getUploadServer ), फॉर्मडेटा () का उपयोग करके फॉर्म बनाएं और परिणामी बूँद को छवि के साथ जोड़ें, जिससे इसे छवि का नाम दिया जाए। हम चित्र को POST के साथ सर्वर पर भेजते हैं, चित्र को सर्वर ( docs.save ) पर सहेजते हैं और प्रतिक्रिया में चित्र का uri प्राप्त करते हैं, इसके माध्यम से उपयोगकर्ता को हमारे टैब में VKKakte सर्वर पर पहले से लोड की गई तस्वीर दिखाते हैं।

बस इतना ही। मैं एक जावास्क्रिप्ट विशेषज्ञ नहीं हूं, इसलिए मुझे कोड की गुणवत्ता के लिए दोष न दें।