65.9K
CodeProject 正在变化。 阅读更多。
Home

带条形码的网上银行

Attila Kúr
starIconstarIconstarIconstarIconstarIcon

5.00/5 (12投票s)

2016年12月22日

CPOL

6分钟阅读

viewsIcon

21676

downloadIcon

541

用智能手机扫描账单条形码，然后拍照！您电脑上的转账表单将自动填写该账单的所有数据。

引言

我们通过电子方式支付账单。直接付款和自动付款使我们的生活更加轻松。即使我们偶尔收到纸质账单（纸质打印的账单非常罕见），我们也会选择网上银行。但有一个问题：要支付账单，您首先需要仔细填写转账表单 - 包括账号、收款人标识号、确切金额等。这些通常是长而复杂的数字字符串，对人类来说根本不直观。这是一项繁琐的工作，您最好仔细检查一切，以确保您从“纸质数字”到“电子数字”的转录是完全正确的。

电脑速度快且精确，而人则不是。那么为什么不自动化这个过程呢？

这是什么？

使用此脚本，只需将智能手机对准账单条形码，即可轻松支付您的纸质账单。

您电脑上的支付网页表单将自动接收您账单的 IBAN、金额和收款人标识号。您可以确保在点击“付款”按钮之前，所有转账详细信息都是正确的。

这不是什么

这不是您带有 QR 码扫描功能的网上银行移动应用程序的替代品。这些移动应用程序非常棒，并且能够完美地完成其设计目的：基于它们支持的条形码进行转账，尽管许多时候仅限于“按方形支付”的 QR 码。现在，此脚本将成为您的“可扩展性点”：它将帮助您处理您的移动应用程序不一定能理解的条形码（或者如果您的银行根本不提供此类移动应用程序）。

背景

如果您仔细想想，您随身携带了一个便携式条形码扫描仪，它还启用了 WiFi。而且，作为额外的好处，您可以用同一个设备打电话或发短信。 ;-)
通过 Android 应用，例如 WiFi Barcode Scanner，以及您电脑上安装的任何免费 VNC 服务器，您都能够使用智能手机的摄像头扫描任何条形码，并将其内容直接发送到您的 PC。这就是您缺失的环节：剩下的是一些代码，可以将接收到的原始条形码分解成转账详细信息，并立即将这些数据填入您喜欢的网上银行网页的相应输入字段。在 GreaseMonkey 中运行的脚本非常适合这项任务。GreaseMonkey 是一个 Firefox 附加组件，它可以作为网页的一部分运行任何客户端 JavaScript，从而在浏览器中改变网页的行为和外观。

安装

只需将 GreaseMonkey 附加组件安装到 Firefox 中，然后只需将主脚本文件 BarCodeChequeMonkey.user.js 拖放到您的浏览器窗口中（有关详细信息，请参阅 安装脚本）。请注意，在手机上，您还需要一个“扫描和发送”条形码应用程序。请参阅 WiFi Barcode Scanner 作为示例，并按照设置说明进行操作，了解如何将其与您 PC 上运行的免费 VNC 服务器（如 UltraVNC）进行“配对”。

注意：我与 WiFi Barcode Scanner 的开发者没有任何关联；我只是因为它很棒而使用它。

用法

当您导航到网上银行的付款页面时，GreaseMonkey 将自动执行我们的主脚本文件，该文件将在 HTML 文档中添加一个新的输入字段。

当您的手机扫描了条形码（并通过 VNC 发送到您的 PC）后，该输入字段将检测到条形码的原始数字。脚本代码将立即将接收到的原始数字序列分解成更有意义的数据，如 IBAN 号码、金额和收款人标识号。它还会自动将其填入您的网页表单，因此您只需单击一次即可准备付款。

添加对您选择的银行的支持

该框架对扩展开放：可扩展点用橙色标记。

三个点是您可以轻松为您的银行的特定网上银行网页添加支持的地方。您所需要做的就是实现一个具有 IWebFormFiller 方法的新类，并在主脚本文件 BarCodeChequeMonkey.user.js 中将其注册到 Controller。

//
// Replace for YOUR OWN BANK, e.g. var formDataFiller = new FormDataFiller_YourBank();
//
var formDataFiller = new FormDataFiller_Zuno();

var controller = new Controller();
controller.init(document, barCodeParserFactory, formDataFiller);

GreaseMonkey 用户脚本还指定它们在哪种网站上运行。例如，此处提供的脚本仅在 ZUNO 银行的网上银行网站上运行（对于网上银行脚本，它显然没有理由在任何其他银行的网站上运行）。当您添加您选择的银行的支持时，您还想更改主脚本 BarCodeChequeMonkey.user.js 中的网页地址过滤器，使其在您选择的银行的网上银行网站上运行。

