🧔🏽 🎀 🔉 ओपन एपीआई पर आधारित VKontakte के साथ एकीकरण 🏇🏼 🐋 🙇🏻

सोशल नेटवर्क VKontakte तृतीय-पक्ष साइटों के साथ एकीकरण के लिए पर्याप्त अवसर प्रदान करता है। मूल रूप से, इन सुविधाओं को तैयार विजेट द्वारा दर्शाया गया है। हालांकि, ओपन एपीआई भी है , जो न केवल उपयोगकर्ता को अधिकृत करने की अनुमति देता है, बल्कि वीके एप्लिकेशन ( वीके एपीआई ) के लिए उपलब्ध किसी भी विधि को निष्पादित करने की भी अनुमति देता है।

आइए ओपन एपीआई की क्षमताओं का उपयोग करके एक छोटा गेम एप्लिकेशन बनाने का प्रयास करें। हम "मेमोरी" गेम पर प्रशिक्षण देंगे, जिसका सार 2 समान चित्रों को खोलकर खेल के मैदान को साफ़ करना है। चित्रों के रूप में हम खिलाड़ी के दोस्तों की तस्वीरों का उपयोग करेंगे।

काम पर लगना

सबसे पहले, आपको एक नया एप्लिकेशन बनाने की आवश्यकता है , इसके नाम और प्रकार को निर्दिष्ट करते हुए।

उसके बाद, एप्लिकेशन सेटिंग्स पर जाएं और साइट का पता और आधार डोमेन निर्दिष्ट करें।

कार्यान्वयन

एक HTML पृष्ठ बनाएं जिसमें कई ब्लॉक होंगे:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>VK Memory</title> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery-ui.min.js"></script> <script type="text/javascript" src="http://vkontakte.ru/js/api/openapi.js"></script> <script type="text/javascript" src="./js/jquery.pnotify.min.js"></script> <script type="text/javascript" src="./js/jquery.blockUI.js"></script> <script type="text/javascript" src="./js/general.js"></script> <link rel="stylesheet" href="./css/styles.css" type="text/css"/> <link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.9.custom.css" type="text/css"/> <link rel="stylesheet" href="./css/jquery.pnotify.default.css" type="text/css"/> </head> <body> <div id="content"> <div id="header"> VK Memory </div> <div class="flash-notice" style="display: none" id="login-bar">     <a href="#" id="vk-login"></a> </div> <div class="flash-success" style="display: none" id="logout-bar">   <a href="./index.html" id="new-game">  </a>, <a href="#" id="game-scores">  </a>  <a href="#" id="vk-logout"></a>. </div> <div class="flash-error" style="display: none; text-align: center" id="stats"></div> <div id="game-container"></div> </div> <div id="scores-dialog" style="display: none"></div> </body> </html>

ब्लॉकों का उद्देश्य:

div # लॉगिन-बार - में उपयोगकर्ता को अधिकृत करने के लिए एक लिंक होता है
div # logout-bar - इसमें एक नया गेम शुरू करने, आंकड़े देखने और बाहर निकलने के लिए लिंक हैं
div # खेल-कंटेनर - खेल मैदान के लिए कंटेनर

एक महत्वपूर्ण बिंदु ओपन एपीआई तरीकों से युक्त एक जावास्क्रिप्ट फाइल को शामिल करना है:

 <script type="text/javascript" src="http://vkontakte.ru/js/api/openapi.js"></script>

हमारे एप्लिकेशन की मुख्य कार्यक्षमता सामान्य फ़ाइल में स्थित होगी। इसलिए, आइए इसके विचार पर चलते हैं।

ओपन एपीआई की शुरुआत

स्क्रिप्ट का एक महत्वपूर्ण हिस्सा एपीआई का आरंभीकरण है, जिसमें VK.init विधि को कॉल करना शामिल है, जिसमें कम से कम एक फ़ील्ड वाली एक वस्तु पारित हो जाती है - एपीआईड - एप्लिकेशन आईडी (यह एप्लिकेशन सेटिंग पृष्ठ पर प्रदर्शित होता है):

 VK.init({ apiId: 2151186 });

प्राधिकरण

उपयोगकर्ता को अधिकृत करने के लिए, लिंक के लिए एक हैंडलर जोड़ें # vk-login, जो VK.Auth.login पद्धति को कॉल करेगा। पहला पैरामीटर कॉलबैक फ़ंक्शन को पास करता है, और दूसरा - एप्लिकेशन के लिए आवश्यक उपयोगकर्ता सेटिंग्स, जो आवश्यक एक्सेस स्तरों की एक सूची है। हमारे मामले में, मित्रों की सूची तक पहुंच आवश्यक है, इसलिए लिंक हैंडलर इस तरह दिखाई देगा:

 $('a#vk-login').click(function(event){ event.preventDefault(); VK.Auth.login(null, VK.access.FRIENDS); });

