Flutter数据同步插件verisync的使用

Flutter数据同步插件verisync的使用

简介

Verisync身份验证按钮是一个Flutter小部件，旨在简化在您的Flutter应用中集成身份验证的过程。它将启动和处理身份验证流程的复杂性封装在一个简单易用的按钮小部件中。

特性

• 简易集成：只需将VerisyncButton添加到您的小部件树即可开始使用。
• 可定制化：通过参数支持按钮外观和行为的自定义。
• 权限处理：自动处理身份验证所需的相机权限请求。
• 回调支持：提供onSuccess和onError回调以处理验证结果。
• 对话框展示：在对话框中展示身份验证过程，为用户提供无缝体验。

开始使用

依赖

在您的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  verisync: ^latest_version

导入

import 'package:your_package/verisync_button.dart'; // 根据您的项目结构调整导入路径

使用

要使用VerisyncButton，只需将其添加到您的小部件树中，并提供必要的参数：

VerisyncButton(
  redirectUrl: 'https://example.com/redirect',
  flowId: 'your_flow_id',
  clientId: 'your_client_id',
  email: 'optional_email@example.com', // 可选
  metadata: {'key': 'value'}, // 可选
  onSuccess: (context) {
    // 可选：处理验证成功
  },
  onError: (context) {
    // 可选：处理验证错误
  },
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
  ),
  child: Text('Verify Identity'),  // 可选：自定义按钮内的小部件
)

如果您不打算自定义按钮，只需添加必需的参数即可：

VerisyncButton(
  redirectUrl: 'https://example.com/redirect',
  flowId: 'your_flow_id',
  clientId: 'your_client_id',
),

参数说明

• redirectUrl: 验证完成后将重定向到的URL。
• flowId: 验证流程的ID。
• clientId: 您的验证服务客户端ID。
• email: （可选）用于预填充验证过程中的电子邮件地址。
• metadata: （可选）附加到验证请求的额外元数据。
• onSuccess: （可选）验证成功时调用的回调函数。
• onError: （可选）验证失败时调用的回调函数。
• style: （可选）按钮的自定义样式。
• child: （可选）显示在按钮内的自定义小部件。

权限处理

VerisyncButton会自动处理身份验证所需的相机权限。如果权限被拒绝或未授予，它会引导用户通过应用设置启用它们。它依赖于permission_handler包。请阅读平台特定要求的指南。

自定义

通过提供样式和子参数的自定义值，以及根据应用程序需求处理onSuccess和onError事件，可以自定义VerisyncButton的外观和行为。

迁移指南：集成VerisyncButton

本指南概述了从手动处理身份验证迁移到在您的Flutter应用中使用VerisyncButton的步骤。

变更概述

• 权限处理：新的VerisyncButton小部件抽象掉了权限处理逻辑，使主应用代码更加简洁，专注于业务逻辑。
• 简化：直接在对话框中实例化和使用VerisyncWidget被VerisyncButton替换，简化了代码库。
• 初始化：不再需要在主函数中显式请求权限和检查相机权限。

分步迁移

1. 从主函数中移除权限处理 旧代码可能看起来像这样：

   WidgetsFlutterBinding.ensureInitialized();
   var status = await Permission.camera.status;
   if (status.isDenied) {
     await Permission.camera.request();
   } else if (status.isPermanentlyDenied) {
     openAppSettings();
   }
   

   在新方法中，删除这些行。更新后的main函数应该只包含：

   runApp(const MaterialApp(home: MyApp()));
   

2. 更新MyApp小部件 替换ElevatedButton中使用VerisyncWidget的对话框，直接在小部件树中使用VerisyncButton。

   之前：

   ElevatedButton(
     onPressed: () {
       showAdaptiveDialog(
         context: context,
         builder: (BuildContext dialogContext) => VerisyncWidget(
           // 参数
         ),
       );
     },
     child: const Text('Verify your identity'),
   ),
   

   之后：

   const VerisyncButton(
     flowId: "<your flowId>",
     redirectUrl: "<your redirectUrl>",
     clientId: "<your clientId>",
   ),
   

3. 移除不必要的导入 由于权限处理被封装在VerisyncButton内，如果不在项目的其他地方使用permission_handler包，请移除该导入。

   之前：

   import 'package:permission_handler/permission_handler.dart';
   

   之后：

   确保此导入已移除（如果不再需要）。

4. 调整VerisyncButton的使用

   • 如果您在旧的VerisyncWidget中使用了email、metadata、callbackSuccess或callbackError等额外参数，请确保将其添加到VerisyncButton。
   • VerisyncButton还提供了onSuccess和onError回调，类似于callbackSuccess和callbackError。根据新的API调整这些回调。

总结

通过遵循这些步骤，您将成功迁移到使用VerisyncButton小部件，简化您的代码并封装复杂的权限处理和身份验证逻辑。此迁移增强了代码的可维护性，并专注于您的应用的核心功能。

完整示例Demo

以下是完整的示例代码：

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

/// import 'package:verisync/verisync.dart' as [verisync];
/// or import 'package:verisync/verisync.dart';
import 'package:verisync/verisync.dart';

Future main() async {
  runApp(const MaterialApp(home: MyApp()));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Verisync Example'),
        ),
        body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              VerisyncButton(
                flowId: "<your flowId>",
                redirectUrl: "your redirectUrl",
                clientId: "your clientId",
              ),
            ],
          ),
        ));
  }
}