📙 ♍️ 🏽 VK एपीआई का उपयोग करके एक अजाक्स साइट उपयोगकर्ता का सरल क्लाइंट और सर्वर प्राधिकरण 🧙🏻 🤞🏼 🍓

एक प्रोजेक्ट के लिए, साइट पर उपयोगकर्ता को VKontakte API का उपयोग करके क्लाइंट साइड पर, जावास्क्रिप्ट ओपन एपीआई का उपयोग करके, और सर्वर की ओर से, PHP का उपयोग करके अधिकृत करना आवश्यक था।

वीके एपीआई तक पहुंचने की अनुमति

पहली नज़र में, यह कार्य इतना दिलचस्प नहीं है, क्योंकि VKontakte के पास क्या और कैसे है, और यहां तक कि क्लाइंट प्राधिकरण का एक विस्तृत विवरण के साथ अच्छा प्रलेखन है, साथ ही, Vontontakte API के माध्यम से प्राधिकरण के साथ नेटवर्क पर पहले से ही बहुत सारी साइटें हैं।

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

लेकिन पहले, खुद के लिए थोड़ा और विस्तार कार्य:

हम पृष्ठ को एक बार फिर से लोड नहीं करना चाहते हैं, और केवल अजाक्स के माध्यम से सर्वर के साथ सभी संचार करना चाहते हैं;
उपयोगकर्ता के लिए, प्राधिकरण प्रक्रिया संभव के रूप में कुछ "पीछे के विचारों" का कारण बन सकती है, अर्थात, सब कुछ यथासंभव सुविधाजनक रूप से किया जाना चाहिए।

हमें निम्नलिखित HTML कोड है

<!doctype html> <html> <head> <meta charset="utf-8"> <title>  </title> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <section id="serverApi"> API</section> <section id="clientApi"> API</section> </body> </html>

ग्राहक प्राधिकरण

ग्राहक प्राधिकरण के साथ वास्तव में कुछ भी जटिल नहीं है।
प्रलेखन के अनुसार, यह window.vkAsyncInit ईवेंट पर Openapi.js को एसिंक्रोनस रूप से लोड करने और VK.init({appid: YOUR_APP_ID}) को window.vkAsyncInit लिए window.vkAsyncInit , जिसके बाद आप VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS) फ़ंक्शन VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS) , VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS) निष्पादित कर सकते हैं, VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS) कॉल कर सकते हैं। उपयोगकर्ता प्राधिकरण।

