🕞 🏢 🕵🏿 विनीत पंजीकरण और साइट तक पहुंच 🌦️ 🤞🏿 🧑🏽

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

नीचे यह बताया गया है कि आपकी साइट तक पहुँच को विनीत, स्वचालित और बिना किसी विशेष लागत के कैसे बनाया जा सकता है।

एक बार जब उन्होंने समस्याओं से छुटकारा पाने का फैसला किया - तो सब एक बार।

हम उपयोगकर्ताओं को ई-मेल से नुकसान की पुष्टि और पासवर्ड रीसेट नहीं भेजेंगे।
हम पंजीकरण फॉर्म निकालते हैं।
हम कोई भी व्यक्तिगत डेटा संग्रहीत नहीं करेंगे।
लॉगिन फॉर्म और पासवर्ड निकालें।

वहाँ केवल एक ही रास्ता है - OpenID या OAuth का उपयोग करके साइट में लॉग इन करने के लिए। यदि आप सुनिश्चित हैं कि सभी उपयोगकर्ताओं के पास Facebook या Vkontakte पर पंजीकरण है, तो नीचे वर्णित विधि उपयुक्त है।

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

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

//Facebook yepnope({ load: ['//connect.facebook.net/ru_RU/all.js'], complete: function(){ FB.init({appId: '   AppID Facebook', xfbml: true, cookie: true, oauth: true}) FB.Event.subscribe('auth.statusChange', facebook_auth) } }) function facebook_auth(response) { if (response.authResponse) { var uid = response.authResponse.userID; var token = response.authResponse.accessToken; $.get("/auth/facebook?token="+token+"&uid="+uid, function(data, status){ $('.loggingin').removeClass('loggingfb') if(status == 'success') $('#logins .fb').append($('<span>'+data+'</span>')) }) } else $('.loggingin').removeClass('loggingfb') } //  yepnope({ load: ['//vkontakte.ru/js/api/openapi.js'], complete: function(){ if(location.href.match(/localhost/)) VK.init({apiId: '   ID   localhost'}) else VK.init({apiId: '   ID   '}) VK.Auth.getLoginStatus(vk_auth, true) } }) function vk_auth(response) { if (response.status === 'connected') { var uid = response.session.mid var sid = response.session.sid var name = response.session.user.first_name + ' ' + response.session.user.last_name $.get("/auth/vk?sid="+sid+"&uid="+uid+"&name="+name, function(data, status){ $('.loggingin').removeClass('loggingvk') if(status == 'success') $('#logins .vk').append($('<span>'+data+'</span>')) }) } else $('.loggingin').removeClass('loggingvk') }

इनपुट पर क्लिक करने के अभ्यास के दो विकल्प, पहला - एक ही समय में दो विंडो खोलने के साथ, दूसरा - अलग से।

  $('.login').click(function(){ FB.login(function(){}, {scope : 'user_relationships,publish_stream,offline_access'}) VK.Auth.login(vk_auth, 1027) return false })

  $('.login .vk').click(function(){ VK.Auth.login(vk_auth, 1027) return false }) $('.login .fb').click(function(){ FB.login(function(){}, {scope : 'user_relationships,publish_stream,offline_access'}) return false })

खैर, और HTML का एक सा, जो हमें थोड़ा सा कल्पना करने की अनुमति देगा कि क्या हो रहा है।

 <body> <div id="fb-root"></div> <div class="top"> <div id="logins"> <div class="login"> <span id="not_logged_in"> <span class="loggingin loggingfb loggingvk"> <img src="/images/loading.gif" /> </span> <span> <a></a> </span> </span> <span class="fb"> <img class="nano" src="/images/facebook.png" /> <span class="name"></span> </span> <span class="vk"> <img class="nano" src="/images/vkontakte.png" /> <span class="name"></span> </span> </div> </div> ...

और इसके लिए थोड़ा सीएसएस।

 #logins { float: right; margin-top: -10px; padding: .5em; background-color: #ffffaa; cursor: pointer; border: 1px solid #eeeeaa; border-radius: 0 0 5px 5px; } #logins a {text-decoration: none; } #logins .prompt span {padding: .5em; } #logins span {font-weight: bold; } #not_logged_in, #logins .vk, #logins .fb {margin: .5em; } .loggedinvk.loggedinfb #not_logged_in {display: none; } .loggedinvk .inputs_not_logged, .loggedinfb .inputs_not_logged {display: none; } .loggingin {display: none; padding-right: .5em; } .loggingin.loggingfb, .loggingin.loggingvk {display: inline; } .add .inputs {display: none; } .loggedinvk .add .inputs, .loggedinfb .add .inputs {display: block; }

हमें आखिर में क्या मिला और यह कैसे काम करता है

ग्राहक पक्ष पर सब कुछ दिलचस्प होता है। जब उपयोगकर्ता पहली बार साइट पर गया था, और अभी तक फेसबुक और Vkontakte की सहमति नहीं दी है, तो साइट पर अपने बारे में जानकारी प्रदान करने के लिए, उसके लॉगिन बटन प्रदर्शित होते हैं। कम समय के बाद, जब फेसबुक और Vkontakte स्वचालित रूप से लॉगिन करने का प्रयास पूरा करते हैं, तो img loading.gif गायब हो जाता है, और उपयोगकर्ता इनपुट पर क्लिक कर सकता है। नतीजतन, वह तुरंत दो पॉप-अप विंडो खोलेगा - एक साइट, प्रति एक्सेस को अधिकृत करने के अनुरोध के साथ।
जैसे ही उपयोगकर्ता ने अपनी सहमति व्यक्त की है, तरीके facebook_auth और vk_auth कहलाते हैं, जो उपयोगकर्ता की विशिष्ट पहचानकर्ताओं (और उसके नाम) को पते / विशेषाधिकार / vk और / विशेषाधिकार / facebook पर हमारी साइट पर भेजते हैं।

सबसे दिलचस्प और उपयोगी बात साइट पर अगली उपयोगकर्ता की यात्रा के दौरान होती है, जब उसने पहले ही हमारी साइट की पहुंच को फेसबुक और Vkontakte पर अपनी जानकारी के लिए अधिकृत कर दिया है। थोड़ा मोड़कर, loading.gif गायब हो जाएगा, और facebook_auth और vk_auth कहा जाएगा, लेकिन इस बार बिना किसी उपयोगकर्ता के हस्तक्षेप के, जो कि हम चाहते थे। यही है, उपयोगकर्ता को हमारी वेबसाइट पर फिर से प्रवेश (लॉगिन) करने के लिए कोई कार्रवाई करने की आवश्यकता नहीं है। और पंजीकरण (प्राथमिक प्रविष्टि) के लिए यह हमारी साइट पर सामाजिक नेटवर्क से आपकी जानकारी के उपयोग के लिए सहमति देने के लिए पर्याप्त है।

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

विनीत पंजीकरण और साइट तक पहुंच

हमें आखिर में क्या मिला और यह कैसे काम करता है

More articles: