# 刷脸小程序跳转中间页DEMO

**Repository Path**: fadada-cloud/pages-face-demo

## Basic Information

- **Project Name**: 刷脸小程序跳转中间页DEMO
- **Description**: 刷脸小程序跳转中间页DEMO
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-02-17
- **Last Updated**: 2025-12-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 刷脸小程序跳转中间页DEMO
## 微信小程序集成法大大页面开发流程

**概要说明**

1. 受微信小程序人脸识别能力接入资质限制，集成方无法在自身小程序内部接入微信小程序原生人脸识别能力；可按照此方案对接法大大认证/签署业务，并使用法大大刷脸小程序资质，实现小程序人脸识别能力支持；
2. 该对接方式，需要集成方在自身小程序中，通过web-view方式对接集成授权/签署url页面；在授权/签署业务流程进行到需要人脸识别的环节中时，跳转到法大大提供的人脸识别小程序中，完成刷脸；刷脸完成后会自动跳回原小程序，完成后续流程；

3. 但由于web-view能力限制，无法触发小程序跳转，需要借助小程序原生中间面实现；需要集成方配合开发小程序原生中间页(具体见法大大提供中间页的开发规范)；
4. 同样，用户完成刷脸后，也会从人脸识别小程序中跳转回中间页中，中间页会二次重定向至授权/签署url中，以获取授权/签署结果；

**流转时序图**
![输入图片说明](assets/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%9B%86%E6%88%90-%E6%B5%81%E8%BD%AC%E6%97%B6%E5%BA%8F%E5%9B%BE.png)

**认证流图**
![输入图片说明](assets/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%9B%86%E6%88%90-%E8%AE%A4%E8%AF%81%E6%B5%81%E7%A8%8B1.png)

![输入图片说明](assets/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E9%9B%86%E6%88%90-%E8%AE%A4%E8%AF%81%E6%B5%81%E7%A8%8B2.png)


## **接入流程**

**小程序端开发接入**

如接入方有小程序集成刷脸场景，需要在法大大业务域名下，配置接入方小程序的校验文件，具体请参见微信小程序业务域名配置说明：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/domain.html。

请根据上述说明，下载校验文件，然后联系法大大运营进行配置。

**中间页嵌入（注：针对原生小程序，小程序框架详见小程序框架接入中间页）**

如上述时序图示例，集成法大大刷脸小程序，需要接入方小程序添加一个中间页进行跳转完成，中间页嵌入的步骤如下：

1. 在接入方小程序的app.json中，增加分包配置代码


  ```
{
      "root": "pagesFace",
      "name": "pagesFace",
      "pages": [
        "pages/index/index",
        "pages/webview/webview",
        "pages/middle/middle",
        "pages/avsMiddlePage/avsMiddlePage"
      ]
    }
  ```

2. 在[法大大开放平台-服务与支持-资源下载](https://dev.fadada.com/api-tools)中，下载“刷脸小程序跳转中间页DEMO”代码包，并替换pagesFace目录下的全部文件。

3. 通过集成法大大服务端API接口（详见[服务端开发接入](https://dev.fadada.com/api-doc/W6MIOHNFNT/90M5Y9AS1ZWEWHLE)），获取到对应场景的集成页面链接，在打开这些链接的页面中，增加reloadPage方法（可参考webview.js）。


  ```
reloadPage(url) {
    console.log('---webview reloadPage', url)
    this.setData({
      url,
    })
}
  ```

注意：传递的参数需经过encodeURIComponent处理。

## 小程序框架接入中间页
1. 在[法大大开放平台-服务与支持-资源下载](https://dev.fadada.com/api-tools)中，下载“刷脸小程序跳转中间页DEMO”代码包，并将代码包pagesFace文件夹拷贝到工程src目录下。
2. 修改工程构建配置，引入pagesFace/plugin文件夹下提供的插件，插件参数为代码包路径（参考下面接入代码示例）。
3. 代码包提供了commonjs(pagesFace/plugin/cjs.js)、esmodule(pagesFace/plugin/esm.js)两个版本的webpack和rollup插件，请按需使用。
4. **使用pagesFace内置的webview页面打开需要刷脸的H5链接。** 
    ```js
    wx.navigateTo({
      url: '/pagesFace/pages/webview/webview?url=' + encodeURIComponent(url)
    })
    ```

5. 接入代码示例：

    **uni-app接入**（webpack构建，完整示例在git仓库demo-uni-webpack文件夹）

    注意：仅支持vue-cli创建的uni-app工程，文档地址：https://uniapp.dcloud.net.cn/quickstart-cli.html

    ```js
    // vue.config.js (commonjs)
    const path = require('path')
    const { PagesFaceWebpackPlugin } = require('./src/pagesFace/plugin/cjs')
    
    module.exports = {
      configureWebpack: {
        plugins: [
          new PagesFaceWebpackPlugin(path.resolve(__dirname, './src/pagesFace'))
        ]
      }
    }
    ```

    **uni-app接入**（vite构建，完整示例在git仓库demo-uni-vite文件夹）

    注意：仅支持vue-cli创建的uni-app工程，文档地址：https://uniapp.dcloud.net.cn/quickstart-cli.html

    ```js
    // vite.config.js (esmodule)
    import path from 'path'
    import { defineConfig } from 'vite'
    import { PagesFaceRollupPlugin } from './src/pagesFace/plugin/esm'
    
    export default defineConfig({
      plugins: [
        PagesFaceRollupPlugin(path.resolve(__dirname, './src/pagesFace'))
      ]
    })
    ```

    **taro接入**（webpack构建，完整示例在git仓库demo-taro文件夹）

    ```js
    // config/index.js (commonjs)
    const path = require('path')
    const { PagesFaceWebpackPlugin } = require(path.resolve(__dirname, '../src/pagesFace/plugin/cjs'))
    
    const config = {
      mini: {
        webpackChain(chain) {
          chain.merge({
            plugin: {
              install: {
                plugin: PagesFaceWebpackPlugin,
                args: [path.resolve(__dirname, '../src/pagesFace')]
              }
            }
          })
        }
      }
    }
    ```
    
## **服务端开发接入**

1. 如集成方微信小程序需支持用户做法大大实名帐号绑定，且让用户采用人脸识别方式完成认证、授权，可集成服务端API：[获取个人用户授权链接](https://dev.fadada.com/api-doc/CAYYE0XR5X/SQERXP7J0BG3SEPJ/5-1)。
2. 如集成方微信小程序需支持企业做法大大实名帐号绑定，且让经办人采用人脸识别方式完成认证、授权，可集成服务端API：[获取企业用户授权链接](https://dev.fadada.com/api-doc/IJHEEAABMG/8L4DROUUSUPQBEWI/5-1)。
3. 如需集成方微信小程序集成签署页面，且让参与方采用人脸识别方式完成意愿确认，可集成服务端API：[获取应用的签署任务详情](https://dev.fadada.com/api-doc/MZCVUQWXWH/JVNZRH2KGVJR1GEY/5-1)，来获取参与方的签署任务专属链接。

## **版本日志**
- v2.0：对 v1.0 进行优化，完全兼容，可直接替换使用