活体人脸验证服务为您提供UI定制功能,您可以根据实际需要自定义实人认证页面的按钮颜色、文案颜色、文案字体大小和图片资源等信息。

前提条件

  • 需要使用的实人认证iOS SDK版本和Android SDK版本均在4.6.2版本及以上。
  • 已进行Android集成iOS集成

UI定制功能概览

功能定制

支持UI定制的内容如下:

  • ①表示关闭按钮;②表示动作提示文案颜色、字体大小。
  • ③表示未检测到人脸时呼吸灯颜色。
  • ④表示对话框标题文案颜色和字体大小;⑤表示对话框按钮文案颜色和字体大小。
  • ⑥表示加载动画颜色。
  • ⑦表示验证结果图标;⑧表示验证结果文案颜色和字体大小;⑨表示主按钮背景颜色、图片和按钮文案颜色、字体大小和文本内边距。
  • ⑩表示banner背景颜色。
  • ⑪表示隐私授权声明图标。
  • ⑫进度条当前操作和下一步操作的文案颜色、进度条背景颜色。
  • ⑬表示上一步操作的文案颜色、进度条背景颜色;⑭表示拍照页示例文案的背景颜色。
  • ⑮表示对话框按钮文案颜色和字体大小。
  • ⑯表示认证结果图标;⑰表示认证结果标题文案颜色、字体大小。

UI定制的规范和协议

  • 自定义规范
    • 图片:图片命名需要说明是二倍图或者三倍图,如:xxx@2x.png、xxx@3x.png。
    • 色值:H5页面只支持RGB,iOS和Android支持ARGB,即支持透明度。色值命名需要以#开头,例如#FFFFFF。
    • 单位:字体大小、图片尺寸、边距的单位是px。
  • 自定义协议

    实人认证SDK包含完整的Demo示例,您可以根据Demo示例定制相关设置,不填写表示使用默认值。

    协议分类:

    • Global:全局配置,当前配置为空时则取全局配置。
    • Native:原生相关页面的配置,如活体检测页面、活体验证不通过页面。
    • Web:H5页面相关配置,如开始认证页面、授权声明页面、身份证拍照页面、认证不通过结果页面等。

UI定制方法

创建资源目录

  • RPSkin.json:皮肤配置文件。
  • Resources:存放RPSkin.json皮肤文件中指定的图片资源。
说明 RPSkin.jsonResources文件的命名不可以更改。

对于实人认证SDK来说,资源包可以是任何形式(例如xxx.bundle、普通文件夹等),只要保证最终的目录结构如下即可。

目录

客户端接入

  • iOS接入
    // 配置类
    RPConfiguration *configuration = [RPConfiguration configuration];
    ...
    // 设置皮肤路径即可,不设置则使用默认皮肤。
    configuration.customUIPath = @"xxx/xxx/xxx";
    [RPSDK startByNativeWithVerifyToken:verifyToken
                         viewController:self
                          configuration:configuration
                               progress:^(RPPhase phase) { }
                             completion:^(RPResult * _Nonnull result) {
        NSLog(@"实人认证结果:%@", result);
    }];
  • Android接入
    RPConfig.Builder configBuilder = new RPConfig.Builder()
                    .setSkinInAssets(true) // 是否是内置皮肤。
                    .setSkinPath(xxx/xxx); // 设置皮肤路径。
    RPConfig config = configBuilder.build();
    
    // 入口1
    RPVerify.startByNative(this, mVerifyToken, config, new RPEventListener() {
                @Override
                public void onFinish(RPResult rpResult, String code, String msg) {
                    Log.d(TAG, "RPVerify onFinish rpResult.code=" + rpResult.code + ",rpResult.message=" + rpResult.message + ",code=" + code + ",msg: " + msg);
                    Toast.makeText(getActivity(), "认证结果:" + rpResult.message + " 状态码:" + code + " message: " + msg, Toast.LENGTH_SHORT).show();
                }
            });
    
    // 入口2
    RPVerify.start(this, mVerifyToken, config, new RPEventListener() {
                @Override
                public void onFinish(RPResult rpResult, String code, String msg) {
                    Log.e(TAG, "RPVerify onFinish rpResult.code=" + rpResult.code + "rpResult.message=" + rpResult.message + " code=" + code);
                    Toast.makeText(getActivity(), "认证结果:" + rpResult.message + " 状态码:" + code, Toast.LENGTH_SHORT).show();
                }
            });

