Wednesday, January 18, 2012

HTML5 series part 1: localStorage

HTML5 introduces client-side storage API which aims to cover the limitations of cookie and provide  much more.  in this article, i am going to explore about browser cookies, their limitations and how HTML5 overcomes these with client-side storage.

Legacy of HTTP cookie:
An HTTP cookie is a set of key/value pairs that an web server requests web browsers to store on local disk. when browser makes further requests to the server, it wraps all the cookie information in HTTP request header as long as the following conditions are met: ( ref: rfc2109)
1.The cookie is not expired.
2. The requested domain is same or subdomain of cookie storing domain .
3. The requested path is same of subpath of cookie storing domain.

browser  deletes cookie data when cookie expires.

Limitations of cookie:
 1. most current browsers limit cookie size to 4KB.
 2. Number of cookies in a domain is limited to 300
 3. when a site uses cookie, then every request must include all cookie data in HTTP header which is a performance issue.
4. cookie data is stored as plain text in client disk which can cause cookie/session hijacking.
5. cookie cannot differentiate between two different instances of same web application running in two different tabs or windows.

Age of client-side storage:
According to the web storage specification, web storage is intended to solve two cases that are not handled well by cookies:
1. The first is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.
2. The second storage mechanism is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, web applications may wish to store megabytes of user data, such as entire user-authered documents or a user's mailbox, on the client side for performance reasons.

Unlike cookie, web storage data is stored in the client by the browsers based on retention policies. Benefits are obvious:
1. data doesn't pass through HTTP request/response. bandwidth is saved.
2. as data isn't passed through network, this is relatively secure.this notion of security has some other advantages. This means that due to the inherent security feature, HTTPs connection can use plain HTTP. Because it wont need  to encrypt data since data is stored in client-side. Since HTTPs has only 10% of performance comparing with HTTP.
3. no download time means better user experience
4. with the help of web storage, surfing same web sites using more than one account simultaneously wont be a tough task.  You can experience this right now on google sites.
5. There is no 4KB limitation, web site will enjoy much more flexibility in storing large data in client.

localStorage API:
localStorage is a handy API included in HTML5 spec that gives web developers any easy to use 5MB store on the client's local machine. It's a simply key/value dictionary that allows developers to store primitive data types like integer, string etc. storing objects requires serialization into json format. localStorage doesn't provide transaction facilities. So wise usage can save you from race conditions.
data storing and retrieval is simple:

//save a value to localStorage
localStorage.setItem('key', 'value');
localStorage.key = value;
myObject = {a:1, b:2, c:3};
localStorage.setItem('key', JSON.stringfy(myObject));

//retrieve a value 
var value = localStorage.key;
var value = locaStorage.getItem('key');
var myStorageObject = JSON.parse(localStorage.getItem("key"));
//reset storage

//to remove an item

Important features of localStorage:
1. localStorage values on Secure (SSL) pages are isolated:
browsers isolates localStorage values based on HTML5 origin (scheme +hostname+unique port). so is separated from firefox provides  globalStorage doesn't follow this distinction. 
2. sessionStorage values can survive browser restarts if browser impements session restore feature.
3. localStorage values created in "incognito" or private browsing mode are isolated. they will be gone as soon as the session ends.
4. localStorage quota for a site is 5 MB. it cannot be expanded. alternative means are available in the form of indexeddb and web SQL database.
//check if quota limited exceeded.
     localStorage.setItem('key', value);
      if(e== QUOTA_EXCEEDED_ERR) alert(file is too large);
5. for older IE browsers, localStorage feature can be implemented using IE-only feature userData.
//checking if localStorage support is available.
var supported = false;
    if(window['localStorage']!=null) supported = true;
}catch (e){
     supported = false;

for browser support issue, visit

Monday, January 16, 2012

Facebook PHP SDK: Acquiring anytime access permission for your application

Facebook has exposed a lot of its core functionality through Graph API.  Third party application developers now can quite easily develop application that live on Facebook's gigantic database of user profile information.But except for the public information , applications are required to authenticate by the user to get access. facebook uses OAuth 2.0 protocol for authentication and authorization and supports a number of different OAuth flows that can be used to authorize and authenticate third party mobile/desktop applications and websites. but regardless of type of the flows, Facebook's OAuth implementation involves 3 steps: user authenticationapp authorization and app authentication (more about this can be found in facebook developer site). once these steps are complete, third party application is issued an "user access token" which enables the application to gain access to user infobase on users' behalf. By default,  user access token expires after 2 hours which is not good for site owners who want to show their facebook albums etc. on their sites. in that case, site owner has to be careful enough to authenticate once after every 2 hours which is annoying.  Guys at Facebook solved this  in a way they call "offline_access" permission. user access token with offline access permission doesn't expire. lets take a look at how offline access can be obtained and utilized in your application.

the easiest way to play around with Facebook Graph API is to use SDK. I'll use PHP SDK. First grab the SDK and include into your php file and instantiate SDK's Facebook class.

            $config = array();
            $config[‘appId’] = 'YOUR_APP_ID';
            $config[‘secret’] = 'YOUR_APP_SECRET';            
            $config['fileUpload'] = false;
            $config['cookie'] = true; // don't forget to enable cookie.
            $facebook = new Facebook($config);        
Once you have Facebook object, you can begin authentication process. Luckily SDK handles all the 3 steps of authentication on your behalf. all you need to do is to initiate the process and SDK will do the rest. As starter, we check if anyone is already logged in or not.
          $userId = $facebook->getUser();
if no one is logged in then above statement will return 0 otherwise it will return current user's  id.
          if($userId) {
                     // if user is logged in, we try to get his/her profile information
                     $user = $this->facebook->api('/me', 'GET');
                     // url you want facebook to redirect after logout
                     $logouturl = 'YOUR_SITE_URL';                
                     $logoutUrl = $this->facebook->getLogoutUrl(array('next'=>$logouturl));
                catch(FacebookApiException $e){
                     //url you want facebook to redirect after login.
                     // a note of coution though, for security reason you need to inform facebook about this
                     // URL in your developer profile page.
                     $loginurl = 'YOUR_SITE_URL';

                     $params = array(
                              //This is where you request offline access token
                              scope => 'user_photos, friends_photos,offline_access',
                             redirect_uri => $loginurl

                    $loginUrl = $this->facebook->getLoginUrl($params);
once the authentication process is complete, you can get the access token in the following way:
                    $accessToken = $facebook->getAccessToken();
You should store the token for use across sessions. You can do the subsequent API calls as :

Saturday, January 14, 2012

End User License

End User License Agreement
Copyright, binnash
All rights reserved.

By using the software, you agree to be bound by the terms of this license. If you have any questions
about the terms below, please contact for clarification.

1.) You must have paid the developer to use the software.

2.) The copyright holder retains all intellectual property rights to the software.

3.) You are granted the right to install the software on as many websites as you want, limited only to websites you own.

4.) You are granted the right to freely modify the software for your own personal use.

5.) You may not use code snippets from the software elsewhere.

6.) You may not re-distribute (either freely, or for any kind of compensation) the software, in whole or in part, to any 3rd party.

7.) You expressly acknowledge and agree that use of the software is at your sole risk. No warrantly is provided, either express or implied.