鸿蒙（Harmony）实现滑块验证码

在Android和ios两头已经使用的滑块验证码框架还未适配鸿蒙版，于是需要自己去实现类似如下的滑块验证码：

那么实现这样的验证码重要涉及到几个内容：
1、自界说弹窗

2、base64图片转换

3、滑动组件与滑块的联动，以及横移间隔转换等

自界说弹窗：

自界说一个可导出的弹窗组件CustomDialog，最重要是使用 @CustomDialog 修饰符。

1. @CustomDialog
2. export struct BlockPuzzleDialog {
4. phoneNum: number | string = ''
6. controller: CustomDialogController = new CustomDialogController({
7.     builder: BlockPuzzleDialog({}),
8.   })
10.     build() {
11.          Column(){
12.         
13.         }
14.     }
15.    
16.    
17.    // 验证码校验回调给使用页面
18.   blockCheckCallback: (token: string) => void = (token: string) => {
20.   }
21. }

复制代码

在使用页面创建构造器与弹窗绑定

1. @Entry
2. @Component
3. struct LoginPage {
4.    dialogController: CustomDialogController = new CustomDialogController({
5.     builder: BlockPuzzleDialog({
6.       phoneNum: this.phoneNum, blockCheckCallback: (token: string) => {
7.         this.blockPuzzleSuccessCallback(token)
8.       }
9.     }),
10.     autoCancel: false,//弹窗是否自动取消
11.     alignment: DialogAlignment.Center,// 弹窗位置
12.     cornerRadius: 8,
13.     width: '90%'// 弹窗宽度
14.   })
15.    
16.     build(){
17.       ...
18.     }
19. }

复制代码

弹窗UI组件的实现：核心组件就一个预先挖孔的底图上面叠加滑块图片再加上一个slider组件

1. build(){
3. ......
6. Stack() {
7.         Image(this.coverUri).width('100%').margin({ top: 10 }).objectFit(ImageFit.Auto).onComplete((event) => {
8.           this.scaleRatio = event!!.componentWidth / event?.width!!
9.         })
10.         Image(this.blockUri)
11.           .width(this.blockW + "px")
12.           .height(this.blockH + "px")
13.           .margin({ top: 10 })
14.           .objectFit(ImageFit.Auto)
15.           .onComplete((event) => {
16.             this.blockW = event?.width!! * this.scaleRatio
17.             this.blockH = event?.height!! * this.scaleRatio
18.             this.slideMax = Const.mWidth * 0.9 - 24 - px2vp(this.blockW)
19.           })
20.           .translate({ x: this.bolckTranslateX + "px" })
22.         this.loading()
24.       }.width('100%').alignContent(Alignment.Start)
26.       RelativeContainer() {
27.         Text('向右拖动滑动填充拼图')
28.           .fontSize(18)
29.           .fontColor($r('app.color.C_BEBEC6'))
30.           .id('blockTip')
31.           .alignRules({
32.             "top": {
33.               "anchor": "slider",
34.               "align": VerticalAlign.Top
35.             },
36.             "bottom": {
37.               "anchor": "slider",
38.               "align": VerticalAlign.Bottom
39.             },
40.             "left": {
41.               "anchor": "slider",
42.               "align": HorizontalAlign.Start
43.             },
44.             "right": {
45.               "anchor": "slider",
46.               "align": HorizontalAlign.End
47.             },
48.           })
49.           .textAlign(TextAlign.Center)
50.         Slider({
51.           style: SliderStyle.InSet,
52.           value: $$this.sliderValue,
53.           step: 1,
54.           max: vp2px(this.slideMax)
55.         })
56.           .trackColor(this.sliderConfig.trackColor)
57.           .selectedColor(this.sliderConfig.selectedColor)
58.           .blockSize({ height: 40, width: 44 })
59.           .blockStyle({
60.             type: SliderBlockType.IMAGE,
61.             image: this.sliderConfig.blockImg
62.           })// .sliderInteractionMode(SliderInteraction.SLIDE_ONLY)
63.           .trackBorderRadius(Const.BORDER_RADIUS_4)
64.           .trackThickness(40)
65.           .width('100%')
66.           .onChange((value: number, mode: SliderChangeMode) => {
67.             // this.bolckTranslateX = this.slideMax * (value / this.slideMax)
68.             this.bolckTranslateX = value
69.             console.info('滑块滑动：滑块滑动数值==' + value + " 图片位移==" + this.bolckTranslateX)
70.             if (mode == SliderChangeMode.End) {
71.               // this.sliderValue = value
72.               let point = new Point()
73.               point.x = parseFloat((this.bolckTranslateX / this.scaleRatio).toFixed(0))
74.               console.info('滑动结束：滑动数值 this.sliderValue==' + this.sliderValue + " this.bolckTranslateX==" +
75.               this.bolckTranslateX + " 转像素==" + point.x)
76.               this.checkCaptcha(point)
77.             }
78.           })
79.           .id('slider')
80.       }.width('100%').height(40).margin({ top: 10 })
82. ......
84. }