सत्र समाप्त

उपयोगकर्ता को सत्र समाप्त करने में सक्षम करने के लिए, # vk-logout लिंक के लिए एक हैंडलर जोड़ें, जो VK.Auth.logout पद्धति को कॉल करेगा। पहला पैरामीटर कॉलबैक फ़ंक्शन है, जो हमारे मामले में पृष्ठ को ताज़ा करेगा:

 $('a#vk-logout').click(function(event){ event.preventDefault(); VK.Auth.logout(function(){ refreshPage(false); }); });

इवेंट ट्रैकिंग

उपयोगकर्ता के लॉग इन होने के बाद गेम में जाने के लिए (हमारे मामले में, यह पृष्ठ को रीफ्रेश करना है), तो आपको ओर्गेनिक.ग्लीन घटना की सदस्यता लेनी चाहिए। हम भी od.sessionChange घटना की सदस्यता लेते हैं, यह तब उत्पन्न होगा जब उपयोगकर्ता प्राधिकरण से संबंधित डेटा बदलता है। खेल में स्विच करने के लिए यह आवश्यक है यदि उपयोगकर्ता पहले से ही पहले से लॉग इन है और केवल दोस्तों की सूची तक पहुंच की पुष्टि करता है। ईवेंट हैंडलर जोड़ने के लिए, आपको VK.Observer.subscribe विधि को कॉल करने की आवश्यकता है, जो दो पैरामीटर लेता है - वह ईवेंट जिसे आप सब्सक्राइब करना चाहते हैं, और कॉलबैक फ़ंक्शन - ईवेंट हैंडलर:

 VK.Observer.subscribe('auth.login', function(response){ refreshPage(true); }); VK.Observer.subscribe('auth.sessionChange', function(response){ refreshPage(true); });

यदि उपयोगकर्ता पहले सफलतापूर्वक लॉग इन नहीं हुआ है तो रिफ्रेशपेज विधि पृष्ठ को रिफ्रेश करती है:

 function refreshPage(checkLogged) { if((checkLogged && !isLogged) || !checkLogged) { location.href = 'index.html'; } }

प्रारंभिक डेटा संग्रह

