HarmonyOS +image显示https SSL证书过期的图片

1.问题说明：

在HarmonyOS中使用Image组件加载https路径的图片时，发现无法显示图片。

2.原因分析

如在加载图片时报错如下：

{"componentWidth":1260,"componentHeight":390,"message":"empty sourceFailed to create image loader, Image source type not supported"}

接着，用http的get方法进行请求图片路径，结果报错如下：

 code: 2300060, message: SSL peer certificate or SSH remote key was not OK

根据报错，可推测是HTTPS安全证书出了问题；

3.解决思路

既然是证书出了问题，那就在远程服务端修改证书或者客户端配置图片所对应服务端相应的SSL安全证书就可以了；也可以通过跳过安全验证的方式进行加载；

本篇主要讲HarmonyOS上通过跳过安全验证的方式下载图片并展示

4.解决方案

跳过SSL安全验证

可参考：RCP

在鸿蒙RCP中，有一个”

remoteValidation

“变量，当remoteValidation为skip时，表示跳过安全验证：

 let securityConfig: rcp.SecurityConfiguration =(isSsl===true)?{

      remoteValidation: 'skip',//system        skip-跳过
      certificate: {
        content: "-----BEGIN CERTIFICATE-----\n...",
        type: "PEM",
        key: "-----BEGIN PRIVATE KEY-----\n...", //请根据自身业务选择合适的key
        keyPassword: "your-password"
      },
      serverAuthentication: {
        credential: {
          username: "exampleUser",
          password: "examplePassword"
        },
        authenticationType: "basic"
      }
    }:{
      remoteValidation: 'skip'  // 显式声明跳过验证
    };

  // Use the security configuration in the session creation
  const session = rcp.createSession({ requestConfiguration: { security: securityConfig } });

     await session.get(apiuri).then((response:rcp.Response)=>{
      console.info(` Succeeded in getting the response ${response.body}`);
       


    }).catch((err:BusinessError)=>{
      console.error(` err: err code is ${err.code}, err message is ${JSON.stringify(err)}`);
      
    })

这时，我们可以使用rcp.createSession().get() 进行获取https链接的图片数据；然后把获取的数据转化成PixelMap格式，最后再用Image显示PixelMap格式的数据

 let imgData: ArrayBuffer = response;
      console.info(`request image success, size: ${imgData.byteLength}`);
      let imgSource: image.ImageSource = image.createImageSource(imgData);
      class sizeTmp {
        height: number = 100;
        width: number = 100;
      }
      let options: Record<string, number | boolean | sizeTmp> = {
        'alphaType': 0,
        'editable': false,
        'pixelFormat': 3,
        'scaleMode': 1,
        'size': { height: 100, width: 100 }
      }
     await imgSource.createPixelMap(options).then((pixelMap: PixelMap) => {
        console.error('image createPixelMap success');
          pixelMapImg = pixelMap;
        imgSource.release();
      }).catch(() => {
        imgSource.release();
      })

Image(this.pixelMapImg)
              .width(120)
              .height(120)
              .objectFit(ImageFit.Fill)
              .onComplete((msg)=>{
                
              }).onError((msg)=>{
              
            })

具体实现代码如下：

imageUtil.ets

import { rcp } from '@kit.RemoteCommunicationKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';

export async function RcpGetSSLImage(apiuri:string,isSsl:boolean){
        let responseData: object=[];

    let securityConfig: rcp.SecurityConfiguration =(isSsl===true)?{

      remoteValidation: 'skip',//system        skip-跳过
      certificate: {
        content: "-----BEGIN CERTIFICATE-----\n...",
        type: "PEM",
        key: "-----BEGIN PRIVATE KEY-----\n...", //请根据自身业务选择合适的key
        keyPassword: "your-password"
      },
      serverAuthentication: {
        credential: {
          username: "exampleUser",
          password: "examplePassword"
        },
        authenticationType: "basic"
      }
    }:{
      remoteValidation: 'skip'  // 显式声明跳过验证
    };


  const session = rcp.createSession({ requestConfiguration: { security: securityConfig } });

     await session.get(apiuri).then((response:rcp.Response)=>{
      console.info(` Succeeded in getting the response ${response.body}`);
       responseData=response.body as ArrayBuffer;


    }).catch((err:BusinessError)=>{
      console.error(` err: err code is ${err.code}, err message is ${JSON.stringify(err)}`);
       responseData=[];
    })

    return responseData;


}

export async function dealWithSSLImageData(apiuri:string,isSsl:boolean){
  let pixelMapImg: PixelMap | undefined = undefined;

    let   response = await  RcpGetSSLImage(apiuri,isSsl) as ArrayBuffer;
    if(response){
      let imgData: ArrayBuffer = response;
      console.info(`request image success, size: ${imgData.byteLength}`);
      let imgSource: image.ImageSource = image.createImageSource(imgData);
      class sizeTmp {
        height: number = 100;
        width: number = 100;
      }
      let options: Record<string, number | boolean | sizeTmp> = {
        'alphaType': 0,
        'editable': false,
        'pixelFormat': 3,
        'scaleMode': 1,
        'size': { height: 100, width: 100 }
      }
     await imgSource.createPixelMap(options).then((pixelMap: PixelMap) => {
        console.error('image createPixelMap success');
          pixelMapImg = pixelMap;
        imgSource.release();
      }).catch(() => {
        imgSource.release();
      })
    }
    return pixelMapImg;
}

View界面直接调用

this.pixelMapImg= await dealWithSSLImageData(apiuri,false)

Image(this.pixelMapImg)
              .width(120)
              .height(120)
              .objectFit(ImageFit.Fill)
              .onComplete((msg)=>{
                
              }).onError((msg)=>{
              
            })