We’ve just recently deployed a custom endpoint to allow Twitter for iPhone users to post their pics through PicLyf.

When you attach an image to a tweet, Twitter for iPhone will upload that image to the image service of your choice. It allows you to choose from various image services (e.g. yFrog, Twitpic, TweetPhoto) or a custom image service. In our (PicLyf) case, it was custom. We made a custom endpoint: http://api.piclyf.com/twitter. Using this url as the custom image service, attached images will be uploaded to the user’s PicLyf account.

Implementation

This functionality works through the use of OAuth Echo. From Twitter:

OAuth Echo is a means to securely delegate OAuth authorization with a third party while interacting with an API. Within the Twitter ecosystem, we use OAuth Echo as a means to allow your application to use services such as Twitpic and yfrog.

You may want to read about OAuth Echo first. Basically, Twitter for iPhone sends you the image along with the OAuth credentials of the user who wants to upload the image. Note that the OAuth credentials also includes the app’s consumer key. What you’ll have to do is use these credentials and verify them with the Twitter API. If the verification succeeds, you will receive the user’s Twitter information. You may then save the image in your server and link it with the user’s Twitter account. Lastly, you will have to return the correct response to Twitter for iPhone specifying the url where the image can be viewed:

<mediaurl>http://foo.com/bar/pic-url.html</mediaurl>

Sample code in PHP

Here is a sample class which encapsulates the OAuth Echo process:

class TwitterOAuthEcho
{
  public $verificationUrl = 'https://api.twitter.com/1/account/verify_credentials.json';
  public $userAgent = __CLASS__;

  public $verificationCredentials;

  /**
   *
   * @var int
   */
  public $resultHttpCode;
  /**
   *
   * @var array
   */
  public $resultHttpInfo;
  public $responseText;

  /**
   * Save the OAuth credentials sent by the Consumer (e.g. Twitter for iPhone, Twitterrific)
   */
  public function setCredentialsFromRequestHeaders()
  {    
    $this->verificationCredentials = isset($_SERVER['HTTP_X_VERIFY_CREDENTIALS_AUTHORIZATION']) 
      ? $_SERVER['HTTP_X_VERIFY_CREDENTIALS_AUTHORIZATION'] : '';
  }

  /**
   * Verify the given OAuth credentials with Twitter
   * @return boolean
   */
  public function verify()
  {
    $curl = curl_init($this->verificationUrl);
    curl_setopt($curl, CURLOPT_USERAGENT, $this->userAgent);
    curl_setopt($curl, CURLOPT_HEADER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HTTPHEADER, array(
        'Authorization: ' . $this->verificationCredentials,
      ));

    $this->responseText = curl_exec($curl);
    $this->resultHttpCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    $this->resultHttpInfo = curl_getinfo($curl);
    curl_close($curl);

    return $this->resultHttpCode == 200;
  }
}

The setCredentialsFromRequestHeaders method saves the OAuth credentials sent by the consumer (e.g. Twitter for iPhone, Twitterrific). These credentials will be used in the verify method which sends the verification request to Twitter.

