HarmonyOS开源第三方件组件——鸿蒙SwipeCaptcha滑动拼图验证组件

前言    

基于安卓平台的滑动拼图验证组件SwipeCaptcha（ https://github.com/mcxtzhang/SwipeCaptcha），实现了其核心功能的鸿蒙化迁移和重构，代码已经开源到（https://gitee.com/isrc_ohos/SwipeCaptcha），欢迎各位下载使用并提出宝贵意见！

背景

在页面登录或者注册的时候，为了确保不是机器人操作（要实现防机器人操作效果，需要在此组件基础上增加加密算法，本期介绍的组件中不包含此部分），会让用户手动验证。验证方式分为滑动拼图验证和滑动验证两种。本文的SwipeCaptcha组件可以实现滑动拼图的验证方式，操作简单，安全性强，被众多APP使用。

组件效果展示

鸿蒙系统的SwipeCaptcha组件在使用时，有两个较为重要的图片：滑块和原图。这两张图片被放置于同一水平线上，用户拖动滑块至原图处，误差在一定范围内，即可验证成功。每次调用SwipeCaptcha组件，滑块和原图的位置都会发生随机变化，登录时被暴力破解的难度增加，安全性较高。

在SwipeCaptcha组件的验证界面，还有当前进度值和验证状态的描述。当前进度值表示滑块在水平方向的滑动进度，进度为100时，表示滑块滑至最右端。进度值下方展示的是当前的验证状态，可分为：“开始”、“验证失败，请重新验证三种状态”、“验证成功”。下面依次展示SwipeCaptcha组件拼图验证失败和成功的效果图。

1. 验证失败效果

用户未将滑块拖至原图处，导致滑块与原图的位置误差较大，验证失败。

图1 验证失败效果

2. 验证成功效果

用户拖动滑块至原图处，误差在一定范围内，验证成功。

图2 验证成功效果

Sample解析

Sample主要包含以下四个部分：1）拼图背景导入手机。2）裁剪滑块。3）绘制滑块。4）验证拼图是否成功。下面将通过具体步骤对上述四个部分进行详解。

1. 数据初始化    

本步骤包含三个部分的数据设置：（1）获取手机屏幕宽度信息；（2）设置进度值和验证状态的初始提示文字，如“当前进