Clever Geek Handbook

Twitterを介したサイトでのエンドツーエンド認証

各Vasisualiy Sverdyshchenkoの個人ページの各フォーラムが個別の登録を必要とする時代は過ぎ去りました。

OpenID / OAuthプロバイダーを代表して、ほぼどこでもコメントを残すことができるという事実に徐々に慣れてきています。 また、Twitter / Facebook / Google / Yandex / Vkontakteのエンドツーエンド認証用のプラグインは、すべての一般的なCMS用に長い間書かれています。 さらに、 DISQUSがあります...しかし、サードパーティサービスのユーザーに、Webサイトに別のアカウントを作成することを強制せずに、追加の権限を与える場合はどうでしょうか。 特に、CMS用の奇跡のプラグインがまだない場合はどうでしょうか？

エキゾチックなCMSへの認証を迅速かつ簡単に結び付ける方法と、どのような水中レーキがあるかについて説明します。



Xaraya + Twitter







成分



例として、CMS Xarayaの Twitterを介して承認を選択します。 プロバイダーの選択は、その人気によって決まります。 このCMSには3つの理由があります：私はそれが好きで、あまり知られていない（その結果、自分で書いたものとほとんど変わらない）そして最後に、正しく設計されている（どういう関係があるのか​​-少し後で明らかになる）。

XarayaのMVCアーキテクチャでは、各ページのすべての要素がコンテキストに依存します。 各モジュールは、メインコンテンツ（たとえば、ブログエントリのフィード、個々のブログエントリ）などの両方を表示できる（またはできない）場合があります。 「ブロック」。通常は横の列に埋め込まれ、他のモジュールによって生成された他のコンテンツの横に表示されます。 しかし、私はここで十字架につけています-ほとんどすべてのCMSはそのように配置されています。 以下のコードには、Xarayaに固有の機能がいくつかあることを予約することができます。それらはすべて接頭辞「 xar



」でxar



、名前は常にその実行内容を示します。 これはメカニズムの理解に影響を与えるべきではありません。

このモジュールでは、「メイン」コンテンツは表示されません。 1つのブロックで構成され、その中にボタンが1つあります（ユーザーにはログインがありません）。

Twitterでサインインする

またはログイン用のユーザーの名刺：

mudasobwa：ログイン

レシピ



次の動作を提供する必要があります。



主な問題は、 OAuthがサードパーティのサイト（この場合はtwitter.comの認証プロバイダーのサイト）への二重リダイレクトを意味することです。 したがって、CMSのブロックからは、このように実行することはできません。トークンと承認を行った後、現在のセッションのコンテキストは失われます。 そのため、ポップアップウィンドウを使用する必要があります（見苦しいことはわかっていますが、どうすればよいですか）。

調理方法



私のCMSは、単純な放浪者とログイン用のユーザー用に異なるブロックテンプレートを表示できます。

最も単純なものから始めましょう-放浪者用のブロックテンプレートを作成しましょう。 ボタンは1つだけで、小さなスクリプトがあります。 

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


奇妙なことに、 popUp



関数はポップアップウィンドウを開き、承認の難しいパスに進みます。 私はAbraham Williamsから認証コードを借りました。これはTwitter API Wikiにあります。 最初のレベルは次のようになります。 

  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; }


Twitterは各アプリケーション（およびそれらのCMSがアプリケーションです）の認証トークンを永久に保存するため、ユーザーがサイトに少なくとも1回登録した場合、移行チェーンはユーザー入力を必要としません。 これが当社への最初のログイン試行である場合、Twitterは標準の許可/拒否を要求します。 また、ユーザーがTwitterにログインしていない場合、最初にログインするよう求められます。 このすべての後、ユーザーが「許可」をクリックすると、 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('…'); }


今、私たちには宝があります -Twitterが私たちに与えたユーザーデータです。 それらをアプリケーションに戻す時が来ました： 

 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);




ゲストを待っています



ここで、CMSがブロックのテンプレートを別のオプション、つまりログイン用のユーザー用に変更したいという事実に備える必要があります。 私はこのコードを人間的に作成するのが面倒でしたが、すべて同じように、すべてのロジックをすでに作成しました。 厳密に判断してください:-) 

  <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>


繰り返しますが、次のように表示されるはずです。

mudasobwa：ログイン



その他のレシピ





More articles:


All Articles