Flutter唯一性校验插件unico_check的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter唯一性校验插件unico_check的使用

Unico Check 插件介绍

Unico Check 是一个旨在在Flutter平台上实现Unico生命证明技术的库。它可以帮助开发者快速集成身份验证功能，如自拍验证和文档扫描。

开始使用

Android 平台要求

  • 最低minSdkVersion: 21

iOS 平台要求

  • 最低iOS版本：11 或更高
  • Xcode版本：15 或更高
  • 如果你的项目还没有相机使用的权限，请确保在Info.plist中添加以下内容：
<key>NSCameraUsageDescription</key>
<string>Camera usage description</string>

更多详情可以参考官方文档。

示例代码

下面是一个完整的示例demo，展示了如何使用unico_check插件进行唯一性校验。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'unico check',
      theme: ThemeData(
        primaryColor: Color(0xFF0B38E7),
      ),
      home: MyHomePage(title: 'unico | check'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    implements UnicoListener, UnicoSelfie, UnicoDocument {

  late UnicoCheckBuilder _unicoCheck;
  late UnicoCheckCameraOpener _opener;

  // 定义主题配置
  final _theme = UnicoTheme(
      colorSilhouetteSuccess: "#4ca832",
      colorSilhouetteError: "#fcdb03",
      colorTextMessage: '#000000',
      colorBackground: "#3295a8",
      colorProgressBar: "#4ca832",
      colorCancelButtonIcon: "#4ca832");

  // 定义iOS平台配置
  final _configIos = UnicoConfig(
      getProjectNumber: "Your ProjectNumber Ios",
      getProjectId: "Your ProjectId Ios",
      getMobileSdkAppId: "Your MobileSdkAppId Ios",
      getBundleIdentifier: "Your BundleIdentifier Ios",
      getHostInfo: "Your HostInfo Ios",
      getHostKey: "Your HostKey Ios");

  // 定义Android平台配置
  final _configAndroid = UnicoConfig(
      getProjectNumber: "Your ProjectNumber Android",
      getProjectId: "Your ProjectId Android",
      getMobileSdkAppId: "Your MobileSdkAppId Android",
      getBundleIdentifier: "Your BundleIdentifier Android",
      getHostInfo: "Your HostInfo Android",
      getHostKey: "Your HostKey Android");

  @override
  void initState() {
    super.initState();
    initUnicoCamera();
    configUnicoCamera();
  }

  // 初始化相机
  void initUnicoCamera() {
    _unicoCheck = new UnicoCheck(
        listener: this,
        unicoConfigIos: _configIos,
        unicoConfigAndroid: _configAndroid);
  }

  // 配置相机
  void configUnicoCamera() {
    _unicoCheck
        .setTheme(unicoTheme: _theme)
        .setTimeoutSession(timeoutSession: 55);
  }

  /// 实现Unico回调接口的方法
  @override
  void onErrorUnico(UnicoError error) {}

  @override
  void onUserClosedCameraManually() {}

  @override
  void onSystemChangedTypeCameraTimeoutFaceInference() {}

  @override
  void onSystemClosedCameraTimeoutSession() {}

  /// 实现自拍回调接口的方法
  @override
  void onSuccessSelfie(ResultCamera result) {}

  @override
  void onErrorSelfie(UnicoError error) {}

  /// 实现文档扫描回调接口的方法
  @override
  void onSuccessDocument(ResultCamera resultCamera) {}

  @override
  void onErrorDocument(UnicoError error) {}

  // 设置智能模式相机参数
  void setCameraSmart() {
    _opener = _unicoCheck
        .setAutoCapture(autoCapture: true)
        .setSmartFrame(smartFrame: true)
        .build();
  }

  // 设置普通模式相机参数
  void setCameraNormal() {
    _opener = _unicoCheck
        .setAutoCapture(autoCapture: false)
        .setSmartFrame(smartFrame: false)
        .build();
  }

  // 设置带按钮的智能模式相机参数
  void setCameraSmartWithButton() {
    _opener = _unicoCheck
        .setAutoCapture(autoCapture: false)
        .setSmartFrame(smartFrame: true)
        .build();
  }

  // 打开自拍相机
  void openCamera() {
    setCameraSmart();
    _opener.openCameraSelfie(listener: this);
  }

  void openCameraNormal() {
    setCameraNormal();
    _opener.openCameraSelfie(listener: this);
  }

  void openCameraSmartWithButton() {
    setCameraSmartWithButton();
    _opener.openCameraSelfie(listener: this);
  }

  // 打开不同类型的文档扫描相机
  void openCameraDocumentCNH() {
    _unicoCheck
        .build()
        .openCameraDocument(documentType: DocumentType.CNH, listener: this);
  }

  void openCameraDocumentCNHFront() {
    _unicoCheck.build().openCameraDocument(
        documentType: DocumentType.CNH_FRENTE, listener: this);
  }

  void openCameraDocumentCNHVerso() {
    _unicoCheck.build().openCameraDocument(
        documentType: DocumentType.CNH_VERSO, listener: this);
  }

  void openCameraDocumentRGFront() {
    _unicoCheck.build().openCameraDocument(
        documentType: DocumentType.RG_FRENTE, listener: this);
  }

  void openCameraDocumentRGVerso() {
    _unicoCheck.build().openCameraDocument(
        documentType: DocumentType.RG_VERSO, listener: this);
  }

  void openCameraDocumentCPF() {
    _unicoCheck
        .build()
        .openCameraDocument(documentType: DocumentType.CPF, listener: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top: 50),
              child: Text(
                '欢迎来到unico | check!',
                style: TextStyle(fontSize: 20.0),
              ),
            ),
            Container(
              margin: EdgeInsets.all(25),
              child: Text(
                '现在测试我们的技术:',
                style: TextStyle(fontSize: 16.0),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10, bottom: 10),
              child: Text(
                '自拍相机',
                style: TextStyle(fontSize: 15.0),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                onPressed: openCameraNormal,
                child: Text('普通相机'),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                onPressed: openCamera,
                child: Text('智能相机'),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                onPressed: openCameraSmartWithButton,
                child: Text('智能相机（带按钮）'),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 10, bottom: 10),
              child: Text(
                '文档扫描相机',
                style: TextStyle(fontSize: 15.0),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                  onPressed: openCameraDocumentCNH,
                  child: Text('驾驶证')),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                onPressed: openCameraDocumentCNHFront,
                child: Text('驾驶证正面'),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                onPressed: openCameraDocumentCNHVerso,
                child: Text('驾驶证反面'),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                onPressed: openCameraDocumentRGFront,
                child: Text('身份证正面'),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                onPressed: openCameraDocumentRGVerso,
                child: Text('身份证反面'),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: TextButton(
                onPressed: openCameraDocumentCPF,
                child: Text('税号证件'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这个完整的示例包含了如何初始化和配置Unico Check插件，并提供了几种不同的方式来打开相机进行自拍或文档扫描。你可以根据自己的需求调整代码中的参数和逻辑。


更多关于Flutter唯一性校验插件unico_check的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter唯一性校验插件unico_check的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用unico_check插件进行唯一性校验的代码示例。unico_check插件通常用于检查某些值（如用户名、邮箱等）是否在服务器端是唯一的。这里假设你已经将unico_check插件添加到了你的pubspec.yaml文件中，并且已经运行了flutter pub get来安装依赖。

1. 安装unico_check插件

首先，确保你的pubspec.yaml文件中包含以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  unico_check: ^最新版本号

然后运行flutter pub get。

2. 导入unico_check插件

在你的Flutter项目的Dart文件中，导入unico_check插件：

import 'package:unico_check/unico_check.dart';

3. 配置和使用unico_check

下面是一个基本的示例，展示如何使用unico_check插件来检查用户名的唯一性。

假设你有一个简单的表单

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UniqueCheckScreen(),
    );
  }
}

class UniqueCheckScreen extends StatefulWidget {
  @override
  _UniqueCheckScreenState createState() => _UniqueCheckScreenState();
}

class _UniqueCheckScreenState extends State<UniqueCheckScreen> {
  final _formKey = GlobalKey<FormState>();
  String _username = '';
  bool _isUsernameUnique = true;
  String _checkResultMessage = '';

  void _checkUsernameUniqueness() async {
    setState(() {
      _isUsernameUnique = null; //临时设置为null表示正在检查
      _checkResultMessage = '';
    });

    try {
      bool isUnique = await UnicoCheck.check(
        value: _username,
        uniqueKey: 'username', // 服务器端用于标识唯一性检查的键
        url: 'https://yourserver.com/api/check-username', // 服务器端检查唯一性的API端点
      );

      setState(() {
        _isUsernameUnique = isUnique;
        _checkResultMessage = isUnique ? '用户名可用' : '用户名已被占用';
      });
    } catch (e) {
      // 处理错误
      setState(() {
        _isUsernameUnique = false;
        _checkResultMessage = '检查唯一性时出错';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('唯一性校验示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: '用户名'),
                validator: (value) {
                  if (value.isEmpty) {
                    return '请输入用户名';
                  } else if (_isUsernameUnique == false) {
                    return '用户名已被占用';
                  } else if (_isUsernameUnique == null) {
                    return '正在检查...';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _username = value;
                  });
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    await _checkUsernameUniqueness();
                    if (_isUsernameUnique == true) {
                      // 提交表单
                      print('表单提交成功');
                    }
                  }
                },
                child: Text('提交'),
              ),
              SizedBox(height: 16),
              Text(_checkResultMessage),
            ],
          ),
        ),
      ),
    );
  }
}

注意事项

  1. 服务器端API：确保你的服务器端API（例如https://yourserver.com/api/check-username）能够接收一个uniqueKey和value参数，并返回一个布尔值表示该值是否唯一。
  2. 错误处理：在实际应用中，你可能需要更详细的错误处理逻辑，比如处理网络错误、超时等。
  3. 安全性：不要在客户端存储敏感信息，如API密钥或用户密码。确保你的API调用是安全的，并使用了适当的身份验证和授权机制。

希望这个示例能帮助你在Flutter项目中成功使用unico_check插件进行唯一性校验。

回到顶部