曲稻劳务派遣系统App的使用指引

背景介绍

为了让客户更加便捷地体验App的集成效果，腾讯电子签在《电子签在劳务派遣场景下的集成应用》的基础上，进一步丰富了内容并扩展了功能。腾讯电子签为客户提供了一个全新的App嵌入H5的示例程序（demo），以实现电子签合同签署的功能。

在这个示例程序中，用户可以直观地感受到腾讯电子签在劳务派遣场景下的实际应用效果。通过将电子签功能嵌入到App中，劳务派遣企业和求职者可以轻松完成合同签署，大大提高了办事效率。同时，这种集成方式也为其他场景提供了借鉴，展示了腾讯电子签在各种场景下的广泛适用性。

使用说明

合同的发起是在劳务派遣系统 - 企业端，并且需要进行以下4个步骤，下文将通过图文带您去发起一份属于您的劳动合同。

1.添加工人：

您需要先访问劳务派遣系统 - 企业端（https://channel-demo.test.ess.tencent.cn/ ），登录体验账号：18722223333 密码：Qian2023. 如下图所示，进入到工人管理-未发起合同的页面。

点击上图中的添加工人按钮，将弹出添加工人的弹窗，如下图所示，您需要将个人的姓名和手机号及性别都填写进去，最好是真实的手机号和姓名，因为后续的签署流程会进行人脸识别验证，填写完后点击提交按钮。

2.发起合同：

在工人管理/未发起合同页面找到刚添加的工人信息，并点击发起合同按钮，会弹出发起弹窗，如下图所示，推荐使用说明模板，然后一直点击下步，直至发起成功。

3.签署合同

腾讯电子签的应用实例提供了App的下载链接，如下图所示，您可以下载安卓的App(因ios未正式发布，ios版App暂不能支持对外下载使用)安装到手机上。

安装好App后，打开App会进入到登录的页面，输入刚添加的工人账号， 密码是Qian2023。登录账号后，如下图所示：点击我的合同-待签署的图标，进入到我的合同列表页。点击合同，进入到签署页。

如下多图所示，进入到合同签署页后，您需要再进行常规的合同签署操作，完成签名-人脸识别-跳转到签署结果页。

4.查看合同

待App的工人账号签署完合同后，您可以通过web打开劳务派遣系统-企业端，登录上管理员的账号(账号：18722223333 密码：Qian2023)，进入到合同管理-劳动合同页面，https://channel-demo.test.ess.tencent.cn/contract/labor ，如下图所示，点击需要查看的合同，进入到合同详情页查看。

实现方案：

曲稻劳务派遣系统的App是通过flutter进行开发的，数据是使用node去调用腾讯电子签SDK来获取的，具体的使用方法可以参考腾讯电子签与劳务派遣系统的集成参考对接文档： https://docs.qq.com/doc/DRHNyRUx0bnJJYW53。

App中页面分为如下两种方式去实现：

1.常规页面

如首页、合同列表页和个人信息页面等都是用flutter去开发，并通过node服务通过电子签SDK去发请求获得页面数据, 这一部分内容并没有复杂的逻辑，您可以克隆代码到本地体验(https://gitee.com/tencent_ess/flutter-channel-demo )。

2.嵌入页面

在签署页面的设计中，我们针对不同的操作系统采用了不同的技术实现。对于iOS版本，我们通过Flutter WebView嵌入H5签署页面来实现签署功能；而在安卓版本中，我们采用了Flutter调用安卓原生WebView页面的方式，并接入了慧眼人脸SDK以实现人脸识别功能。

那么，为什么iOS不需要接入SDK，而安卓需要接入慧眼的SDK呢？这主要是因为安卓设备在兼容Flutter WebView的摄像头和麦克风授权能力方面存在一定的局限性，导致无法正常使用慧眼的人脸功能。为了解决这一问题，我们采用了在Flutter代码中调用安卓原生WebView的方式，并通过慧眼SDK来使用人脸API。

关于慧眼人脸SDK的具体使用方法，您可以参考腾讯慧眼人脸SDK文档进行详细了解。通过这种方式，我们确保了在不同操作系统下的签署页面都能够正常运行，并为用户提供了便捷的签署体验。

iOS部分的实现，您可以参考APP的代码仓库。以下将对针对安卓的技术实现做详细的解释, webview的页面代码如下(https://gitee.com/tencent_ess/flutter-channel-demo/tree/master/lib/pages/webview )：

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_channel_demo/utils/tools.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';

class WebviewPage extends StatefulWidget {
  Map arguments;

  WebviewPage({super.key, required this.arguments});

  @override
  State<WebviewPage> createState() => _WebviewPageState();
}

class _WebviewPageState extends State<WebviewPage> {
  WebViewController? _webviewController;
  late final String _title;
  Future<bool> _exitApp(BuildContext context) async {
    if (await _webviewController!.canGoBack()) {
      debugPrint("onWill goBack");
      _webviewController!.goBack();
      return Future.value(false);
    } else {
      debugPrint("_exit will not go back");
      return Future.value(true);
    }
  }

  @override
  void initState() {
    setState(() {
      _title = widget.arguments["title"] ?? 'webview';
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(appBar: AppBar(title: Text(_title)), body: h5WebView()),
        onWillPop: () => _exitApp(context));
  }

  Widget h5WebView() {
    if (defaultTargetPlatform == TargetPlatform.android) {
      return AndroidView(
        viewType: 'plugins.flutter.io/custom_platform_view',
        creationParams: {'url': widget.arguments['url'], 'text': _title},
        creationParamsCodec: const StandardMessageCodec(),
      );
    } else {
      return WebView(
        initialUrl: widget.arguments['url'],
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _webviewController = webViewController;
        },
        navigationDelegate: (NavigationRequest request) {
          if (request.url.indexOf(".ess.tencent.cn/m/") > -1) {
            debugPrint("即将打开 ${request.url}");
            switchTab(context, '/contracts');
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      );
    }
  }
}

如下图所示，安卓原生的custom_platform_view的页面逻辑是在flutter项目的app/src/main/java目录下创建con.ess.flutter.channel目录，目录下WBH5FaceVerifySDK.java是慧眼人脸的SDK文件，使用参考(https://cloud.tencent.com/document/product/1007/61076 ), 其余的四个文件都是注册原生页面和使用SDK的代码文件，具体代码可以参考(https://gitee.com/tencent_ess/flutter-channel-demo/tree/master/android/app/src/main )：

相关文档

• 腾讯慧眼人脸SDK文档
• 腾讯电子签第三方应用集成对接说明文档
• 腾讯电子签-曲稻劳务派遣系统App代码地址

结语

以上内容就是腾讯电子签-曲稻劳务派遣系统APP的使用指引的全部内容。如果您有任何疑问，都可以访问腾讯电子签开发者交流社区进行留言, 我们会第一时间给您满意答复。