Flutter身份验证插件flutter_pipwave_ekyc的使用

Flutter身份验证插件flutter_pipwave_ekyc的使用

简介

Pipwave eKYC SDK 提供了一个预设计的图形用户界面（GUI），用于进行电子身份验证（eKYC）过程。在过程中，用户可能需要提交他们的身份证、驾驶执照、护照和自拍照，以及信用卡或账单等信息。

Pipwave eKYC SDK 为您创建最佳的身份验证体验提供了许多好处：

• 预设计的用户界面帮助用户从头到尾完成身份证和自拍照的eKYC过程。
• 可以轻松地与您的Flutter应用程序集成。
• 图像将安全地上载到Pipwave服务，从而简化了集成过程。

功能

身份验证

验证政府签发的身份证明文件，如护照、驾驶执照和州身份证。

信用卡验证

验证信用卡信息，以防止欺诈性交易。

地址证明验证

通过各种文档类型确认个人地址，包括公用事业账单、银行对账单和租赁协议。

安装

导入包

dependencies:
  flutter_pipwave_ekyc: 1.0.0

前提条件

添加相机和图库权限

iOS

1. 向Info.plist添加以下行：

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
   <dict>
       ...
       <key>NSCameraUsageDescription</key>
       <string>We need access to your camera to capture photos and videos.</string>
       <key>NSPhotoLibraryUsageDescription</key>
       <string>Access to your media gallery is required to share your photos or videos to the mobile app.</string>
       ...
   </dict>
   </plist>
   

2. 向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)',
   
               ## dart: PermissionGroup.camera
               'PERMISSION_CAMERA=1',
   
               ## dart: PermissionGroup.photos
               'PERMISSION_PHOTOS=1',
           ]
   
           end
       end
   end
   

Android

1. 向AndroidManifest.xml添加以下行：

   <manifest xmlns:android="http://schemas.android.com/apk/res/android">
       <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
       <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
       <uses-permission android:name="android.permission.CAMERA" />
   
       <application
           android:requestLegacyExternalStorage="true"
           ...>
           ...
       </application>
   </manifest>
   

添加本地化

iOS

1. 向Info.plist添加以下行：

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
   <dict>
       ...
       <key>CFBundleLocalizations</key>
       <array>
           <string>en</string>
       </array>
       ...
   </dict>
   </plist>
   

Android

无需更改。

启动SDK

初始化SDK

FlutterPipwaveEkyc.instance.launch(
    context,
    accessToken: '{{ACCESS_TOKEN}}',
    onSuccess: () {},
    onError: (error) {},
);

• accessToken: 用户需要进行eKYC过程的令牌。
• onSuccess: 当eKYC过程完成后触发的回调。
• onError: 当eKYC过程失败时触发的回调（参考下表识别错误类型）。

错误/异常类型

示例代码

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    const MaterialApp(
      home: MainApp(),
    ),
  );
}

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

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final _accessTokenTextEditingController = TextEditingController();
  final _logs = <String>[];

  [@override](/user/override)
  void dispose() {
    _accessTokenTextEditingController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              '欢迎来到Pipwave演示。',
              style: Theme.of(context)
                  .textTheme
                  .headlineMedium
                  ?.copyWith(fontWeight: FontWeight.w600),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 16),
            Text(
              '请输入您的eKYC访问令牌继续。',
              style: Theme.of(context)
                  .textTheme
                  .titleMedium
                  ?.copyWith(fontWeight: FontWeight.w600),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 16),
            TextField(
              autofocus: true,
              controller: _accessTokenTextEditingController,
              decoration: const InputDecoration(
                labelText: '访问令牌',
                hintText: '输入您的访问令牌',
                border: OutlineInputBorder(),
              ),
              onChanged: (_) => setState(() {}),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed:
                  _isButtonEnabled ? () => _launchEkycSdk(context) : null,
              child: const Text('继续'),
            ),
            if (_logs.isNotEmpty) ...[
              const SizedBox(height: 32),
              Text(
                '日志',
                style: Theme.of(context)
                    .textTheme
                    .headlineSmall
                    ?.copyWith(fontWeight: FontWeight.w600),
              ),
              const SizedBox(height: 16),
              Expanded(
                child: ListView.separated(
                  itemBuilder: (context, index) {
                    return Text(_logs[index]);
                  },
                  separatorBuilder: (_, __) => const Divider(),
                  itemCount: _logs.length,
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }

  String get _accessTokenText => _accessTokenTextEditingController.text.trim();

  bool get _isButtonEnabled => _accessTokenText.isNotEmpty;

  Future<void> _launchEkycSdk(BuildContext context) async {
    final accessToken = _accessTokenText.replaceAll('\n', '');

    await FlutterPipwaveEkyc.instance.launch(
      context,
      accessToken: accessToken,
      onSuccess: () => _addLog('eKYC成功'),
      onError: (error) => _addLog(error.toString()),
    );
  }

  void _addLog(String log) {
    if (!mounted) {
      return;
    }

    // ignore: parameter_assignments
    log = '${DateTime.now()}: $log';
    setState(() => _logs.add(log));
  }
}