ट्विटर के माध्यम से अपनी साइट पर एंड-टू-एंड प्राधिकरण

वे दिन होते हैं जब प्रत्येक वैसुस्सली Sverdyshchenko के व्यक्तिगत पृष्ठ पर प्रत्येक फोरम को एक अलग पंजीकरण की आवश्यकता होती है।
हमें धीरे-धीरे इस तथ्य की आदत हो रही है कि आप हमारे OpenID / OAuth प्रदाता की ओर से लगभग हर जगह एक टिप्पणी छोड़ सकते हैं। इसके अलावा, ट्विटर / फेसबुक / Google / Yandex / Vkontakte के एंड-टू-एंड प्राधिकरण के लिए प्लग-इन सभी लोकप्रिय सीएमएस के लिए लंबे समय से लिखा गया है। इसके अलावा, DISQUS है ... लेकिन क्या होगा यदि हम किसी तृतीय-पक्ष सेवा के उपयोगकर्ता को अपनी वेबसाइट पर एक अलग खाता बनाने के लिए मजबूर किए बिना कुछ अतिरिक्त अधिकार देना चाहते हैं? खासकर अगर हमारे सीएमएस के लिए कोई चमत्कार प्लगइन नहीं है?
मैं इस बारे में बात करूँगा कि कैसे जल्दी और दर्द रहित तरीके से एक विदेशी सीएमएस को प्राधिकरण के माध्यम से बाँधें और रास्ते में किस तरह के पानी के नीचे रेक हैं।

सामग्री

एक उदाहरण के लिए मैं CMS Xaraya में ट्विटर के माध्यम से प्राधिकरण चुनूंगा । प्रदाता की पसंद इसकी लोकप्रियता से निर्धारित होती है। यह सीएमएस तीन कारणों से है: मुझे यह पसंद है, यह बहुत कम ज्ञात है (और, परिणामस्वरूप, स्व-लिखित एक से थोड़ा अलग है) और, अंत में, इसे सही ढंग से डिज़ाइन किया गया है (इसका क्या करना है - यह थोड़ी देर बाद स्पष्ट हो जाएगा)।
ज़ाराया की एमवीसी वास्तुकला ऐसी है कि प्रत्येक पृष्ठ के सभी तत्व संदर्भ के प्रति संवेदनशील हैं। प्रत्येक मॉड्यूल मुख्य सामग्री (उदाहरण के लिए: ब्लॉग प्रविष्टियों, व्यक्तिगत ब्लॉग प्रविष्टियों का फ़ीड), और इसी तरह दोनों को प्रदर्शित करने में सक्षम हो सकता है (या नहीं कर सकता है)। "ब्लॉक", आमतौर पर साइड कॉलम में एम्बेडेड होता है और अन्य मॉड्यूल द्वारा उत्पन्न किसी भी अन्य सामग्री के बगल में दिखाया जाता है। हालाँकि, मैं यहाँ क्रूस पर चढ़ा रहा हूँ - लगभग सभी सीएमएस इतने व्यवस्थित हैं। मैं केवल एक आरक्षण कर सकता हूं कि नीचे दिए गए कोड में एक्सराया के लिए कुछ कार्य विशिष्ट हैं - वे सभी उपसर्ग " xar " से शुरू होते हैं और नाम हमेशा दिखाता है कि वे क्या कर रहे हैं। यह तंत्र की समझ को प्रभावित नहीं करना चाहिए।
हमारा मॉड्यूल कोई "मुख्य" सामग्री प्रदर्शित नहीं करेगा। इसमें एक ब्लॉक होगा, जिसमें या तो एक बटन होगा (उपयोगकर्ता के पास लॉगिन नहीं है):

या लॉगिन के लिए उपयोगकर्ता का व्यवसाय कार्ड:

विधि

हम निम्नलिखित व्यवहार प्रदान करना चाहते हैं:

