ZOLOZZOLOZDOCS

多业务场景下自动加载相应的UI配置文件

本文以RealID产品为例，介绍在同一个账号下，根据两个不同的业务场景，实现自动加载相应UI配置文件的配置流程。

Android SDK

步骤一：配置UI并导出配置文件

  1. 登录ZOLOZ Portal。
    不同站点和环境对应的ZOLOZ Portal地址不同，请根据您的实际站点和环境选择登录地址，详见选择站点和环境。
  2. 进入UI Configuration页面，根据实际业务需求配置UI。
    • Scene types选择Native SDK。
    • Product types选择RealID。
    • 根据实际业务需求，设置Languages、Document types，配置标题栏颜色、标题栏文字颜色等。
  1. 完成UI配置后单击Export，将配置文件导出到本地。
    如果您的业务涉及多个场景，需要使用不同的UI配置，可重复上述步骤，为各场景分别配置并导出相应的UI配置文件。

步骤二：导入配置文件到Android项目，并调用ZOLOZ

  1. 重命名配置文件。
    对导出的配置文件进行重命名，本文示例中将配置文件重命名为config_realId_native_scene_A.zip和config_realId_native_scene_B.zip。
  2. 将重命名后的配置文件添加到app模块的assets目录下，具体路径为app/src/main/assets。
    image.png
  3. 自行编写代码，实现不同业务场景自动加载相应的UI配置文件。
    以下是示例代码，其中isRealIdProductSceneA()和isRealIdProductSceneB()方法需要您根据实际业务情况自行实现。
copy
public void startZoloz(View view) {
    // ...
    final ZLZFacade zlzFacade = ZLZFacade.getInstance();
    final ZLZRequest request = new ZLZRequest();
    request.zlzConfig = initResponse.clientCfg;
    request.bizConfig.put(ZLZConstants.CONTEXT, MainActivity.this);
    request.bizConfig.put(ZLZConstants.LOCALE, "en");
    
    if (isRealIdProductSceneA()) {
        request.bizConfig.put(ZLZConstants.CHAMELEON_CONFIG_PATH, "config_realId_native_scene_A.zip");
    } else if (isRealIdProductSceneB()) {
        request.bizConfig.put(ZLZConstants.CHAMELEON_CONFIG_PATH, "config_realId_native_scene_B.zip");
    }

    zlzFacade.start(request, new IZLZCallback() {
                            @Override
                            public void onCompleted(ZLZResponse response) {
                                checkResult(initResponse.transactionId);
                            }

                            @Override
                            public void onInterrupted(ZLZResponse response) {
                                showResponse(initResponse.transactionId, JSON.toJSONString(response));
                                Toast.makeText(MainActivity.this, "interrupted", Toast.LENGTH_SHORT).show();
                            }
                        });
}

iOS SDK

步骤一：配置UI并导出配置文件

  1. 登录ZOLOZ Portal。
    不同站点和环境对应的ZOLOZ Portal地址不同，请根据您的实际站点和环境选择登录地址，详见选择站点和环境。
  2. 进入UI Configuration页面，根据实际业务需求配置UI。
    • Scene types选择Native SDK。
    • Product types选择RealID。
    • 根据实际业务需求，设置Languages、Document types，配置标题栏颜色、标题栏文字颜色等。
  1. 完成UI配置后单击Export，将配置文件导出到本地。
    如果您的业务涉及多个场景，需要使用不同的UI配置，可重复上述步骤，为各场景分别配置并导出相应的UI配置文件。

步骤二：将配置文件引入工程

  1. 重命名配置文件。
    对导出的配置文件进行重命名，本文示例中将配置文件重命名为config_realId_native_scene_A.zip和config_realId_native_scene_B.zip。
  2. 将配置文件引入工程。
    将重命名后的配置文件复制到您的工程目录中，并确保正确引用这些文件。
    image.png
  3. 验证配置文件的可访问性。
    在您的主工程中编写测试代码，确保引入的配置文件能够被正常访问。以下是示例代码：
copy
NSString* pathA = [[NSBundle mainBundle] pathForResource:@"config_realId_native_scene_A" ofType:@"zip"];
NSLog(@"resource_SceneA_%@",pathA);
NSString* pathB = [[NSBundle mainBundle] pathForResource:@"config_realId_native_scene_B" ofType:@"zip"];
NSLog(@"resource_SceneB_%@",pathB);

步骤三：调用ZOLOZ

  1. 创建bizConfig，并设置语言和配置文件路径。
    在本文示例中，将语言设置为英语，当业务场景为SCENE_A时，加载config_realId_native_scene_A.zip，否则加载config_realId_native_scene_B.zip。以下是示例代码：
copy
//创建bizConfig字典
NSMutableDictionary *bizConfig = [NSMutableDictionary dictionary];

//设置当前的视图控制器
[bizConfig setObject:self forKey:kZLZCurrentViewControllerKey];

//设置语言
[bizConfig setValue:@"zh-en" forKey:kZLZLocaleKey];

//设置公钥
if ([data objectForKey:@"rsaPubKey"]) {
    [bizConfig setObject:[data objectForKey:@"rsaPubKey"] forKey:kZLZPubkey];
}