复制代码

滑块图片translate的值就是Slider组件的滑动值。使用

1. this.dialogController.open() 弹窗

复制代码

Base64图片的下载与转换

1. aboutToAppear(): void {
2.     this.getSlideImage()
3. }
5. ......
7. // 获取底图和滑块图片的base64数据并保存到本地，同时获取到滑块校验相关信息。
8. getSlideImage() {
9.     this.sliderConfig.showLoading = true
10.     HttpUtil.getData<BlockResult>(Const.URL_BLOCK_IMG).then((result) => {
11.       if (result !== undefined && result !== null) {
12.         this.blockResult = result
13.         this.coverBase64 = this.blockResult.repData?.originalImageBase64!!
14.         this.blockBase64 = this.blockResult.repData?.jigsawImageBase64!!
15.         console.info("滑块：获取到base64 ==" + this.coverBase64)
16.         let coverName = "coverBase64_" + Date.now().toString() + ".png"
17.         let blockName = "blockBase64_" + Date.now().toString() + ".png"
18.         this.coverPath = this.context.filesDir + "/temp/" + coverName;
19.         this.blockPath = this.context.filesDir + "/temp/" + blockName;
20.         this.coverUri =
21.           Utils.saveBase64Image(this.coverBase64, this.context, coverName)
22.         this.blockUri =
23.           Utils.saveBase64Image(this.blockBase64, this.context, blockName)
24.         this.sliderConfig.showLoading = false
25.         this.reset()
26.       }
27.     })
28.   }

复制代码

可以参考官网示例 通过buffer.from的方法，将base64编码格式的字符串创建为新的Buffer对象，接着用fileIo.writeSync方法将转换好的Buffer对象写入文件。

1. let context = getContext(this) as common.UIAbilityContext;
2. let filesDir = context.filesDir;
4. // data为需要转换的base64字符串，返回沙箱路径uri
5. export async function writeFile(data: string): Promise<string> {
6.   let uri = ''
7.   try {
8.     let filePath = filesDir + "/1.png";
9.     uri = fileUri.getUriFromPath(filePath);
10.     let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
11.     console.info("file fd: " + file.fd);
12.     const reg = new RegExp("data:image/\\w+;base64,")
13.     const base64 = data.replace(reg, "");
14.     console.log("base64flag", base64)
15.     const dataBuffer = buffer.from(base64, 'base64')
16.     let writeLen = fileIo.writeSync(file.fd, dataBuffer.buffer);
17.     hilog.info(0xA0c0d0,'uri',uri)
18.     fileIo.closeSync(file);
19.   }
20.   catch (Error) {
21.     hilog.error(0xA0c0d0,'Error',Error.code)
22.   }
23.   return uri;
24. }

复制代码

当然你还可以直接将Base64转换成PiexlMap.先将base64字符串剖析成arraybuffer，然后使用这个arraybuffer构建新PixelMap，需要注意的是，使用decodeSync对base64字符串解码时，传入的base64字符串不能有'data:image/jpeg;base64,'这样的前缀。

