QR codes for bank transfers

There is this weekly repetitive task I really hate: paying bills. Obviously because I prefer money going in the other direction, but also ’cause it’s so incredibly boring and time-consuming that for every transfer you have to type in the amount, the reference number and often the beneficiary details as well.

ScashingA few weeks ago, the Belgian bank KBC launched an app that allows you to manage your account on your phone. Let’s ignore for a second the fact that their password requirements force you to come up with an unsafe password, and let’s focus on a cool built-in feature called “scashing” instead: you can complete a money transfer between you and someone else using nothing but your phone (iOS or Android). The app makes use of a QR code to present all required data so that the other person can scan it with his own phone, using that same application. That’s all it takes. Really simple and convenient!

Now coming back to my initial sighing. Why can’t they apply that same concept to bills/invoices and print a QR code on each of those containing the data you would normally have to type in yourself. Then it would be just a matter of scanning, confirming, and done! I would love to pay my bills like that!
I can imagine bank managers are having a tough time right now struggling with their self-assembled Ponzi scheme, but I have good hope that in the near future one of them will see the light and eventually launch this idea.

QR code generator update

You may have noticed it already, but the QR generator has been updated. Except for the aesthetic changes, it is now possible to create codes for data other than url’s: general text, phone number, email address, meCard, vCard and WiFi settings. The same export options are still available: PNG, SVG, PDF and EPS.

It’s also making use of the latest version of the ZF Matrixcode component which will make it easier to add more features and functionality in the future.

Check it out at http://qrcode.littleidiot.be

Releasing Zend Framework QR / Matrixcode library

I had promised it for quite a while, and unfortunately things got delayed time after time, but finally I’ve managed to wrap things up and complete my Zend Framework module for generating QR codes in both raster and vector format.
In the end I refactored almost all the code to be more consistent with the architecture of the existing Zend_Barcode library (with a couple of differences however), so that took also a bit longer than anticipated.

I’ve released it as an open-source project on Google Code, so feel free to check it out:
http://code.google.com/p/zend-framework-matrixcode-module

You can also download the latest revision (r9) right here.

Any feedback is appreciated, and if you’d like to contribute, please let me know. It would be nice if other matrixcode formats could be added, f.i. Aztec Code or Data Matrix. The renderers do not need any changes as long as the 2D code format consists of square modules. Just pass them a two-dimensional array with boolean values and you should get the expected result.

Also be sure to check the Issues page as there is still a known bug with the encoding of a specific kind of string. Still need to figure that one out.

Hope you enjoy it.

AJAX requests and expired sessions

If you ever have developed secure web applications that make use of AJAX, you have most likely been confrontend with situations where an AJAX request occurs after the session has timed out. Where the server is supposed to return some HTML of JSON, you get a ’401 Unauthorized’ or an empty response depending on how you have it implemented. The question is then how to deal with that kind of responses. You could read the headers of the response and redirect when a 401 status is detected, but I can’t tell for sure that there isn’t/won’t be a browser that will catch those errors and handle it in a way that messes up the user experience. Also, you don’t want to check explicitly for such error after every AJAX request.

So the solution I implemented is explained below. I will show you how it can be done with Symfony and jQuery, but it should be straightforward to achieve the same with other frameworks (like with a Zend Framework Front Controller Plugin for example). What really matters is the idea behind the solution.

Server side:

class frontendConfiguration extends sfApplicationConfiguration
{
  	public function configure()
  	{
  		// add event listener
  		$this->dispatcher->connect('context.load_factories', array(
      			$this, 'isAuthenticatedAjaxRequest'
    		));
  	}

  	/**
  	 * This method checks if an Ajax request comes in and
  	 * if the session has not expired.
  	 * If so, a custom header is returned (a standard 401
  	 * might get trapped and handled by the browser)
  	 * and a javascript "ajaxSuccess" listener will detect this
  	 * header and redirect to the webroot.
  	 *
  	 * @param sfEvent $event
  	 */
  	public function isAuthenticatedAjaxRequest(sfEvent $event)
  	{
  		$context = $event->getSubject();
  		$request = $context->getRequest();
  		if($request->isXmlHttpRequest()) {
  			$user = $context->getUser();
  			if($user->isAuthenticated() === false) {
  				header('NOT_AUTHORIZED: 499');
 				exit();
  			}
  		}
  	}
}

So this is what we do here:
Before the request is being dispatched, we perform an additional check on the request. One way to implement this in Symfony is to connect a method to a certain event, in this case the “context.load_factories” event. The reason why we wait until the factories are loaded is because we will need the session data, which depends on the Storage factory.
In the triggered method, we check if concerns an AJAX request. If that’s the case, we verify if the user is authenticated and if not, we return a custom header ‘NOT_AUTHORIZED’ with status number 499. By using a custom header, we can be sure it will not be trapped by the browser.

Client side:

I will be using jQuery here basically because it’s my favorite Javascript framework.

$(function() {
	$('body').bind(
		'ajaxSuccess', 
		function(event, request, settings) {
		if (request.getResponseHeader('NOT_AUTHORIZED') === '499') {
   			window.location = '/';
		};
	});
});

In jQuery, by binding to the “ajaxSuccess” event, we can make sure that every AJAX response will trigger our function. All this function does is check if our custom header is set and if not, redirect the browser to the webroot. That would be a regular browser request which can be dealt with like any other normal request.

If you would have any remarks or feedback on how to further improve this, I’ll be happy to hear it from you.

Syncing multiple Google calendars on iPad

Today, when I was trying to have my agenda better organized by splitting it up in several Google calendars, I found out that only one primary calendar got synced with my iPad,  the other ones were ignored. That didn’t seem to make much sense, but after some Google searches it turned out many people encountered the same problem. Luckily there is a workaround, but even though I followed the instructions step by step and went through all the comments, I just couldn’t get it set up. Eventually I figured out that it had something to do with the language. When your browser requests for a page, it always sends along the language your browser has been configured with, in my case Dutch. Apparently the procedure described in the workaround only works when Google detects English. However you can force Google to use another language by passing it through the url, and that’s how I got it set up eventually.

To save you the trouble, this is how it works:

  1. Open Safari on you iPad and browse to http://m.google.com/?hl=en
  2. On that page, look for “Google Apps user? Tap to configure for your domain.” and click it. A dialog will open where you can fill in the domain of your Google Apps. Fill in the domain and press “Go”.
  3. You should now see a green box at the top, containing a “Sync” button. Push it. You might have to login now before you can continue.
  4. If you would not see the “Manage devices” page now listing the iPhone and the iPad, then go to the location bar in your browser, and remove the last part until you’re left with “…/iconfig/”. Now add “?hl=en” to the end, and then push “Go” on your keyboard. This should take you to the page where you can manage the devices.
  5. Select the iPad device, and on the next screen you will be able to select the other calendars you want to sync. Press “save” when done.
  6. That’s it, just wait for a minute, open Calendar on iPad, and you should see all your calendars appear.
Go to Top