Flutter二维码生成与扫描插件qr_plus的使用

qr_plus 是一个高级的一体化二维码包，提供了多层安全防护。该包作为一些最流行的二维码相关包的封装器，使用 qr_flutter 渲染二维码，并使用 mobile_scanner 读取二维码。

平台支持

Reader

Renderer

动机

在当今世界，二维码用于各种用途，从支付到访问安全信息。然而，二维码的易用性和便利性也使它们容易受到恶意攻击。为了应对这些安全问题，QR Plus 提供了多层安全保护，确保数据的安全性。

例如，在组织寻宝活动时，需要确保每个团队的进度被准确和公平地记录。团队在各个地点扫描二维码以获得积分。为防止作弊，需要一种解决方案来确保每个团队只为其实际访问的位置获得积分。这就是我们创建 qr_plus 的原因：让二维码安全而不必编写大量自定义逻辑。

开始使用（推荐设置）

重要提示：您需要在读取器和渲染器上使用相同的模式，否则读取器将无法接受数据。

1. 配置平台

由于此包是 mobile_scanner 的封装器，请遵循其文档中的平台特定配置步骤。

2. 添加渲染器

QrPlusRenderer(
    data: 'https://youtu.be/dQw4w9WgXcQ',
    mode: const QrPlusMode.snowden(
        encryptionKey: '<your-encryption-key>', // 您的加密密钥来自 .env 文件。参见 https://pub.dev/packages/flutter_dotenv
    ),
),

3. 添加读取器

QrPlusReader(
    mode: const QrPlusMode.snowden(
        encryptionKey: '<your-encryption-key>', // 您的加密密钥来自 .env 文件。参见 https://pub.dev/packages/flutter_dotenv
    ),
    onData: (data, authenticity) {
        /// 处理数据
        print(authenticity);
        print(data);
    },
),

4. 完成设置

享受您的新安全二维码吧。

多层安全

QR Plus 提供多层安全保护，每层修复前一层的安全漏洞。以下是包中的安全层，从低到高：

1. QrPlusMode.plain

不包含任何安全性。

2. QrPlusMode.safe

问题

恶意用户可以截屏二维码。

解决方案

将数据拆分为多个部分并一次显示一部分。

3. QrPlusMode.robust

问题

恶意用户可以录屏二维码。

解决方案

添加数据的时间生存期（TTL）。二维码仅在给定时间内有效。

4. QrPlusMode.sound

问题

恶意用户可以修改设备时间。

解决方案

从远程NTP服务器添加时间同步。

5. QrPlusMode.paranoid

问题

恶意用户可以共享屏幕或断开网络连接以欺骗TTL和NTP。

解决方案

检测可能的作弊行为。如果设备正在共享屏幕或录制视频，或用户断开了网络连接，则将可疑活动信息通过二维码发送给读取器。

6. QrPlusMode.snowden

问题

恶意用户可以使用其他二维码读取器读取数据、操纵JSON并创建新的有效二维码。

解决方案

在发送之前对数据进行加密。只有提供的读取器才能解密数据。

示例代码

以下是一个完整的示例应用程序，展示如何使用 qr_plus 包生成和读取二维码。

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:qr_plus/qr_plus.dart';

const kHomeRoute = '/';
const kRendererRoute = '/renderer';
const kReaderRoute = '/reader';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'qr_plus example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: kHomeRoute,
      routes: {
        kHomeRoute: (context) => const Home(),
        kRendererRoute: (context) => const Renderer(),
        kReaderRoute: (context) => const Reader(),
      },
    );
  }
}

class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextButton(
              onPressed: () {
                Navigator.pushNamed(context, kRendererRoute);
              },
              child: const Text('Renderer'),
            ),
            TextButton(
              onPressed: () {
                Navigator.pushNamed(context, kReaderRoute);
              },
              child: const Text('Reader'),
            ),
          ],
        ),
      ),
    );
  }
}

class Renderer extends StatelessWidget {
  const Renderer({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Renderer'),
      ),
      body: Center(
        child: QrPlusRenderer(
          data: 'https://youtu.be/dQw4w9WgXcQ',
          mode: const QrPlusMode.snowden(
            encryptionKey: '<your-encryption-key>',
          ),
        ),
      ),
    );
  }
}

class Reader extends StatelessWidget {
  const Reader({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Reader'),
      ),
      body: Center(
        child: QrPlusReader(
          mode: const QrPlusMode.snowden(
            encryptionKey: '<your-encryption-key>',
          ),
          onData: (data, authenticity) {
            print(authenticity);
            print(data);
          },
        ),
      ),
    );
  }
}