Twitter API v1.1 Front-end Access

Twitter is retiring their v1 API in March of 2013. This means all future API integrations must use the v1.1 API which requires authentication on any request (read or write). This is pretty straightforward using a PHP OAuth library or any OAuth server side implementation, but what if you wanted to implement something client-side? This can be accomplished by using the Yahoo! Query Language (YQL) to do the heavy lifting for us. A Twitter app is necessary to do any OAuth authentication. Go to https://dev.twitter.com/apps and create a new Twitter application. Once your application is created, click the "Create my access token" button to link this with your Twitter account. You will then have a Consumer Key, Consumer Secret, Access Token and Access Token Secret for this application that is associated with your Twitter account (see an example in the screenshot below). Make a note of these values. Next, create a text file that contains the keys from your application (leave the env line as it is).

env 'http://datatables.org/alltables.env';
set oauth_consumer_key = "kSCAs8K62d60v2RjT8Q" on twitter;
set oauth_consumer_secret = "oq1WlA0itYPoKqkg1VnLdPcrmq5qugXh0aYV62oIA" on twitter;
set oauth_token = "14409872-ygtLVnhRr8ABSioMu28DHD5iJ6Yj8U3CEozxlTwsD" on twitter;
set oauth_token_secret = "bqY5TXGSGwy72TmLgPgYz1jpW1riExHYNJVcqPIFCUE" on twitter;

Upload the text file to an accessible URL and go to the YQL console. Run the following query in the console replacing NAME and URL with whatever name you want to reference the stored data by and the url to the text file you just uploaded.

INSERT INTO yql.storage.admin (name,url)
VALUES ("NAME","URL")

The result of this query will contain an node (ex. store://my.host.com/name). **Make note of the value of this node.**Your application's OAuth keys are now stored in a database table that can be accessed from another YQL query. This is important because YQL also has community tables that allow for Twitter API requests. The following JavaScript (yes, some jQuery is used for simplifying the AJAX call) requests recent tweets from the @resource Twitter account and uses the stored keys for authentication. Just change the env value (line 14) to the the value of the node that you took note of earlier.

/* Set up the YQL query (http://developer.yahoo.com/yql/) */
var query = 'SELECT * FROM twitter.status.timeline.user '+
            'WHERE id="@resource" ';

/* Options for the YQL request
    * q = your query
    * format = json or xml
    * env = environment to pull stored data from
    */
var dataString = {
    q: query,
    diagnostics: true,
    format: 'json',
    env: 'store://my.host.com/name'
};

/* make the AJAX request and output to the screen */
$(document).ready(function() {
    $.ajax({
        url: 'https://query.yahooapis.com/v1/public/yql',
        data: dataString,
        success: function(data) {
            $('#returnData').html(JSON.stringify(data, undefined, 2));
        }
    });
});

That's pretty much all there is to making client-side Twitter API read requests using YQL to do the rest of the heavy lifting. A couple of things to keep in mind:

1. The security on this is not great (it's more security through obscurity). Anyone can use the env link to execute read requests, but they don't directly have access to your keys. It's always better to implement this API server side if you have access to do so.
2. Both APIs rate limit the endpoint calls. YQL has a 2,000 calls per hour per IP limit to their public API. Here is an explanation of Twitter's rate limits. Caching should be implemented to avoid hitting these limits.

Here is the Codepen Link for a working example. This concept was adapted from Derek Gathright's blog post.