• यदि उपयोगकर्ता लॉग इन नहीं है - "ट्विटर के साथ लॉगिन" बटन दिखाएं;
• अगर हमें उपयोगकर्ता का पता चलता है - उसका व्यवसाय कार्ड दिखाएं;
• यदि उपयोगकर्ता पहली बार लॉग इन करना चाहता है - तो पारदर्शी रूप से हमारे डेटाबेस में एक "सरोगेट" खाता बनाएं और हमारे सीएमएस की स्थिति पर नियंत्रण दें;
• यदि यह फिर से लॉगिन है (सत्र खराब हो गया है, उदाहरण के लिए, या उसने स्वयं "बाहर निकलें" पर क्लिक किया है) - हमारे डेटाबेस में अपने ट्विटर खाते से उपयोगकर्ता डेटा को अपडेट करें और इसे लॉगिन करें।

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

खाना पकाने की विधि

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

 <img src="/modules/authtwitter/xarimages/darker.png" alt="Sign in with Twitter" style="cursor:pointer;" onclick="popUp('#$url#');" id="loginBtn"/> 

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

  require_once(dirname(__FILE__) . '/../libs/twitteroauth/twitteroauth.php'); require_once(dirname(__FILE__) . '/../libs/twitteroauth/config.php'); /* Build TwitterOAuth object with client credentials. */ $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET); /* Get temporary credentials. */ $request_token = $connection->getRequestToken(OAUTH_CALLBACK); /* Save temporary credentials to session. */ /* NB! The code below is specific to Xaraya! */ xarSessionSetVar('oauth_token', $request_token['oauth_token']); xarSessionSetVar('oauth_token_secret', $request_token['oauth_token_secret']); /* NB! End of specific to Xaraya codepiece. */ /* If last connection failed don't display authorization link. */ switch ($connection->http_code) { case 200: /* Build authorize URL and redirect user to Twitter. */ $url = $connection->getAuthorizeURL($request_token); header('Location: ' . $url); // ⇐ That's why we needed a popup window break; default: /* Immediately return if something went wrong. */ return USER_AUTH_FAILED; } 

ट्विटर हमेशा के लिए प्रत्येक एप्लिकेशन (और उनके लिए हमारा सीएमएस आवेदन है) के लिए प्राधिकरण स्टोर करता है, इसलिए यदि किसी उपयोगकर्ता ने हमारी साइट पर कम से कम एक बार पंजीकरण किया है, तो संक्रमण श्रृंखला को उपयोगकर्ता इनपुट की आवश्यकता नहीं होगी। अगर यह हमारे लिए पहला लॉगिन प्रयास है, तो ट्विटर मानक Allow / Deny के लिए पूछेगा। और अगर उपयोगकर्ता ट्विटर में लॉग इन नहीं है, तो उन्हें पहले लॉगिन करने के लिए कहा जाएगा। इस सब के बाद, यदि उपयोगकर्ता "अनुमति दें" पर क्लिक करता है, तो हम उस पते पर एक रिवर्स रीडायरेक्ट प्राप्त करेंगे जो हमने getRequestToken को दिया था। इसे कैसे संभालना है:

  require_once(dirname(__FILE__) . '/../libs/twitteroauth/twitteroauth.php'); require_once(dirname(__FILE__) . '/../libs/twitteroauth/config.php'); /* If the oauth_token is old—redirect to the connect page. */ if ( isset($_REQUEST['oauth_token']) && xarSessionGetVar('oauth_token') !== $_REQUEST['oauth_token'] ) { xarSessionSetVar('oauth_status', 'oldtoken'); xarRedirectUrl('…'); } /* Create TwitteroAuth object with app key/secret and token key/secret from default phase */ $connection = new TwitterOAuth( CONSUMER_KEY, CONSUMER_SECRET, xarSessionGetVar('oauth_token'), xarSessionGetVar('oauth_token_secret') ); /* Request access tokens from twitter */ $access_token = $connection->getAccessToken($_REQUEST['oauth_verifier']); /* If HTTP response is 200 continue otherwise send to connect page to retry */ switch ($connection->http_code) { case 200: // http://apiwiki.twitter.com/w/page/22554689/Twitter-REST-API-Method%3A-account%C2%A0verify_credentials $content = $connection->get('account/verify_credentials'); default: xarRedirectUrl('…'); } 

अब हमारे पास एक खजाना है - उपयोगकर्ता डेटा जो ट्विटर ने हमें दिया। यह हमारे आवेदन पर उन्हें वापस करने का समय है:

 if(window.opener != null && !window.opener.closed) { window.opener.setCredentials(<?php echo json_encode($content); ?>); } 

हाँ। अब आपके अपने प्राधिकरण प्रणाली के साथ छेड़छाड़ करने का समय है।

गौरैया, हमारे पास आओ

तो, हमारे ब्लॉक को उपयोगकर्ता डेटा प्राप्त हुआ। पहली चीजें पहले - ऊब पॉप-अप विंडो को बंद करें। तब - प्राप्त डेटा के साथ छद्म रूप (या बल्कि, छिपा हुआ फ़ॉर्म) भरें और यह देखने के लिए जाएं कि क्या यह उपयोगकर्ता हमसे परिचित है, या यदि हमें अभी भी उसे अपने डेटाबेस में पंजीकृत करना है:

 function setCredentials(content) { if (popUpObj) { popUpObj.close(); popUpObj = null; } if (content && content.screen_name) { document.getElementById("name").value = content.name; document.getElementById("screenname").value = content.screen_name; document.getElementById("profileimageurl").value = content.profile_image_url; document.getElementById("url").value = content.url; document.getElementById("statustext").value = content.status.text; document.getElementById("description").value = content.description; document.getElementById("profiletextcolor").value = content.profile_text_color; document.getElementById("profilelinkcolor").value = content.profile_link_color; document.getElementById("profilebordercolor").value = content.profile_sidebar_border_color; document.getElementById("doAuthForm").submit(); } } 

हमें उपयोगकर्ता के व्यवसाय कार्ड को उसके पसंदीदा रंगों में खींचने के लिए इन सभी डेटा की आवश्यकता होगी। जैसा कि आप जानते हैं कि प्रपत्र, सादे HTML द्वारा पहले से तैयार किया गया था। यह वह जगह है जहाँ submit होगा:

  extract($args); $user_info = array( 'pass' => $pass, 'screenname' => $screenname, 'name' => $name, 'statustext' => $statustext, 'profileimageurl' => $profileimageurl, 'url' => $url, 'description' => $description, 'profiletextcolor' => $profiletextcolor, 'profilelinkcolor' => $profilelinkcolor, 'profilebordercolor' => $profilebordercolor ); // Check, if the user already exists in our database $userRole = xarGetRole(array('uname' => $user_info['screenname'])); if (!$userRole) { $userRole = xarCreateRole( array( 'uname' => $user_info['screenname'], 'realname' => $user_info['name'], 'email' => '', // Bloody Twitter does not provide emails 'pass' => $user_info['pass'], 'date' => time(), 'authmodule' => 'authtwitter' ) ); } /* Now we are to store user credentials so that when CMS will * proceed with user registration and switch block to * the template for logged in user, we could draw the card */ xarSessionSetVar('user_info', $user_info); 

मेहमानों की प्रतीक्षा में

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

  <div id="twCredentials" class="twcredentials"> <img id="twPhoto" class="twphoto" src="#$user_info['profileimageurl']#"/> <span class="twlogout cuprum"> <a href="&xar-modurl-authsystem-user-logout;"> <xar:mlstring>Logout</xar:mlstring> </a> </span> <img id="twServiceLogo" class="twservicelogo" src="/i/twitbird.png" /> <span id="twScreenName" class="twscreenname cuprum"> <a href="http://twitter.com/#$user_info['screenname']#"> #$user_info['screenname']# </a> </span> <br/> <span id="twName" class="twname ubuntu"> <xar:if condition="empty($user_info['url'])"> #$user_info['name']# <xar:else /> <a href="#$user_info['url']#">#$user_info['name']#</a> </xar:if> </span> <div class="twdescription ubuntu"> <span id="twDescription"> <xar:if condition="empty($user_info['statustext'])"> #$user_info['description']# <xar:else /> #$user_info['statustext']# </xar:if> </span> </div> </div> 

मैं दोहराता हूं, अब हमें कुछ इस तरह देखना चाहिए:

अधिक व्यंजनों

• ट्विटर एपीआई प्रलेखन
• OAuth के बारे में अधिक
• OAuth FAQs