Flutter资源回收管理插件reclaim_sdk的使用

在本指南中，我们将逐步介绍如何将Reclaim Protocol Flutter SDK集成到您的应用程序中。我们将创建一个简单的Flutter应用来演示如何使用该SDK生成证明并验证声明。

前提条件

在开始之前，请确保您已经具备以下内容：

1. 从Reclaim Protocol获取的应用ID。
2. 从Reclaim Protocol获取的应用密钥。
3. 您要验证的具体服务的提供商ID。

您可以从Reclaim开发者门户获取这些详细信息。

步骤1：创建一个新的Flutter应用

首先，让我们创建一个新的Flutter应用：

flutter create reclaim_app
cd reclaim_app

步骤2：安装必要的依赖项

在pubspec.yaml文件中添加Reclaim Protocol SDK依赖项：

dependencies:
  flutter:
    sdk: flutter
  reclaim_sdk: ^latest_version
  url_launcher: ^6.0.20

然后运行：

flutter pub get

步骤3：设置您的Flutter小部件

用以下代码替换lib/main.dart的内容：

import 'package:flutter/material.dart';
import 'package:reclaim_sdk/reclaim.dart';
import 'package:reclaim_sdk/utils/types.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env");
  runApp(const MaterialApp(home: ReclaimExample()));
}

class ReclaimExample extends StatefulWidget {
  const ReclaimExample({super.key});

  @override
  State<ReclaimExample> createState() => _ReclaimExampleState();
}

class _ReclaimExampleState extends State<ReclaimExample> {
  String _status = '';
  String _proofData = '';

  Future<void> startReclaimSession() async {
    try {
      print('Starting Reclaim session');
      final reclaimProofRequest = await _initializeProofRequest();
      final requestUrl = await _generateRequestUrl(reclaimProofRequest);
      await _launchUrl(requestUrl);
      await _startVerificationSession(reclaimProofRequest);
    } catch (error) {
      _handleError('Error starting Reclaim session', error);
    }
  }

  Future<ReclaimProofRequest> _initializeProofRequest() async {
    print('Initializing proof request');
    final appId = dotenv.env['APP_ID'];
    final appSecret = dotenv.env['APP_SECRET'];
    final providerId = dotenv.env['PROVIDER_ID'];

    if (appId == null || appSecret == null || providerId == null) {
      throw Exception('Environment variables are not set properly');
    }

    final reclaimProofRequest = await ReclaimProofRequest.init(
        appId, appSecret, providerId, ProofRequestOptions(log: true));

    // reclaimProofRequest.addContext('0x00000000000', 'Example context message');
    // reclaimProofRequest.setRedirectUrl('https://dev.reclaimprotocol.org/');

    print('Proof JSON object: ${reclaimProofRequest.toJsonString()}');
    return reclaimProofRequest;
  }

  Future<String> _generateRequestUrl(ReclaimProofRequest request) async {
    final requestUrl = await request.getRequestUrl();
    print('Request URL: $requestUrl');
    return requestUrl;
  }

  Future<void> _launchUrl(String url) async {
    if (await canLaunchUrl(Uri.parse(url))) {
      final launched = await launchUrl(
        Uri.parse(url),
        mode: LaunchMode.externalApplication,
      );
      if (launched) {
        setState(() => _status = 'Session started. Waiting for proof...');
      } else {
        throw 'Could not launch $url';
      }
    } else {
      throw 'Could not launch $url';
    }
  }

  Future<void> _startVerificationSession(ReclaimProofRequest request) async {
    await request.startSession(
      onSuccess: _handleProofSuccess,
      onError: _handleProofError,
    );
  }

  void _handleProofSuccess(dynamic proof) {
    print('Proof received: $proof');
    // check if proof is of type String
    var proofDataValue = '';
    if (proof is String) {
      proofDataValue = proof;
    } else {
      // check if proof is of type List
      if (proof is List) {
        // extract claim data from each proof in a variable and then add it to the proofDataValue
        var allProofs = '';
        for (var proof in proof) {
          allProofs += '${proof.claimData.context}\n\n';
        }
        proofDataValue =
            'Extracted data: $allProofs\n\nFull proof: ${proof.toString()}';
      } else {
        proofDataValue =
            'Extracted data: ${proof.claimData.context}\n\nFull proof: ${proof.toString()}';
      }
    }
    setState(() {
      _status = 'Proof received!';
      _proofData = proofDataValue;
    });
  }