//设置配置文件路径
NSString* pathA = [[NSBundle mainBundle] pathForResource:@"config_realId_native_scene_A" ofType:@"zip"];
NSLog(@"resource_SceneA_%@",pathA);
NSString* pathB = [[NSBundle mainBundle] pathForResource:@"config_realId_native_scene_B" ofType:@"zip"];
NSLog(@"resource_SceneB_%@",pathB);

//根据不同业务场景，加载相应的配置文件
if(SCENE_A)
{
    [bizConfig setObject:pathA forKey:kZLZChameleonConfigKey];
}
else
{
    [bizConfig setObject:pathB forKey:kZLZChameleonConfigKey];
}
  1. 创建ZLZRequest实例并发起认证。
    使用clientCfg和bizConfig创建ZLZRequest实例，并发起认证请求。以下是完整的示例代码：
copy
NSMutableDictionary *bizConfig = [NSMutableDictionary dictionary];

//设置当前的视图控制器
[bizConfig setObject:self forKey:kZLZCurrentViewControllerKey];

//设置语言
[bizConfig setValue:@"zh-en" forKey:kZLZLocaleKey];

//设置公钥
if ([data objectForKey:@"rsaPubKey"]) {
    [bizConfig setObject:[data objectForKey:@"rsaPubKey"] forKey:kZLZPubkey];
}

//设置配置文件路径
NSString* pathA = [[NSBundle mainBundle] pathForResource:@"config_realId_native_scene_A" ofType:@"zip"];
NSLog(@"resource_SceneA_%@",pathA);
NSString* pathB = [[NSBundle mainBundle] pathForResource:@"config_realId_native_scene_B" ofType:@"zip"];
NSLog(@"resource_SceneB_%@",pathB);

if(SCENE_A)
{
    [bizConfig setObject:pathA forKey:kZLZChameleonConfigKey];
}
else
{
    [bizConfig setObject:pathB forKey:kZLZChameleonConfigKey];
}



NSString *clientConfig = [data objectForKey:@"clientCfg"];

NSString *transactionId = [data objectForKey:@"transactionId"];
NSLog(@"transactionId_%@",transactionId);


//创建ZLZRequest实例
ZLZRequest *request = [[ZLZRequest alloc] initWithzlzConfig:clientConfig bizConfig:bizConfig];

[[ZLZFacade sharedInstance] startWithRequest:request completeCallback:^(ZLZResponse * response) {
    dispatch_async(dispatch_get_main_queue(), ^{
        [self checkResultWithId:transactionId];
    });
    } interruptCallback:^(ZLZResponse * response) {
    [self simpleAlertWithTitle:@"interrupt" andMessage:[NSString stringWithFormat:@"retcode:%@,extinfo:%@",response.retcode,response.extInfo]];
    }];

Web SDK

步骤一：配置UI并导出配置文件

  1. 登录ZOLOZ Portal。
    不同站点和环境对应的ZOLOZ Portal地址不同，请根据您的实际站点和环境选择登录地址，详见选择站点和环境。
  2. 进入UI Configuration页面，根据实际业务需求配置UI。
    • Scene types选择Web SDK。
    • Product types选择RealID。
    • 根据实际业务需求，设置Languages、Document types，配置标题栏颜色、标题栏文字颜色等。
  1. 完成UI配置后单击Export，将配置文件导出到本地。
    如果您的业务涉及多个场景，需要使用不同的UI配置，可重复上述步骤，为各场景分别配置并导出相应的UI配置文件。Web SDK导出的配置文件包括以下两个：
      • zip压缩包：用于在ZOLOZ Portal的UI Configuration页面导入后还原配置。
      • JSON文件：用于配置SDK。您需要将该文件上传到服务器，并将其作为langPack参数进行配置。

步骤二：存储配置文件并验证

Web SDK通过传递不同的langPack路径实现UI定制，从而满足不同业务场景下自动加载相应UI配置文件的需求。具体实现步骤如下：

  1. 重命名配置文件。
    对导出的配置文件进行重命名，本文示例中将配置文件重命名为scene_A.zip和scene_B.zip。
  2. 存储UI配置文件并验证。
    1. 根据不同业务场景，将重命名后的配置文件分别存储在不同的路径下，例如CDN或网络存储中，并确保对ZOLOZ Web SDK域名开放访问权限。存储成功后，您的存储空间中应具有如下目录结构：
copy
/zoloz-langPack
  /scene_A.js
  /scene_B.js
    1. 验证配置文件的可访问性。
      在浏览器地址栏输入配置文件的路径，测试是否能够正常访问该文件，以确保其可访问性。
      image.png

步骤三：自动加载UI配置文件

以下是根据不同业务场景自动加载相应UI配置文件的示例代码：

copy
// 场景配置表
const sceneConfig = {
  default: '/zoloz-langPack/default.json',  // 默认
  sceneA: '/zoloz-langPack/sceneA.json',   // 场景A
  sceneB: '/zoloz-langPack/sceneB.json'    // 场景B
  // 可扩展其他场景...
}

// 获取场景对应的WebSDK地址
function getWebSdkUrl(scene = 'default') {
  const langPack = sceneConfig[scene] || sceneConfig.default;
  return `${realidUrl}?clientcfg=${encodeURIComponent(clientCfg)}&langPack=${encodeURIComponent(langPack)}`;
}

// 使用示例
const webSdkUrl = getWebSdkUrl('sceneA');  // 传入当前场景名