उपयोगकर्ता की वर्तमान स्थिति की जांच करने के लिए, VK.Auth.getLoginStatus विधि है। हम यह निर्धारित करने के लिए उपयोग करेंगे कि क्या उपयोगकर्ता अधिकृत है और ऊपर वर्णित ब्लॉकों की आवश्यक को छिपाने / दिखाने के लिए। इसके अलावा, यदि उपयोगकर्ता पहले से ही अधिकृत है, तो तुरंत खेल की शुरुआत के लिए आगे बढ़ें। एक पैरामीटर VK.Auth.getLoginStatus पद्धति को दिया जाता है - एक कॉलबैक फ़ंक्शन, जो बदले में, उपयोगकर्ता सत्र डेटा वाली एक वस्तु को पारित किया जाता है:

 VK.Auth.getLoginStatus(function(response){ if(response.session) { //   } else { //    } });

किसी भी VKontakte एपीआई विधि को कॉल करने के लिए, VK.Api.call पद्धति का उपयोग करें, जो तीन मापदंडों को लेती है - विधि का नाम, एक ऑब्जेक्ट जो निर्दिष्ट विधि को पारित किए गए मापदंडों का प्रतिनिधित्व करता है, और एक कॉलबैक फ़ंक्शन जिसके लिए विधि कॉल का परिणाम पारित किया जाएगा। दोस्तों की एक सूची प्राप्त करने के लिए, आपको friends.get विधि को कॉल करने की आवश्यकता है। विधि में कोई आवश्यक पैरामीटर नहीं है और मापदंडों के बिना कॉल के मामले में सभी दोस्तों की सूची वापस आ जाएगी। चूंकि हमें उपयोगकर्ता के दोस्तों की तस्वीरें चाहिए, इसलिए हम फ़ील्ड पैरामीटर को 'photo_rec' मान के साथ विधि में पास करेंगे, जो 50 पिक्सेल के किनारे के साथ वर्ग फ़ोटो से मेल खाती है:

 VK.Api.call('friends.get', { fields: 'photo_rec' }, function(data){ //    });

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

 VK.Api.call('friends.get', { fields: 'photo_rec' }, function(data){ if(!data.error) { if(data.response.length > 0) { data.response.shuffle(); for(i = 0; i < data.response.length; i++) { var friend = data.response[i]; if(friend.photo_rec && friend.photo_rec.indexOf('images/question_c.gif') == -1) { photos.push({ photo: friend.photo_rec, id: friend.uid }); } } } initGameField(); } else { if(data.error.error_code == 7) { isLogged = false; $('div#login-bar').show(); $('div#logout-bar').hide(); $.unblockUI(); } else { showError(data.error.error_msg); } } });

खेल की तैयारी

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

यदि दो फ़ोटो पहले से खुली हैं, तो उन्हें बंद कर देता है
इस सेल को सौंपे गए फोटो का "फ्रंट साइड" प्रदर्शित करता है
यदि एक फोटो पहले से ही खुला है और यह वर्तमान के साथ मेल खाता है, तो दोनों कोशिकाओं को साफ करता है (सफल चाल)

एक सफल कदम के मामले में, VKontakte API getProfiles विधि को कहा जाता है, जो निर्दिष्ट उपयोगकर्ताओं के बारे में जानकारी देता है। उन उपयोगकर्ताओं की सूची जिनके लिए जानकारी की आवश्यकता होती है, को uids पैरामीटर के रूप में पारित किया जाता है। इस पद्धति के लिए एक कॉल का उपयोग उस उपयोगकर्ता के प्रोफाइल के नाम और लिंक को प्रदर्शित करने के लिए किया जाता है जिसने सफलतापूर्वक अनुमान लगाया है।
यदि संपूर्ण फ़ील्ड साफ़ कर दी जाती है, तो हम उच्च परिणाम तालिका में वर्तमान परिणाम (जिसके लिए फ़ील्ड साफ़ हो गया था) की संख्या को सहेजते हैं। ऐसा करने के लिए, setUserScore विधि का उपयोग करें, जो एकल पैरामीटर लेता है - उपयोगकर्ता का रिकॉर्ड:

 VK.Api.call('setUserScore', { score: stepsCount }, function(data){ if(data.error) { showError(data.error.error_msg, false); } });

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

चैंपियंस सूची

उच्च स्कोर तालिका प्राप्त करने के लिए, getHighScores विधि का उपयोग किया जाता है, जिसमें कोई पैरामीटर नहीं है। विधि ऑब्जेक्ट्स की एक सरणी देता है, जिनमें से प्रत्येक में उपयोगकर्ता और उसके रिकॉर्ड के बारे में जानकारी होती है।
ताकि उपयोगकर्ता रिकॉर्ड की तालिका देख सके, एक लिंकर एक # गेम-स्कोर जोड़ सके, जो उपरोक्त विधि को कॉल करेगा, परिणामों की तालिका बनाएं और इसे संवाद बॉक्स में दिखाएं:

 $('a#game-scores').click(function(event){ event.preventDefault(); VK.Api.call('getHighScores', {}, function(data){ if(!data.error) { var scoresTable = ''; if(data.response && data.response.length > 0) { for(i = 0; i < data.response.length; i++) { scoresTable = '<tr><td><a href="http://vkontakte.ru/id' + data.response[i].user_id + '" target="_blank">' + data.response[i].user_name + '</a></td><td>' + data.response[i].score + '</td></tr>' + scoresTable; } scoresTable = '<table border="0" class="scores-table" align="center"><thead><tr><td></td><td></td></tr></thead><tbody>' + scoresTable + '</tbody></table>'; } else { scoresTable = '<div style="text-align: center"> </div>'; } $('#scores-dialog:ui-dialog').dialog('destroy'); $('#scores-dialog') .html(scoresTable) .dialog({ title: ' ', modal: true, draggable: false, resizable: false, buttons: { '': function(){ $(this).dialog('close'); } } }); } else { showError(data.error.error_msg, false); } }); })

जैसा कि आप हैंडलर कोड से देख सकते हैं, तालिका की प्रत्येक नई पंक्ति को पिछले एक से पहले जोड़ा जाता है, जो ऊपर वर्णित खेल परिणामों की विशेषता के साथ जुड़ा हुआ है।

परिणाम

अंतिम फ़ाइल general.js को यहां देखा जा सकता है , गेम स्वयं VK मेमोरी लिंक पर उपलब्ध है।

अनुप्रयोग बनाने के लिए jQuery पाइंस नोटिफाई और ब्लॉकयूआई के प्लगइन्स का उपयोग किया गया था। डेवलपर्स के लिए पेज पर VKontakte API के बारे में सभी जानकारी प्राप्त की जा सकती है ।

ओपन एपीआई पर आधारित VKontakte के साथ एकीकरण