  void _handleProofError(Exception error) {
    _handleError('Error in proof generation', error);
  }

  void _handleError(String message, dynamic error) {
    print('$message: $error');
    setState(() => _status = '$message: ${error.toString()}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Reclaim SDK Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            ElevatedButton(
              onPressed: startReclaimSession,
              child: const Text('Start Reclaim Session'),
            ),
            const SizedBox(height: 20),
            Text(_status, style: const TextStyle(fontWeight: FontWeight.bold)),
            const SizedBox(height: 20),
            if (_proofData.isNotEmpty)
              Expanded(
                child: SingleChildScrollView(
                  child: Text(_proofData),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

步骤4：理解代码

让我们分解这段代码的主要部分：

1. 我们创建了一个ReclaimExample小部件来管理Reclaim集成的状态。
2. _initializeProofRequest()方法使用您的应用ID、密钥和提供商ID初始化Reclaim SDK。这发生在我们启动验证流程时。
3. 当用户点击“开始Reclaim会话”按钮时，startReclaimSession()方法会被调用，它执行以下操作：
   • 初始化证明请求。
   • 使用setAppCallbackUrl()设置应用回调URL（应为您的应用的深度链接）。
   • 使用_generateRequestUrl()生成请求URL。
   • 使用_launchUrl()打开验证URL，这将在用户的浏览器中打开Reclaim验证过程。
   • 使用_startVerificationSession()启动会话，设置成功和失败验证的回调。
4. _launchUrl()方法使用url_launcher包打开验证URL，用户可以在默认浏览器中完成验证。
5. _startVerificationSession()方法设置了成功和错误回调：
   • _handleProofSuccess()在验证成功时被调用，更新UI以显示证明数据。
   • _handleProofError()在验证失败时被调用，更新UI以显示错误消息。
6. 整个过程中UI会不断更新，以显示当前状态和任何接收到的证明数据。
7. 收到证明数据后，它会在可滚动的文本区域中显示，展示提取的数据和完整的证明。

这种实现提供了一个更健壮和用户友好的流程，从初始化到结果展示，同时管理潜在的错误。

步骤5：运行您的应用

启动您的Flutter应用：

flutter run

您的Reclaim SDK演示现在应该正在运行。点击“开始Reclaim会话”按钮以启动验证流程。

理解声明流程

1. 创建声明：当您点击“创建声明”时，SDK会生成一个唯一的验证请求。
2. 验证：SDK处理验证过程，在用户的浏览器中打开Web视图，以便用户完成必要的步骤。
3. 处理结果：当验证成功时，onSuccessCallback会被调用，提供证明数据。如果验证失败，则onFailureCallback会被调用。

高级配置

Reclaim SDK提供了几个高级选项来自定义您的集成：

1. 添加上下文： 您可以向您的证明请求添加上下文，这有助于提供额外的信息：

   reclaimProofRequest.addContext('0x00000000000', 'Example context message');
   

2. 设置参数： 如果您的提供商需要特定的参数，您可以这样设置它们：

   reclaimProofRequest.setParams({'email': 'test@example.com', 'userName': 'testUser'});
   

3. 自定义重定向URL： 设置自定义URL，以便在验证过程结束后重定向用户：

   reclaimProofRequest.setRedirectUrl('https://example.com/redirect');
   

4. 导出和导入SDK配置： 您可以将整个Reclaim SDK配置导出为JSON字符串，并在不同的服务或后端上使用相同的配置初始化SDK：

   // 在客户端或初始服务上
   String configJson = reclaimProofRequest.toJsonString();
   print('Exportable config: $configJson');
   
   // 将此configJson发送到您的后端或其他服务
   
   // 在后端或不同服务上
   ReclaimProofRequest importedRequest = await ReclaimProofRequest.fromJsonString(configJson);
   String requestUrl = await importedRequest.getRequestUrl();
   

这些高级配置提供了更多灵活性，使您能够根据具体需求和应用架构定制Reclaim SDK的集成。

后端处理证明

对于生产应用，建议在后端处理证明：

1. 设置回调URL：

   reclaimProofRequest.setCallbackUrl('https://your-backend.com/receive-proofs');