KlugRegister

Overview

Many apps need a second device: a camera and a viewer, a phone and a tablet, a kiosk and an admin phone. Signing in on that second device is where users give up: they have to remember a username, type a password, or wait for an e-mail code.

KlugRegister turns that step into one camera shot. The first device creates a QR code; the second device scans it with a native scanner and the app signs in. The QR code carries whatever your app needs, typically a one-time code from your server, never the password itself.

Both parts are native: QR codes are generated by the system (sharp at any size, as an AIR BitmapData ready to show or to send as PNG by e-mail), and the scanner is a full-screen camera view with your own hint text and cancel button, including the camera permission prompt.

KlugRegister comes with the next release of the PetCam App, our proof of concept: after registration the app shows a QR code and e-mails it as well, and the second device is paired in seconds.

Features

• Create QR codes from any text or URL, returned as BitmapData with a proper quiet zone
• Choose the size in pixels per module, crisp on any screen
• Native full-screen camera scanner with your own hint text and cancel button
• Asks for camera permission and reports when it is denied
• Works in portrait and landscape, on iPhone and iPad
• No third-party libraries, only the system frameworks

Supported platforms

Android is in development. Where a feature is not available, isSupported and isScanSupported return false, so the same code can stay in every app.

Getting started

Add the extension to your application descriptor:

<extensions>
    <extensionID>com.klug.register.KlugRegister</extensionID>
</extensions>

For scanning on iOS, add a camera usage description to the InfoAdditions:

<key>NSCameraUsageDescription</key>
<string>Scan the QR code of your first device</string>

Quick example

import com.klug.register.KlugRegister;
import com.klug.register.KlugRegisterEvent;

var reg:KlugRegister = KlugRegister.getInstance();

// first device: show the QR code (10 px per module)
var bmp:BitmapData = reg.createQRCode( "https://your.server/pair?t=" + oneTimeCode, 10 );
qrImage.source = bmp;

// second device: scan it
reg.addEventListener( KlugRegisterEvent.SCANNED, function( e:KlugRegisterEvent ):void {
    redeem( e.text );   // your server signs the device in
});
reg.addEventListener( KlugRegisterEvent.CANCELED, onCanceled );
reg.addEventListener( KlugRegisterEvent.ERROR, onError );   // e.errorCode: denied | nocamera

if ( reg.isScanSupported )
    reg.scanQRCode( "Point the camera at the code on your first device", "Cancel" );

API overview

Requirements