Flutter功能扩展插件finpong_plus的使用

1. 事前准备

1.1 在pubspec.yaml中添加

确保在项目的pubspec.yaml文件中添加finpong_plus插件。

dependencies:
  finpong_plus: ^x.y.z

或者通过终端命令安装：

$ flutter pub add finpong_plus

1.2 注册应用Schema

为了在认证完成后返回到您的应用，需要在不同的操作系统上注册应用的Schema。

Android - 在AndroidManifest.xml中设置

在MainActivity的<activity>标签内添加以下内容：

<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:scheme="your-app-scheme"/>
</intent-filter>

iOS - 在info.plist中设置

在CFBundleURLTypes中添加您的应用Schema，并在LSApplicationQueriesSchemes中添加认证应用的Schema：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>com.finpong.finpongPlusExample</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>your-app-scheme</string>
        </array>
    </dict>
</array>

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>naversearchthirdlogin</string>
    <string>supertoss</string>
    <string>finpongapp</string>
    <string>tauthlink</string>
    <string>ktauthexternalcall</string>
    <string>upluscorporation</string>
    <string>kakaotalk</string>
</array>

2. 运行FinpongPlus

2.1 在应用中添加FinpongPlusWidget

首先，确保您已经获得了有效的token。然后，在应用中添加FinpongPlusWidget。

import 'package:finpong_plus/finpong_plus.dart';

FinpongPlusWidget(
  token: 'eyJ0e...QINWU',
  finpongPlusController: finpongPlusController,
  entry: '1',
  serverMode: ServerMode.staging,
  backgorundColor: Colors.white,
  onUriScheme: (type, scheme) {
    /**
     * 该函数用于处理应用Schema调用。
     * 如果应用已安装，则启动应用Schema。
     * 如果未安装，则引导用户到应用商店下载。
     */
    canLaunchUrl(Uri.parse(scheme)).then((bool result) {
      setState(() async {
        if (result) {
          if (!await launchUrl(Uri.parse(scheme), mode: LaunchMode.externalApplication)) {
            throw Exception('Could not launch $scheme');
          }
        } else {
          !await launchUrl(
            Uri.parse('type별 스토어 url'),
            mode: LaunchMode.externalApplication,
          );
        }
      });
    });
  },
  onCustomAction: (pageId, params) {
    // 处理预定义的FinpongPlus动作
    switch(pageId){
      case 'ACT1000':
        // 处理ACT1000动作
        break;
      case 'ACT2000':
        // 处理ACT2000动作
        break;
      ...
    }
  },
  onCloseAction: () {
    // 当FinpongPlus关闭时触发
    Navigator.pop(context);
  },
  onPageLoadStarted: () {
    // 页面加载开始时触发
  },
  onPageLoadFinished: () {
    // 页面加载完成时触发
    isLoading.value = false;
  },
)

2.2 entry参数说明

entry参数用于指定初始页面。具体值及其对应的页面如下：

2.3 serverMode参数说明

serverMode参数用于指定服务器模式。可选值包括staging和release。

3. 调用私钥证书

根据不同的平台和认证机构，需要传递相应的类型和包名或应用ID。

3.1 添加onUriScheme处理

在onUriScheme中编写代码以处理私钥证书的调用。

onUriScheme: (type, scheme) {
  /**
   * 该函数用于处理应用Schema调用。
   * 如果应用已安装，则启动应用Schema。
   * 如果未安装，则引导用户到应用商店下载。
   */
  canLaunchUrl(Uri.parse(scheme)).then((bool result) {
    setState(() async {
      if (result) {
        if (!await launchUrl(Uri.parse(scheme), mode: LaunchMode.externalApplication)) {
          throw Exception('Could not launch $scheme');
        }
      } else {
        !await launchUrl(
          Uri.parse('type별 스토어 url'),
          mode: LaunchMode.externalApplication,
        );
      }
    });
  });
}

4. FinpongPlus与应用通信

4.1 添加自定义操作处理

在onCustomAction中处理预定义的FinpongPlus动作。

onCustomAction: (pageId, params) {
  // 处理预定义的FinpongPlus动作
  switch(pageId){
    case 'ACT1000':
      // 处理ACT1000动作
      break;
    case 'ACT2000':
      // 处理ACT2000动作
      break;
    ...
  }
},

4.2 调用FinpongPlus脚本

创建并使用FinpongPlusController来运行JavaScript。

FinpongPlusController finpongPlusController = FinpongPlusController();

var testData = {"data1": 1, "data2": true};
String jsonString = jsonEncode(testData);

finpongPlusController.runJavaScript('scriptName', jsonString);

4.3 文件下载与上传

处理文件下载和上传的过程如下：

1. 当onCustomAction的pageId为PA-001时，调用客户自定义的上传弹窗。
2. 用户选择同意后，调用fileDataConnect函数传递数据。

var testData = {
  isUpload:false,     // 是否上传
  uploadRes:'',
  uploadMsg:'',
  isAgree : 'Y'       // 是否同意
};

String jsonString = jsonEncode(testData);

finpongPlusController.runJavaScript('fileDataConnect', jsonString);

1. 下载数据后，进行上传处理并调用fileDataConnect函数传递结果。

var testData = {
  isUpload:true,     // 是否上传
  uploadRes:'success',      // 上传状态
  uploadMsg:'上传成功',  // 上传消息
  isAgree : 'Y'
};

String jsonString = jsonEncode(testData);

finpongPlusController.runJavaScript('fileDataConnect', jsonString);