只需替换此

// @include     https://moje.zuno.sk/*/transfer3rdpartylocal/transfer3rdpartylocal.iface*

用您自己银行网站的通配符地址，例如

// @include     https://www.YOUR-BANK.com/transfer/*

现在重新安装主脚本文件（再次将 BarCodeChequeMonkey.user.js 拖放到 Firefox 窗口中），这将正确应用您在代码中的更改。

进一步的定制

目前，开箱即用地支持 3 种不同的支票/账单类型。它们中的每一种都是 IBarCodeParser 方法的不同实现，因为它们处理扫描条形码的不同格式。

条形码格式（扫描数字示例序列）能够处理它的 JS 类
257401500000005050505050007203102403080000001800000000000003BarCodeParser_ePoukaz
25740000000020135711070049731335580000020286070049731305BarCodeParser_ePoukaz_Long
360001291100000000262200785543150668242000014828BarCodeParserSK_Length48

但您也可以轻松地添加对新类型的支票/账单的支持。只需实现一个具有 IBarCodeParser 方法的新类，并在主脚本文件 BarCodeChequeMonkey.user.js 中将其注册到 BarCodeParserFactory。

//
// Register all supported BarCode types
//
var barCodeParserFactory = new BarCodeParserFactory();
barCodeParserFactory.registerParser(36, 48, function (barcode) 
{ return new BarCodeParserSK_Length48(barcode); }); // product code: 36
barCodeParserFactory.registerParser(38, 48, function (barcode) 
{ return new BarCodeParserSK_Length48(barcode); }); // product code: 38
barCodeParserFactory.registerParser(25, 56, function (barcode) 
{ return new BarCodeParser_ePoukaz(barcode); });
barCodeParserFactory.registerParser(25, 60, function (barcode) 
{ return new BarCodeParser_ePoukaz_Long(barcode); });

//
// Add YOUR OWN PARSERS for other, future cheque types, e.g.:
//
// barCodeParserFactory.registerParser(36, 50, function (barcode) { return new ...(barcode); });
// barCodeParserFactory.registerParser(37, 48, function (barcode) { return new ...(barcode); });
// barCodeParserFactory.registerParser(37, 50, function (barcode) { return new ...(barcode); });

一旦注册了您的新 IBarCodeParser 实现，它将在需要时被自动选择和使用。每次用户扫描条形码时，BarCodeParserFactory 将查看条形码的原始数字，并根据条形码的前 2 位数字和总长度选择最佳匹配的解析器。最佳匹配将自动实例化并用于解析该条形码。

在您的 IBarCodeParser 实现中，您还将想使用共享的帮助类 IbanFactory。它是一个实用程序类，用于从您的银行代码和银行账户（一旦后者已从原始数字中解析出来）生成有效的 IBAN 代码。

尽管 IBAN 有一个通用格式（参见 维基百科上的 IBAN 结构），但它在每个国家/地区仍然略有不同。这就是为什么 IbanFactory 会为每个国家/地区提供一个不同的方法：例如，createSK(...) 为斯洛伐克生成一个国家/地区特定的 IBAN 号码。要支持您所在国家/地区的 IBAN 格式，您可以简单地添加另一个 createXY(...) 方法。新的方法可以方便地使用与其他方法相同的底层 MOD-97-10 模运算算法（请参阅 MOD-97_Test.js 中的单元测试以获取使用信息）。

describe("IBAN for Slovakia", function () {
    it("should create a valid IBAN from BankCode + AccountNumber without Prefix", function () {
        var iban = ibanFactory.createSK("0900", "0000000175126457");
        expect(iban).to.be("SK25 0900 0000 0001 7512 6457");
    });
    it("should create a valid IBAN from BankCode + AccountNumber with Prefix", function () {
        var iban = ibanFactory.createSK("1111", "0000191029706001");
        expect(iban).to.be("SK15 1111 0000 1910 2970 6001");
    });
});

测试

我来自 C++、C++/CLI、C# 的 TDD 背景，所以在本项目期间，我也很好奇想了解 JavaScript 如何处理单元测试。我现在可以看到它非常好，TDD（甚至 BDD）在这个领域效果非常好。我使用了 Mocha 测试框架和一个小型的 BDD 断言工具包，称为 Expect，并且我只能向阅读本文的任何人推荐它们。

关注点

该脚本主要为 Firefox 开发，但我同时也期待在有兴趣的情况下，通过 Tampermonkey 等扩展支持 Chrome、Opera 或 Safari 等其他浏览器。

历史

  • 2016 年 12 月：初始版本
© . All rights reserved.