Using the class above, your custom image service page (e.g. http://api.piclyf.com/twitter) should handle the request like this:

$oauthecho = new TwitterOAuthEcho();
$oauthecho->userAgent = 'My Custom Image Service App 1.0';
$oauthecho->setCredentialsFromRequestHeaders();
if ($oauthecho->verify()) {      
  // Verification was a success, we should be able to access the user's Twitter info from the responseText.
  $userInfo = json_decode($oauthecho->responseText, true);
  $twitterId = isset($userInfo['id']) ? $userInfo['id'] : null;      
  // You can use $userInfo or $twitterId above to maybe check if you have a record of this user
  // in your db.

  // You can access the uploaded image using $_FILES. Save it and create a url where it can be accessed.

  // Return the image url back to the consumer
  $imagePageUrl = 'http://somwhere.com/image1';
  echo '<mediaurl>' . $imagePageUrl . '</mediaurl>';

} else {
  // verification failed, we should return the error back to the consumer
  $response = json_decode($oauthecho->responseText, true);      
  $message = isset($response['error']) ? $response['error'] : null;      
  if (!headers_sent())
    header('HTTP/1.0 ' . $oauthecho->resultHttpCode);
  echo $message;
}

The code above is just a sample and your final code will look very different especially if you’re using a framework. I’ve also left out the part where you’ll get the image from $_FILES and save/process it. That is beyond the scope of this article.

Notes

The note in Twitter for iPhone’s custom image service screen says you can get more (developer) info in this url: http://developer.atebits.com. As of this writing, the information on that page is no longer accurate. Twitter for iPhone no longer sends you the user’s username and password. The info at Twitterrific is more accurate. And yes, if your service works for Twitter for iPhone, it should work on Twitterrific too.

Further reading:

• Creating A Custom Image Upload Service For Tweetie (Twitter For iPhone) Using ColdFusion
• Using OAuth Echo

If it were just me, I’d have built PicLyf using Ruby to make it more exciting. But there’s the city talent pool we had to think of. Currently, it’s hard to find good PHP developers. I reckon it’ll be more hard to find those who know Ruby.

Requirements

• Download the extension from the Yii Framework extension page or GitHub.
• Install Firebug and FirePHP plugins for Firefox.
• Enable output_buffering in php.ini.

Installation

1. Download and extract the “shiki” folder to your extensions directory. This is usually /protected/extensions.
2. Download the FirePHP core class and put it somewhere in your /protected directory. I usually put these files in /protected/vendors.
3. Modify your config file to include this LogRoute class and set the fbPath property to the path of fb.php. Use a Yii alias (e.g. application.vendors.FirePHPCore031.lib.FirePHPCore.fb):

config file code (e.g. /protected/config/main.php)

'log'=>array(
    'class'=>'CLogRouter',
    'routes'=>array(
        // the default (file logger)
        array(
            'class'=>'CFileLogRoute',
            'levels'=>'error, warning',
        ),
        // the FirePHP LogRoute
        array(
            'class' => 'ext.shiki.firePHPLogRoute.ShikiFirePHPLogRoute', // "ext" alias points to /protected/extensions
            'fbPath' => 'application.vendors.FirePHPCore031.lib.FirePHPCore.fb', // set path to fb.php
        ),
    ),
),

Usage

Once you’ve got the extension setup in the config, you can use Yii’s logging methods to log messages to FirePHP.

// logging an INFO message (arrays will work and looks awesome in FirePHP)
Yii::log(array('username' => 'Shiki', 'profiles' => array('twidl', 'twitter', 'facebook')), CLogger::LEVEL_INFO);

// logging a WARNING message
Yii::log("You didn't setup a profile, are you really a person?", CLogger::LEVEL_WARNING);

// logging with a CATEGORY (categories are displayed as "labels" in FirePHP -- just an additional info text)
Yii::log('Profile successfully created', CLogger::LEVEL_INFO, 'application.user.profiles');

// tracing simple text
Yii::trace('Loading application.user.profiles.ninja', 'application.user.profiles');

// logging an ERROR
Yii::log('We have successfully determined that you are not a person', CLogger::LEVEL_ERROR, 'Any category/label will work');

First off, all credits go to this guy. I’m just listing the steps on how I did it in Windows 7 with PHP 5.3. Also, I tested this using WampServer but I believe it should work on any PHP install.

Install memcached

• Download the Memcached Win32 library here: http://code.jellycan.com/memcached/. Extract the downloaded archive file in a directory (e.g. c:\memcached). There should be a memcached.exe in there.
• Run a command prompt as an administrator. Some info on how to do that here.

• Install memcached as a service. Go to the memcached directory, type and run:

  memcached -d install
  

• Start the memcached service by running:

  memcached -d start
  

Install PHP Memcache extension (php_memcache.dll)

• Chances are you don’t have php_memcache.dll in your PHP extensions yet. You can download a build of it here. Make sure to download the correct one for your system. Mine was 32bit and PHP 5.3 so I used this: php_memcache-cvs-20090703-5.3-VC6-x86.zip. The archive should contain php_memcache.dll. Extract the archive to your php extensions directory. On my system (WampServer), this was C:\wamp\bin\php\php5.3.0\ext.

• Edit php.ini, add this line to enable the extension:

  extension=php_memcache.dll
  

  This is a little easier for WampServer users because there’s a menu for enabling extensions ^_^x

Test

Test the installation using the sample PHP code here: http://www.php.net/manual/en/memcache.examples-overview.php.

The problem now is Zend Studio doesn’t seem to support this kind of setup. At least, that’s what I concluded after so many hours of googling. Then I found this super awesome article. We can use Putty! Or just plain ol’ Terminal on a Mac (Linux should be the same I think).

Tools needed

Of course you need Zend Studio for Eclipse. You just need Putty if you’re on Windows. You’ll just need the already available/installed Terminal on a Mac (it’s in Applications > Utilities).

Proxy setup

Open up Putty/Terminal. Enter this into the console:

ssh -D 8080 username@proxydomain.com

The “8080″ should be an unused port on your machine. In most cases, port 8080 is fine. The “username” should be the user name you need to login to the proxy server (ie proxydomain.com). You should be prompted with the password after entering this command. This will create a tunnel on the port 8080 where all HTTP traffic will go through the proxy server. That is, if an application uses the port 8080 as a proxy. This won’t have any effect on your current applications (i.e. browsers) unless you modify your settings to use this proxy. Please note that you’ll have to keep the terminal window open so your proxy session won’t be destroyed. There are probably other ways to make it work without the window left open but I’m content with this.

Modifying Zend Studio settings

Since we now have a proxy available, we need to instruct Zend Studio to use it.

1. Open Zend Studio.
2. Go to Preferences (located under the Application menu on Mac and under Window on Windows)
3. Navigate to General > Network Connections
4. Set the proxy setting to Manual proxy configuration. And enter 127.0.0.1 in the SOCKS proxy field and 8080 on the Port field beside that.

Your setup should look something like this:

Zend Studio Network Settings

Save the settings and you should be ready to open up a connection to the target server (in this case, the main development server). Create a remote connection to your target server like you normally would. I couldn’t discuss that here but this might help.

Other References

• How To: Surf Securely with an SSH Tunnel
• Use SSH to Create an HTTP Proxy
• Use PuTTY as a secure proxy on Windows
• Zend Studio Remote Systems View