Flutter用户引导插件 at_onboarding_flutter 的使用

at_onboarding_flutter 是一个用于管理 atSign 认证的Flutter插件。它简化了用户在应用程序中的引导流程，并提供了安全的密钥管理功能。本文将详细介绍如何在Flutter项目中使用这个插件。

概述

at_onboarding_flutter 包处理 atSign 的安全密钥管理，作为用户名和密码的加密替代方案。此开源包用 Dart 编写，支持 Flutter，并遵循 atPlatform 的去中心化边缘计算模型。

主要功能

• 简化 atSign 认证实现。
• 生成并支持免费 atSign。
• 支持多个 atSign 注册。
• 提供 QRCode 或 Atkey 文件配对 atSign 的灵活性。
• 提供重置/注销按钮。

开始使用

有几种方法可以开始使用这个包：

1. 从 GitHub 克隆

可以从 GitHub 仓库 克隆源代码。示例代码展示了 atSign 的注册流程。

git clone https://github.com/atsign-foundation/at_widgets

2. 手动添加到项目

可以在 pub.dev 上找到手动添加此包的说明。

设置

Android

在 AndroidManifest.xml 中添加以下权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.camera.flash" />

在 app/build.gradle 中设置 Android 版本支持：

compileSdkVersion 32

minSdkVersion 24
targetSdkVersion 29

iOS

在 info.plist 中添加以下权限字符串：

<key>NSCameraUsageDescription</key>
<string>The camera is used to scan QR code to pair your device with your atSign</string>

在 Podfile 中更新以下行：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',
        'PERMISSION_EVENTS=0',
        'PERMISSION_REMINDERS=0',
        'PERMISSION_CONTACTS=0',
        'PERMISSION_MICROPHONE=0',
        'PERMISSION_SPEECH_RECOGNIZER=0',
        'PERMISSION_LOCATION=0',
        'PERMISSION_NOTIFICATIONS=0',
        'PERMISSION_SENSORS=0'
      ]
    end
  end
end

macOS

在 DebugProfile.entitlements 和 Release.entitlements 中添加以下键：

<key>com.apple.security.files.downloads.read-write</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>

使用示例

以下是使用 at_onboarding_flutter 的完整示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'At Onboarding Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final AtClientPreference atClientPreference = AtClientPreference();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('At Onboarding Example'),
      ),
      body: Center(
        child: TextButton(
          onPressed: () async {
            final result = await AtOnboarding.onboard(
              context: context,
              config: AtOnboardingConfig(
                atClientPreference: atClientPreference,
                domain: 'root.atsign.org', // Replace with your domain if needed
                rootEnvironment: 'production', // Or 'staging' depending on your setup
                appAPIKey: 'your_api_key_here', // Replace with your actual API key
              ),
            );

            switch (result.status) {
              case AtOnboardingResultStatus.success:
                final atsign = result.atsign;
                // Handle successful onboard
                print('Successfully onboarded: $atsign');
                break;
              case AtOnboardingResultStatus.error:
                // Handle error during onboard
                print('Error during onboard');
                break;
              case AtOnboardingResultStatus.cancel:
                // Handle user cancellation
                print('User canceled onboard');
                break;
            }
          },
          child: Text('Onboard my atSign'),
        ),
      ),
    );
  }
}

参数说明

语言本地化

at_onboarding_flutter 包已经支持英语和法语两种语言。可以通过设置 MaterialApp 类中的 locale 属性来提供自定义的语言值。

示例应用

在 GitHub 上可以找到完整的示例应用，展示关键功能。

通过这些步骤，您应该能够成功集成 at_onboarding_flutter 插件到您的 Flutter 应用中，并为用户提供无缝的引导体验。