概要
多くのアプリは2台目のデバイスを必要とします。カメラと視聴端末、スマートフォンとタブレット、キオスクと管理者用スマートフォンなどです。ユーザーが諦めてしまうのは、その2台目でのサインインです。ユーザー名を思い出し、パスワードを入力し、メールコードを待たなければなりません。
KlugRegister は、その手順をカメラでの1回の撮影に変えます。1台目のデバイスがQRコードを生成し、2台目のデバイスがネイティブスキャナーで読み取ると、アプリがサインインします。QRコードには、アプリが必要とするもの(通常はサーバーが発行するワンタイムコード)を載せ、パスワード自体は載せません。
どちらもネイティブです。QRコードはシステムが生成し(どんなサイズでも鮮明で、AIR の BitmapData としてそのまま表示できます)、スキャナーもネイティブです。iOS ではお客様独自のヒントテキストを表示できる全画面のカメラビュー、Android では Google のコードスキャナーで、カメラ権限がまったく不要です。
KlugRegister は、実証の場である当社のアプリの現行リリースで使われています。登録後にアプリがQRコードを表示し、ストアからアプリをインストールした直後でも、2台目のデバイスが数秒でペアリングされます。
機能
- 自己完結型:ANE 1つで完結し、コアライブラリや依存 ANE の追加は不要
- 任意のテキストやURLからQRコードを生成し、適切なクワイエットゾーン付きの BitmapData として返します
- モジュールあたりのピクセル数でサイズを指定でき、どんな画面でも鮮明に表示
- 独自のヒントテキストとキャンセルボタンを備えた、ネイティブの全画面カメラスキャナー
- カメラ権限を要求し、拒否された場合は通知
- Android:Play services の Google コードスキャナーを使用し、カメラ権限は不要
- 縦向きでも横向きでも、スマートフォンでもタブレットでも動作
- iOS と macOS:システムフレームワークのみ。Android:ZXing と Google コードスキャナー(アプリのパッケージ化時に自動的に解決)
対応プラットフォーム
機能が利用できない環境では、isSupported と isScanSupported が false を返すため、同じコードをすべてのアプリにそのまま残せます。
はじめに
アプリケーション記述子に拡張機能を追加します:
<extensions>
<extensionID>com.klug.register.KlugRegister</extensionID>
</extensions>
iOS でスキャンするには、InfoAdditions にカメラの使用目的の説明を追加します:
<key>NSCameraUsageDescription</key> <string>Scan the QR code of your first device</string>
コード例
2台目のデバイスをペアリングするための4つの完全なフローです。コードの生成は即座に行われ、スキャナーの結果は KlugRegisterEvent として届きます。完全なドキュメント →
import com.klug.register.KlugRegister; import com.klug.register.KlugRegisterEvent; import flash.display.Bitmap; import flash.display.BitmapData; var reg:KlugRegister = KlugRegister.getInstance(); if ( reg.isSupported ) // Android, iOS, macOS { // a short-lived one-time code from your server, never the password var bmp:BitmapData = reg.createQRCode( "https://your.server/pair?t=" + oneTimeCode, 10 ); if ( bmp != null ) // null: no code could be made from the text { var qr:Bitmap = new Bitmap( bmp ); // black on white, 4-module quiet zone included qr.x = ( stage.stageWidth - qr.width ) / 2; qr.y = 120; addChild( qr ); } }
reg.addEventListener( KlugRegisterEvent.SCANNED, onScanned ); reg.addEventListener( KlugRegisterEvent.CANCELED, onScanCanceled ); reg.addEventListener( KlugRegisterEvent.ERROR, onScanError ); function startScan():void { if ( !reg.isScanSupported ) { showCodeEntry(); // your app function: type the one-time code instead return; } // iOS: full-screen scanner with your hint and button; macOS 13+: a sheet on the app window; // Android: Google's own localized scanner, hint and cancel title are not used if ( !reg.scanQRCode( "Point the camera at the code on your first device", "Cancel" ) ) trace( "a scanner is already open" ); }
function onScanned( e:KlugRegisterEvent ):void { var prefix:String = "https://your.server/pair?t="; if ( e.text.indexOf( prefix ) != 0 ) { showMessage( "This is not a pairing code." ); // your app function return; } var vars:URLVariables = new URLVariables(); vars.t = e.text.substr( prefix.length ); var req:URLRequest = new URLRequest( "https://your.server/pair" ); req.method = URLRequestMethod.POST; req.data = vars; var loader:URLLoader = new URLLoader(); loader.addEventListener( Event.COMPLETE, function( ev:Event ):void { signInWith( String( loader.data ) ); // your app function: the server's answer }); loader.load( req ); }
function onScanCanceled( e:KlugRegisterEvent ):void { showPairingScreen(); // the user closed the scanner: back to the screen, no message } function onScanError( e:KlugRegisterEvent ):void { switch ( e.errorCode ) { case "denied": // iOS, macOS: camera permission refused showMessage( "Allow camera access in Settings to scan the code." ); break; case "nocamera": // iOS, macOS: no usable camera showCodeEntry(); break; default: // Android: "scanner" (e.g. scanner not ready yet) or "empty" showMessage( "The scanner could not start: " + e.errorMessage ); } }
API 概要
| KlugRegister.getInstance() | 唯一のインスタンスを返します。 |
| isSupported | QRコードを生成できる環境(Android、iOS、macOS)で true になります。 |
| isScanSupported | スキャナーが利用できる環境で true:Android、iOS、およびカメラ付きの macOS 13 以降。 |
| createQRCode(text, modulePx) | QRコードを BitmapData として返します。白地に黒で、4モジュール分のクワイエットゾーン付きです。modulePx はモジュールあたりのピクセル数(既定は 8)。コードを生成できなかった場合は null。 |
| scanQRCode(hint, cancelTitle) | スキャナーを開きます:iOS では全画面、Mac ではシート、Android では Google のスキャナー(そちらではヒントとタイトルは使用されません)。結果はイベントとして届きます。すでにスキャナーが開いている場合は false を返します。 |
| KlugRegisterEvent | text, errorCode, errorMessage. |
イベント
| KlugRegisterEvent.SCANNED | コードが読み取られました。e.text にその内容が入ります。 |
| KlugRegisterEvent.CANCELED | ユーザーがスキャナーを閉じました。 |
| KlugRegisterEvent.ERROR | e.errorCode:denied(カメラ権限なし)· iOS と macOS では nocamera、Android では scanner · empty。詳細は e.errorMessage にあります。 |
KlugRegister を購入
AIR アプリケーション1つ分の年間ライセンスで、12か月間のすべてのアップデートが含まれます。お支払い後、拡張機能、ActionScript ライブラリ、ドキュメントをメールでお送りします(通常は1営業日以内)。ライセンスと条件
動作要件
| AIR SDK | 51.x(HARMAN) |
| Android | Android 6 以降、Google Play services(スキャナー用) |
| iOS | iOS 13 以降 |
| macOS | macOS 10.15 以降(QRコードの生成)。スキャンは macOS 13 以降 |
| 権限 | iOS と macOS:スキャン用のカメラ(NSCameraUsageDescription)。Android:なし |