功能定制

  • 设置活体检测页面

    协议类别:Native

    活体检测页面

    代码示例

    "global": { // 全局配置。
       //...       
       "navigator": { // 活体过程页面上方的按钮。
          "closeImageView": { // ①页面左上角关闭图片。
              "src": "face_close_btn@2x.png" // 尺寸:64*64
           }
       }
    },                    
    "detectPage": { // 活体检测页面。
       "actionTipText": { // ②动作提示文案,例如,左右摇头。
           "textColor": "#333333", // 文案颜色。
           "fontSize": 48 // 文案字体大小。
       },
       "messageText": { // ②消息文案。
            "textColor": "#999999", // 文案颜色。
            "fontSize": 48 // 文案字体大小。
       }
    }
  • 设置未检测到人脸页面

    协议类别:Native

    面孔页面

    代码示例

    "global": { // 全局配置。
       //...       
       "navigator": { // 活体过程页面上方的按钮。
          "closeImageView": { // ①页面左上角关闭图片。
              "src": "face_close_btn@2x.png" // 尺寸:64*64
           }
       }
    },                    
    "detectPage": { // 未检测到人脸页面。
       "detectAnimation": { // ③活体检测未检测到人脸时的呼吸灯颜色。当SDK版本号在4.8.0版本及以上版本,才有这个页面。
            "warningColor": "#F6493F"
       }
    }
  • 设置退出活体检测对话框

    协议类别:Native

    退出

    代码示例

    "native": { // 原生页面相关配置。
       "global": { // 原生下面生效的全局配置。
           "alertDialog": { // 通用弹窗。
           "positiveText": {// ⑤文案,例如,确认。
                "textColor": "#FD521F", // 文案颜色。
                "fontSize": 32 // 文案字体大小。
           },
           "negativeText": {// ⑤文案,例如,取消。
                "textColor": "#FE9779", // 文案颜色。
                "fontSize": 32 // 文案字体大小。
           },
           "titleText": {// ④主标题文案,例如,人脸验证即将完成,确认退出?
                "textColor": "#333333",
                "fontSize": 32
           }
       }
    }
  • 设置活体检测加载页面

    协议类别:Native

    进度

    代码示例

    "global": { // 全局配置。
       //...       
       "navigator": { // 活体过程页面上方的按钮。
          "closeImageView": { // ①页面左上角关闭图片。
              "src": "face_close_btn@2x.png" // 尺寸:64*64
           }
       }
    },                    
    "detectPage": { // 活体检测加载页面。
       "detectAnimation": { // ⑥活体检测结束后加载动画效果颜色。当SDK版本号在4.8.0版本及以上版本,才有这个页面。
            "loadingColor": "#188FFF" 
       }
    }
  • 设置活体验证不通过页面

    协议类别:Native和Global

    验证不通过

    代码示例

    "resultPage": { // 识别结果页。
        "titleText": { // ⑧主标题文案,例如,验证不通过。
             "textColor": "#333333",
             "fontSize": 40
        },
        "messageText": { // ⑧副标题文案,例如,请保持面部在框内,并按提示做动作。
             "textColor": "#333333",
             "fontSize": 30
        },          
        "promptFailImageView": { // ⑦失败时的按钮。
             "src": "face_result_icon_fail@2x.png" // 尺寸:173*173
        },
        "promptSucceedImageView": { // ⑦成功时的按钮。
             "src": "face_result_icon_ok@2x.png" // 尺寸:173*173
        },
        "mainButton": { // ⑨主按钮信息,例如,再来一次。您也可以使用global协议全局配置主按钮信息。此处该按钮的信息可以为空,如果为空则使用global中的配置。               
             "backgroundColor": "#00FFFFFF",
             "backgroundImage": "face_confirm_button@2x.png", // 尺寸:686*88
             "textColor": "#FFFFFF",
             "fontSize": 32,
             "textPadding": {
             "left": 0,
             "right": 0,
             "top": 0,
             "bottom": 0
        }
    }
  • 设置开始认证页面

    协议类别:Global和Web

    开始认证

    代码示例

    "guidePage": { // H5认证引导页。
        "mainButton": { // ⑨主按钮信息,例如,开始认证。您也可以使用global协议全局配置主按钮信息。此处该按钮的信息可以为空,如果为空则使用global中的配置。
            "backgroundColor": "#00FFFFFF",
            "backgroundImage": "face_confirm_button@2x.png", // 尺寸:686*88
            "textColor": "#FFFFFF",
            "fontSize": 32,
            "textPadding": {
                "left": 0,
                "right": 0,
                "top": 0,
                "bottom": 0
             }
        },
        "bannerContainer": { // ⑩H5认证引导页上方的banner。
            "backgroundColor": "#FD521F" // banner背景颜色。
        }
    }
  • 设置授权声明页面

    协议类别:Web

    授权

    代码示例

    "privacyPage": { // H5用户授权声明页面.
        "mainButton": { // ⑨主按钮信息,例如,同意按钮。您也可以使用global协议全局配置主按钮信息。此处该按钮的信息可以为空,如果为空则使用global中的配置。
            "backgroundColor": "#00FFFFFF",
            "backgroundImage": "face_confirm_button@2x.png", // 尺寸:686*88
            "textColor": "#FFFFFF",
            "fontSize": 32,
            "textPadding": {
                "left": 0,
                "right": 0,
                "top": 0,
                "bottom": 0
            }
         },
         "logoImageView": { // ⑪用户隐私授权页面上方的按钮图片。
                "src": "web_icon-check-shield@2x.png" // 尺寸:200*200
         }
    }
  • 设置输入姓名和身份证号码页面

    协议类别:Web

    输入

    代码示例

     "web": { // H5相关页面配置,如果您对接的实人认证方案中没有用到H5页面则不需要关注。
       "global": { // web配置下面的全局配置,仅对web H5页面生效。
         //...
         "mainButton": { // ⑨主按钮信息,例如,下一步按钮。您也可以使用global协议全局配置主按钮信息。此处该按钮的信息可以为空,如果为空则使用global中的配置。
                    "backgroundColor": "#00FFFFFF",
                    "backgroundImage": "face_confirm_button@2x.png", // 尺寸:686*88
                    "textColor": "#FFFFFF",
                    "fontSize": 32,
                    "textPadding": {
                        "left": 0,
                        "right": 0,
                        "top": 0,
                        "bottom": 0
                    }
         },
         "stepBarContainer": { // ⑫进度条设置,在RPBasic、RPManual、RPBioID方案中会涉及。
                      "todoTextColor": "#FFFFFF",  // 下一步操作的文案颜色。
                      "todoBackgroundColor": "#D1D1D1", // 下一步操作的进度条背景色。
                      "currentTextColor": "#FFFFFF", // 当前操作的进度条文案颜色。
                      "currentBackgroundColor": "#FF631D", // 当前操作的进度条背景色。
         } 
       } 
    }               
  • 设置身份证拍照页面

    协议类别:Web

    身份证

    代码示例

    "web": { // H5相关页面配置,如果您对接的实人认证方案中没有用到H5页面则不需要关注。
       "global": { // web配置下面的全局配置,仅对web H5页面生效。
         //...
         "photoPage": { // 拍照页。
                "exampleContainer": { // ⑭拍照示例容器,例如,示例。
                    "backgroundColor": "#FD521F" // 拍照示例页面中,文案的背景颜色。
                },
                "mainButton": { // ⑨主按钮信息,例如,立即拍照按钮。您也可以使用global协议全局配置主按钮信息。此处该按钮的信息可以为空,如果为空则使用global中的配置。
                    "backgroundColor": "#00FFFFFF",
                    "backgroundImage": "face_confirm_button@2x.png", // 尺寸:686*88
                    "textColor": "#FFFFFF",
                    "fontSize": 32,
                    "textPadding": {
                        "left": 0,
                        "right": 0,
                        "top": 0,
                        "bottom": 0
                    }
                },
                "stepBarContainer": { // ⑬进度条设置,在RPBasic、RPManual、RPBioID方案中会涉及。
                      "currentTextColor": "#FFFFFF", // 当前操作的进度条文案颜色。
                      "currentBackgroundColor": "#FF631D", // 当前操作的进度条背景色。
                      "doneTextColor": "#FFFFFF", // 上一步操作的进度条文案颜色。
                      "doneBackgroundColor": "#FD8127" // 上一步操作的进度条背景色。
                }
        }
  • 设置请检查姓名和证件号码是否正确对话框

    协议类别:Web

    拍照

    代码示例

    "web": { // H5相关页面配置,如果您对接的实人认证方案中没有用到H5页面则不需要关注。
            "global": { // web配置下面的全局配置,仅对web H5页面生效。
                "alertDialog": { // 通用对话弹窗。
                    "positiveText": {  // ⑮确认按钮文案,例如,更正信息。
                        "textColor": "#FD521F",
                        "fontSize": 32
                    },
                    "negativeText": {  // ⑮取消按钮文案,例如,重拍证件。
                        "textColor": "#FE9779",
                        "fontSize": 32
                    }
                }
    }
  • 设置认证不通过结果页面

    协议类别:Web

    认证不通过

    代码示例

    "resultPage": { // H5认证结果页。
              "mainButton": { // ⑨主按钮信息,例如,再来一次按钮。您也可以使用global协议全局配置主按钮。此处该按钮的信息可以为空,如果为空则使用global中的配置。
                    "backgroundColor": "#00FFFFFF",
                    "backgroundImage": "face_confirm_button@2x.png", // 尺寸:686*88
                    "textColor": "#FFFFFF",
                    "fontSize": 32,
                    "textPadding": {
                        "left": 0,
                        "right": 0,
                        "top": 0,
                        "bottom": 0
                    }
               },
               "titleText": { // ⑰文案信息,例如,重新认证。
                    "textColor": "#FFFFFF",
                    "fontSize": 32
               },
               "messageText": { // ⑰文案信息,例如,认证不通过。
                    "textColor": "#FFFFFF",
                    "fontSize": 32
               },
               "promptFailImageView": { // ⑯认证不通过时的按钮。
                    "src": "face_result_icon_fail@2x.png" // 尺寸:173*173
               },
               "promptSucceedImageView": { // ⑯认证成功时的按钮。
                    "src": "face_result_icon_ok@2x.png" // 尺寸:173*173
               }
    }

变更记录

发布时间 SDK版本 说明
2021.03.31 PRSDK4.8.0
  • 新增活体检测环节的呼吸灯效果(detectAnimation中的warningColor)和加载动画效果(detectAnimation中的loadingColor)。
  • 删除活体检测环节的识别幅度波纹动画效果(原detectAnimation中的normalColor和highlightColor)。
  • 删除活体检测页面,右上角的声音按钮(soundOnImageView和soundOffImageView )。
2021.01.22 PRSDK4.8.0 第一次正式发布。