1. import CommonConstants from '../common/constants/CommonContants';
2. import { util } from '@kit.ArkTS';
3. import { image } from '@kit.ImageKit';
5. @Entry
6. @Component
7. struct Index {
8.   @State message: string = 'Base64ToPixelMap';
9.   private base64: string = CommonConstants.Image_Base64_String; // 该变量为图片的base64格式字符串
10.   @State private pixelMap: PixelMap | null = null;
12.   build() {
13.     Row() {
14.       Column() {
15.         Text(this.message)
16.           .fontSize(50)
17.           .fontWeight(FontWeight.Bold)
18.           .onClick(async () => {
19.             let helper = new util.Base64Helper();
20.             let buffer: ArrayBuffer = helper.decodeSync(this.base64, util.Type.MIME).buffer as ArrayBuffer;
21.             let imageSource = image.createImageSource(buffer);
22.             let opts: image.DecodingOptions = { editable: true };
23.             this.pixelMap = await imageSource.createPixelMap(opts);
24.           })
25.         Image(this.pixelMap)
26.           .width(200).height(200).margin(15)
27.       }
28.       .width('100%')
29.     }
30.     .height('100%')
31.   }
32. }

复制代码

将得到的图片当地保存地点uri大概转换成的piexlMap设置给底图和滑动图片。
滑动值校验

上面已经说过，滑块的移动值就是Slider滑动值。其中slider 步长设置为1，滑动的最大值slideMax=底图的宽度-滑块图片的宽度。这样滑动值转换更方便，联动结果也更好。这里注意下 底图在填满控件的时间有肯定的缩放，滑动图片组件也需要按照这个缩放比例设置宽高。

1. step: 1,
2. max: vp2px(this.slideMax)

复制代码

最后在slider的onchange回调中校验滑动值是不是正确，注意滑动值要除以上面的底图缩放比例。
将滑动值加上校验token传给校验接口获取校验结果。

1. .onChange((value: number, mode: SliderChangeMode) => {
2.   
3.   this.bolckTranslateX = value
4.   console.info('滑块滑动：滑块滑动数值==' + value + " 图片位移==" + this.bolckTranslateX)
5.   if (mode == SliderChangeMode.End) {
6.     // this.sliderValue = value
7.     let point = new Point()
8.     point.x = parseFloat((this.bolckTranslateX / this.scaleRatio).toFixed(0))
9.     console.info('滑动结束：滑动数值 this.sliderValue==' + this.sliderValue + " this.bolckTranslateX==" +
10.     this.bolckTranslateX + " 转像素==" + point.x)
11.     this.checkCaptcha(point)
12.   }
13. })

复制代码

1. checkFail() {
2.     this.sliderConfig.showLoading = false
3.     this.sliderConfig.trackColor = $r('app.color.C_0DF32222')
4.     this.sliderConfig.selectedColor = $r('app.color.C_F32222')
5.     this.sliderConfig.blockImg = $r('app.media.drag_btn_error')
6.     this.sliderValue = 0
7.     this.bolckTranslateX = 0
8.     setTimeout(() => {
9.       // 删掉滑块图片
10.       FileUtil.delFile(this.coverPath)
11.       FileUtil.delFile(this.blockPath)
12.       this.getSlideImage()
13.     }, 300)
14.   }
16.   checkSuccess() {
17.     this.sliderConfig.showLoading = false
18.     this.sliderConfig.trackColor = $r('app.color.C_0D1264E0')
19.     this.sliderConfig.selectedColor = $r('app.color.C_1264E0')
20.     this.sliderConfig.blockImg = $r('app.media.drag_btn_success')
22.     setTimeout(() => {
23.       this.controller.close()
24.       // 删掉滑块图片
25.       FileUtil.delFile(this.coverPath)
26.       FileUtil.delFile(this.blockPath)
27.       if (this.blockCheckCallback !== undefined) {
28.         this.blockCheckCallback(this.blockResult?.token!!)
29.       }
30.     }, 300)
31.   }

复制代码

调用刚刚界说的回调方法将校验结果回调给登录页面this.blockCheckCallback(this.blockResult?.token!!)
至此导致流程已结束，当然还有一些细节需要自己根据业务实现。最后完成结果如下：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。