jQuery plugin for Twitter OAuth via popup window (Facebook style)

Disqus and some applications are using Twitter OAuth, but their user flow is not sequential single window process. A child window comes up, then it shows twitter.com and user can click Deny/Allow through that popup. When the user hits the deny or allow button, the popup will be closed immediately and the parent window will be reloaded. I couldn’t find a jQuery plugin for that, so wrote a tiny one.

Updates:
Current Twitter shows ‘Authorize app’ and ‘No, thanks’ button respectively instead of Deny/Allow.

When you make a complete script, you may want to use PHP with PECL_OAuth. (% pecl install oauth-beta)

Here are sample files:
index.php

<!--?php 
session_start();
?--><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="jquery.oauthpopup.js"></script><script type="text/javascript">// <![CDATA[
$(document).ready(function(){
    $('#connect').click(function(){
        $.oauthpopup({
            path: 'connect.php',
            callback: function(){
                window.location.reload();
            }
        });
    });
});
// ]]></script>
<input id="connect" type="button" value="Connect with Twitter" />
 <a href="signout.php">Sign Out</a>

connect.php

<!--?php 
define('TWITTER_CONSUMER_KEY',      '***');
define('TWITTER_CONSUMER_SECRET',   '***');
define('TWITTER_REQUEST_URL',       'https://api.twitter.com/oauth/request_token');
define('TWITTER_ACCESS_URL',        'https://api.twitter.com/oauth/access_token');
define('TWITTER_AUTHORIZE_URL',     'https://api.twitter.com/oauth/authorize');
 
session_start();
if (!isset($_SESSION['twitter'])) {
    setOAuth();
    $_SESSION['twitter'] = getUserInfo($_SESSION['oauth_token'], $_SESSION['oauth_token_secret']);
}
 
function setOAuth()
{
    //  pecl_oauth
    $oauth = new OAuth(TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET, OAUTH_SIG_METHOD_HMACSHA1, OAUTH_AUTH_TYPE_FORM);
    $oauth--->enableDebug();
    try {
        if (isset($_GET['oauth_token'], $_SESSION['oauth_token_secret'])) {
            $oauth-&gt;setToken($_GET['oauth_token'], $_SESSION['oauth_token_secret']);
            $accessToken = $oauth-&gt;getAccessToken(TWITTER_ACCESS_URL);
            $_SESSION['oauth_token'] = $accessToken['oauth_token'];
            $_SESSION['oauth_token_secret'] = $accessToken['oauth_token_secret'];
 
            $response = $oauth-&gt;getLastResponse();
            parse_str($response, $get);
            if (!isset($get['user_id'])) {
                throw new Exception('Authentication failed.');
            }
        } else {
            $requestToken = $oauth-&gt;getRequestToken(TWITTER_REQUEST_URL);
            $_SESSION['oauth_token_secret'] = $requestToken['oauth_token_secret'];
            header('Location: ' . TWITTER_AUTHORIZE_URL . '?oauth_token=' . $requestToken['oauth_token']);
            die();
        }
    } catch (Exception $e) {
        var_dump($oauth-&gt;debugInfo);
        die($e-&gt;getMessage());
    }
}
 
function getUserInfo($token, $secret)
{
    $oauth = new OAuth(TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET, OAUTH_SIG_METHOD_HMACSHA1, OAUTH_AUTH_TYPE_URI);
    $oauth-&gt;setToken($token, $secret);
    $oauth-&gt;fetch('http://twitter.com/account/verify_credentials.json');
    $buf = $oauth-&gt;getLastResponse();
    return json_decode($buf, true);
}
 
?&gt;<script type="text/javascript">// <![CDATA[
window.close();
// ]]></script>

signout.php

Hope it helps :)

This entry was posted in Create and tagged , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.