ओपन एपीआई के माध्यम से प्राधिकरण और अनुरोध

 var vk = { data: {}, api: "//vk.com/js/api/openapi.js", appID: YOUR_APP_ID, appPermissions: YOUR_APP_PERMISSIONS, init: function(){ $.js(vk.api); window.vkAsyncInit = function(){ VK.init({apiId: vk.appID}); load(); } function load(){ VK.Auth.login(authInfo, vk.appPermissions); function authInfo(response){ if(response.session){ //   vk.data.user = response.session.user; vk.getFriends(); }else alert("  !"); } } }, getFriends: function(){ VK.Api.call('friends.get', {fields: ['uid', 'first_name', 'last_name'], order: 'name'}, function(r){ if(r.response){ r = r.response; var ol = $('#clientApi').add('ol'); for(var i = 0; i < r.length; ++i){ var li = ol.add('li').html(r[i].first_name+' '+r[i].last_name+' ('+r[i].uid+')') } }else alert("     "); }) } } $.ready(vk.init);

सबसे पहले, मैं तुरंत एक आरक्षण करता हूं कि यहां उपयोग किए गए कार्य $ jQuery नहीं हैं। हालांकि, उनका उद्देश्य सहज नहीं हो सकता है, इसलिए मैं आपको बताऊंगा कि यह या वह कार्य क्या करता है। उनका स्वतंत्र कार्यान्वयन मुश्किल नहीं होना चाहिए, सभी jQuery कोड के हस्तांतरण की तरह।

इस प्रकार,
$.ready(function) - यह DOMContentLoaded लिए हैंडलर है;
$.js(text) - अतुल्यकालिक रूप से एक जावास्क्रिप्ट फ़ाइल लोड करता है;
$(element) - DOM नोड element पर एक रैपर देता है;
$(element).add(node) - element लिए एक नया नोड node बच्चा बनाता है और उस पर एक आवरण देता है;
$(element).html(string) - $(element).html(string) element.innerHTML = string लिए एक आवरण।

अनिवार्य रूप से, यह कोड निम्नलिखित कार्य करता है:
जब दस्तावेज़ तैयार हो जाता है, तो VKontakte API लोड किया जाता है, और इसके आरंभ होने के बाद, VK.Auth.login() विधि को VK.Auth.login() , जो पॉप-अप विंडो प्रदर्शित करता है जो ~~किसी भी बैनर कटर~~ को ~~सफलतापूर्वक "ब्लॉक" करता~~ है जिसमें उपयोगकर्ता क्लाइंट एप्लिकेशन को डेटा प्रदान करने के लिए उसकी सहमति की पुष्टि करता है।
उपयोगकर्ता की सहमति या असहमति के बाद authInfo फ़ंक्शन authInfo कहा जाता है, और सफल प्राधिकरण के मामले में, दोस्तों की सूची का अनुरोध करता है।

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

सर्वर प्राधिकरण

सर्वर प्राधिकरण बहुत अधिक मजेदार है। तृतीय-पक्ष साइट से VKontakte API तक पहुंचने के लिए सर्वर प्राधिकरण तंत्र OAuth 2.0 प्रोटोकॉल पर आधारित है।

प्राधिकरण प्रक्रिया इस प्रकार है:

उपयोगकर्ता के ब्राउज़र में एक पृष्ठ दिखाना आवश्यक है जहां वह एप्लिकेशन को अपने डेटा तक पहुंच की अनुमति देगा;
आवेदन के सफल प्राधिकरण के बाद, प्राधिकरण संवाद को खोलने पर उपयोगकर्ता के ब्राउज़र को REDIRECT_URI पते पर पुनः निर्देशित किया जाएगा। इस स्थिति में, पहुंच कुंजी प्राप्त करने के लिए एक कोड जीईटी पैरामीटर में प्रेषित किया जाएगा;
एप्लिकेशन के कोड और गुप्त डेटा को एक विशेष पते पर स्थानांतरित करने के साथ अनुरोध को पूरा करना आवश्यक है, बदले में हमें एक्सेस कुंजी access_token प्राप्त होगा, जो हमारे लिए एपीआई के लिए अनुरोध करने के लिए आवश्यक है।

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

एक प्रसिद्ध संगीत सेवा में प्राधिकरण का एक उदाहरण

एक संगीत सेवा पर वीके एपीआई का उपयोग करके प्राधिकरण

सच है, जो खुलने वाले पृष्ठ पर "लॉगिन सक्सेस" लिखने के बजाय अब कुछ समय के लिए, एक चेतावनी है कि आपको बस ऐसा नहीं करना है जैसा कि लिखा गया है - आपने इस संदेश को विषय की शुरुआत में चित्र में देखा था।

इसके अलावा, एक अतिरिक्त विंडो का उद्घाटन फिर से इस खतरे से जुड़ा हुआ है कि यह अवरुद्ध हो जाएगा।

सौभाग्य से, अगर हम उस लिंक को जानते हैं जिसके द्वारा विंडो को खोलना है, तो इसे खोलने के कई अच्छे तरीके हैं ताकि यह अवरुद्ध न हो। उदाहरण के लिए, अच्छा पुराना iframe टैग अभी भी HTML मानक के रैंक में है, और यह हमारे कार्य के लिए सबसे उपयुक्त है।

सबसे पहले, चूंकि हमें पता है, हम फ्रेम को खोल सकते हैं और उपयोगकर्ता को एक लिंक दिखा सकते हैं जहां आप मैन्युअल रूप से सब कुछ कर सकते हैं।

दूसरे, यदि कोई रीडायरेक्ट होता है, और हमारे डोमेन से पेज फ्रेम में खुलता है, तो हम फ्रेम से मुख्य विंडो तक पहुंच सकते हैं और स्वचालित रूप से करीब फ्रेम फ़ंक्शन शुरू कर सकते हैं। उसी समय, सर्वर में पहले से ही access_token होगा , जिसे हम सत्र में सहेजेंगे और मुख्य विंडो से सर्वर के अनुरोधों को निष्पादित करके, हम उत्तर प्राप्त करने में सक्षम होंगे। पृष्ठ का पुनः लोड नहीं होगा, जो हमारी समस्या को पूरी तरह हल करता है।

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

PHP के लिए OAuth VK API एक्सेस क्लास का कार्यान्वयन आसानी से जीथब पर पाया जा सकता है, जो मैंने (PHP> 5.4) किया था।
(यह दुर्घटना से काफी हद तक पता चला है कि इस वर्ग को सबसे अधिक उपयोगकर्ता उपयोगकर्ता द्वारा लिखा गया था, जिसके लिए बहुत धन्यवाद )

अब सबसे दिलचस्प पर चलते हैं।

हम एक सर्वर स्क्रिप्ट लागू करते हैं जो हमारे पेज के AJAX अनुरोधों का जवाब देगी

 <?php require_once('vk.php'); session_start(); function getPostStr($data, $default = false){ //   -  $_POST[$data] if(!isset($_POST[$data])) return $default; $data = $_POST[$data]; $data = htmlspecialchars(strip_tags(trim($data))); return ($data != "" ? $data : $default); } function error($code, $text, $params = Array()){ $result = Array('error' => Array('code' => $code, 'message' => $text)); if(count($params) > 0) foreach($params as $key => $value) $result['error'][$key] = $value; die(json_encode($result)); } $vkConf = Array( 'appID' => YOUR_APP_ID, 'apiSecret' => YOUR_API_SECRET, 'callbackUrl' => YOUR_DOMAIN . '/auth.php', 'apiSettings' => YOUR_APP_PERMISSIONS ); $vk = (isset($_SESSION['accessToken'])) ? new VK($vkConf['appID'], $vkConf['apiSecret'], $_SESSION['accessToken']) : null; function userIn($vk, $vkConf){ //   unset($_SESSION['accessToken']); $vk = new VK($vkConf['appID'], $vkConf['apiSecret']); $authorizeUrl = $vk -> getAuthorizeURL($vkConf['apiSettings'], $vkConf['callbackUrl']); error(-1, "  !", Array('url' => $authorizeUrl)); } function getFriends($fields, $order, $vk){ //     $userFriends = $vk -> api('friends.get', array('fields' => $fields, 'order' => $order)); $result = Array(); foreach($userFriends['response'] as $key => $value){ $result[] = Array('firstName' => $value['first_name'], 'lastName' => $value['last_name'], 'uid' => $value['uid']); } echo json_encode($result); } $method = strtolower($api -> getStr("method")); switch($method){ case "user.in" : userIn($vk, $vkConf); break; case "friends.get" : getFriends(getPostStr("fields"), getPostStr("order"), $vk); break; default: Api::error(0, "   Api"); } ?>

हम POST विधि का उपयोग करके इस पेज पर अनुरोध भेजेंगे, जहां method पैरामीटर में उस method का नाम है जिसे हम सर्वर पर निष्पादित करना चाहते हैं।

सफल प्राधिकरण के लिए, हम user.in को एक अनुरोध user.in जब हमारा मुख्य पृष्ठ तैयार हो जाएगा, जिसमें सर्वर -1 त्रुटि कोड के साथ जवाब देगा, जिसे हम पकड़ लेंगे और प्रक्रिया करेंगे।
उसी समय, त्रुटि के साथ, पृष्ठ का URL जिस पर उपयोगकर्ता को एप्लिकेशन तक पहुंच की पुष्टि करनी होगी, वह भी आएगा, और हम इसे फ्रेम में खोलेंगे।

हम अपने ग्राहक स्क्रिप्ट को AJAX प्रसंस्करण के साथ पूरक करते हैं

 function Api(method, params, callback){ if(!params) params = {}; $.ajax($.copy({method: method}, params), 'server.php', function(r){ if(r.error){ switch(r.error.code){ case -1: { // notAuth var div = $(document.body).add('div').id('authPopup'), iframe = div.add('iframe').attr({src: r.error.url}); div.add('p').html('                 ,   -          .      ,      ,   ').add('a').attr({href: r.error.url}).html(' '); $.splash.open({onclose:function(){ div.remove() }}); } break; default: alert(r.error.code+': '+r.error.message); } }else if(callback) callback(r); }); } $.ready(function(){ Api('user.in'); });

मैं संक्षेप में $ कार्यों का वर्णन करूंगा:
$.copy(object1, object2) - object1 सभी मापदंडों को object2 की object2 ;
$.ajax(text, addr, callback) - text संदेश को पारित करने के लिए, एक POST अनुरोध भेजता है। प्रतिक्रिया JSON के रूप में होती है और इसे callback फ़ंक्शन में पास करती है;
$(element).id(elemID) - element.id = elemID लिए एक आवरण। element.id = elemID ;
$(element).attr(object) - तत्व element का टैग गुण सेट करता है। object कुंजी - विशेषता नाम, मुख्य मान विशेषता मान के रूप में सेट किए जाएंगे;
$(element).remove() - element को हटाता element ;
$.splash.open(params) - पारभासी अंधेरे ब्लॉक के साथ एक ब्राउज़र विंडो खींचता है। params.onclose पैरामीटर एक फ़ंक्शन है जिसे $.splash.close() समय कहा जाएगा।

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

यह केवल उस पृष्ठ को बनाने के लिए रहता है जिस पर पुनर्निर्देशित किया जाता है।

वीके सर्वर प्राधिकरण पुष्टिकरण पृष्ठ

 <?php require_once('vk.php'); session_start(); $vkConf = Array( 'appID' => YOUR_APP_ID, 'apiSecret' => YOUR_API_SECRET, 'callbackUrl' => YOUR_DOMAIN . '/auth.php', ); if(isset($_REQUEST['code'])){ $vk = new VK($vkConf['appID'], $vkConf['apiSecret']); $accessToken = $vk -> getAccessToken($_REQUEST['code'], $vkConf['callbackUrl']); $_SESSION['accessToken'] = $accessToken['access_token']; }else die('Auth failed'); ?> <!doctype html> <html> <head> <meta charset="utf-8" /> <title>     </title> <script> $.ready(function(){ if(window.top){ window.top.vk.getFriends(); window.top.$.splash.close(); } }) </script> </head> <body> <h4> !</h4> <p>   <a href="YOUR_DOMAIN">  </a>,   </p> </body> </html>

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

यहां वीके एपीआई के माध्यम से साइट उपयोगकर्ता के विनीत प्राधिकरण का ऐसा कार्यान्वयन है।

स्क्रीनशॉट

एक होमवर्क के रूप में, अगर यह एक फ्रेम में खुला नहीं है, और पुष्टिकरण पेज userIn() विधि में है कि अगर access_token सत्र में है, तो YOUR_DOMAIN पृष्ठ से पुनर्निर्देशित करने का प्रयास करें, यदि इसकी वैधता की जाँच की जाती है, और यदि कुंजी मान्य है, तो इसका उपयोग नए प्राधिकरण के बजाय किया गया था। ।

VK एपीआई का उपयोग करके एक अजाक्स साइट उपयोगकर्ता का सरल क्लाइंट और सर्वर प्राधिकरण

ग्राहक प्राधिकरण

सर्वर प्राधिकरण

More articles: