Flutter足迹记录插件footprint_flutter的使用

Flutter足迹记录插件footprint_flutter的使用

包概述

Flutter 是一个强大的开源框架，可以用于开发跨平台的应用程序。该 Flutter 插件允许你在 Flutter 的 Android 和 iOS 应用程序中集成 Footprint 引导流程。该插件利用了一个安全的内嵌浏览器来运行引导流程。

安装

在终端中运行以下命令：

flutter pub add footprint_flutter

这将在你的项目的 pubspec.yaml 文件中添加 footprint_flutter 依赖项，如下所示：

dependencies:
  footprint_flutter: ^1.0.2

你也可以手动编辑 pubspec.yaml 文件并添加依赖项，然后从终端运行 flutter pub get 来安装依赖项。

安装完成后，你需要链接 InAppBrowser 依赖项。对于 iOS，确保运行：

cd ios && pod install && cd ..

集成

1. 首先获取你的 Playbook 公钥，例如 pb_test_VMooXd04EUlnu3AvMYKjMW，可以在你的 Footprint 仪表板 中找到。

2. 在 Dart 代码中导入包：

   import 'package:footprint_flutter/footprint_flutter.dart';
   

3. 包中暴露了一个 footprint 对象。要初始化流程，只需调用 footprint 对象上的 init 方法。作为 init 方法的参数，你必须传递一个 FootprintConfiguration 对象和你的 BuildContext。FootprintConfiguration 必须包含 publicKey 和 redirectUrl。你还可以传递 onComplete 和 onCancel 回调以及一些可选参数来自定义流程。

   var config = FootprintConfiguration(
     publicKey: "pb_test_RcDHxZgJO9q3vY72d7ZLXu",
     onCancel: () => print("onCancel"),
     onComplete: (String token) => print("onComplete $token"),
   );
   
   footprint.init(config, context);
   

   除了 publicKey，你还可以使用通过特定 playbook 和用户生成的 authToken。你可以在此处找到更多关于如何执行此操作的说明。

示例代码

以下是一个完整的示例代码：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  void handlePress(BuildContext context) {
    var bootstrapData = FootprintBootstrapData(
        email: "example@gmail.com",
        phoneNumber: "+15555550100",
        firstName: "Piip",
        middleName: "the",
        lastName: "Foot",
        dob: "01/01/1996",
        addressLine1: "123 Main St",
        addressLine2: "Unit 123",
        city: "Huntington Beach",
        state: "CA",
        country: "US",
        zip: "12345",
        ssn9: "343434344",
        ssn4: "1234",
        nationality: "US",
        usLegalStatus: "citizen",
        citizenships: ["US", "BD"],
        visaKind: "f1",
        visaExpirationDate: "05/12/2024",
        businessAddressLine1: "1 Main St",
        businessAddressLine2: "Apt 10",
        businessBeneficialOwners: [
          BusinessBeneficialOwners(
              boEmail: "example@gmail.com",
              boFirstName: "Piip",
              boLastName: "Foot",
              boPhoneNumber: "+15555550100",
              boOwnershipStack: 50),
          BusinessBeneficialOwners(
              boEmail: "example@test.com",
              boFirstName: "Jon",
              boLastName: "Doe",
              boPhoneNumber: "+15555550100",
              boOwnershipStack: 25)
        ],
        businessCity: "San Francisco",
        businessCorporationType: "llc",
        businessCountry: "US",
        businessDba: "Test",
        businessFormationDate: "2010-01-01",
        businessName: "Acme",
        businessPhoneNumber: "+15555550100",
        businessState: "CA",
        businessTin: "12-3456789",
        businessWebsite: "test.test.com",
        businessZip: "94107");

    var config = FootprintConfiguration(
        appearance: FootprintAppearance(
            variables: FootprintAppearanceVariables(buttonPrimaryBg: 'red')),
        l10n: FootprintL10n(language: FootprintSupportedLanguage.en),
        onCancel: () => print("onCancel"),
        onComplete: (String token) => print("onComplete $token"),
        publicKey: "pb_test_pZoERpZeZkGW7RRVeBawSm", // 使用 kyb 公钥来测试业务引导数据
        redirectUrl: "com.footprint.fluttersdk://example",
        bootstrapData: bootstrapData);
    footprint.init(config, context);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Builder(
      builder: (_context) => Scaffold(
        appBar: AppBar(
          title: const Text('Footprint Flutter Demo'),
        ),
        body: Center(
          child: ElevatedButton(
              child: Text('Verify with Footprint'),
              onPressed: () => {handlePress(_context)}),
        ),
      ),
    ));
  }
}

自定义外观

你可以利用 appearance 选项扩展默认样式。你可以使用与 Web 集成 相同的变量和规则。你需要传递有效的 CSS 样式值。

var config = FootprintConfiguration(
  publicKey: "pb_test_RcDHxZgJO9q3vY72d7ZLXu",
  appearance: FootprintAppearance(
    fontSrc: 'https://fonts.googleapis.com/css2?family=Inter',
    variables: FootprintAppearanceVariables(
      fontFamily: '"Inter"',
      linkColor: '#101010',
      colorError: '#E33D19',
      buttonPrimaryBg: '#315E4C',
      buttonPrimaryHoverBg: '#46866c',
      buttonPrimaryColor: '#FFF',
      buttonBorderRadius: '70px',
    ),
  ),
);

footprint.init(config, context);

显示公司标志

你还可以通过向 FootprintOptions 传递布尔字段 showLogo 来在模态框顶部添加公司标志。FootprintOptions 作为 options 传递给 FootprintConfiguration。

var config = FootprintConfiguration(
  publicKey: "pb_test_RcDHxZgJO9q3vY72d7ZLXu",
  onCancel: () => print("onCancel"),
  onComplete: (String token) => print("onComplete $token"),
  options: FootprintOptions(showLogo: true),
);

footprint.init(config, context);

设置区域设置

Footprint 还支持区域设置。你可以在 FootprintConfiguration 中使用 l10n（本地化）字段，并指定所需的区域设置和语言。

创建一个 FootprintL10n 对象，传递所需的区域设置和语言。目前，我们支持区域设置 FootprintSupportedLocale.enUS 和 FootprintSupportedLocale.esMX。对于语言，我们支持 FootprintSupportedLanguage.en（英语）和 FootprintSupportedLanguage.es（西班牙语）。

例如，如果你的观众在墨西哥，你可以将区域设置设置为如下所示：

var config = FootprintConfiguration(
  publicKey: "pb_test_RcDHxZgJO9q3vY72d7ZLXu",
  onCancel: () => print("onCancel"),
  onComplete: (String token) => print("onComplete $token"),
  l10n: FootprintL10n(
    locale: FootprintSupportedLocale.esMX,
    language: FootprintSupportedLanguage.es,
  ),
);

footprint.init(config, context);