鴻蒙第三方元件——SwipeCaptcha滑動拼圖驗證元件

HarmonyOS技術社群發表於2021-03-12
鴻蒙元件APT

目錄：
1、元件效果展示
2、Sample解析
3、《鴻蒙第三方元件》系列文章合集

前言

    基於安卓平臺的滑動拼圖驗證元件SwipeCaptcha（ https://github.com/mcxtzhang/SwipeCaptcha），實現了其核心功能的鴻蒙化遷移和重構，程式碼已經開源到（https://gitee.com/isrc_ohos/SwipeCaptcha），歡迎各位下載使用並提出寶貴意見！

背景

        在頁面登入或者註冊的時候，為了確保不是機器人操作，會讓使用者手動驗證。驗證方式分為滑動拼圖驗證和滑動驗證兩種。本文的SwipeCaptcha元件可以實現滑動拼圖的驗證方式，操作簡單，安全性強，被眾多APP使用。

元件效果展示

        鴻蒙系統的SwipeCaptcha元件在使用時，有兩個較為重要的圖片：滑塊和原圖。這兩張圖片被放置與同一水平線上，使用者拖動滑塊至原圖處，誤差在一定範圍內，即可驗證成功。每次呼叫SwipeCaptcha元件，滑塊和原圖的位置都會發生隨機變化，登入時被暴力破解的難度增加，安全性較高。

       在SwipeCaptcha元件的驗證介面，還有當前進度值和驗證狀態的描述。當前進度值表示滑塊在水平方向的滑動進度，進度為100時，表示滑塊滑至最右端。進度值下方展示的是當前的驗證狀態，可分為：“開始”、“驗證失敗，請重新驗證三種狀態”、“驗證成功”。下面依次展示SwipeCaptcha元件拼圖驗證失敗和成功的效果圖。

1、驗證失敗效果

       使用者未將滑塊拖至原圖處，導致滑塊與原圖的位置誤差較大，驗證失敗。

鴻蒙第三方元件——SwipeCaptcha滑動拼圖驗證元件

圖1  驗證失敗效果

2、驗證成功效果

      使用者拖動滑塊至原圖處，誤差在一定範圍內，驗證成功。

鴻蒙第三方元件——SwipeCaptcha滑動拼圖驗證元件

圖2  驗證成功效果

Sample解析

        Sample主要包含以下四個部分：1）拼圖背景匯入手機。2）裁剪滑塊。3）繪製滑塊。4）驗證拼圖是否成功。下面將通過具體步驟對上述四個部分進行詳解。 1、資料初始化

       本步驟包含三個部分的資料設定：（1）獲取手機螢幕寬度資訊；（2）設定進度值和驗證狀態的初始提示文字，如“當前進度值”、“請滑動滑塊驗證”；（3）初始化畫筆資訊，定義畫筆屬性；

//獲取手機螢幕寬度displayAttributes.width
DisplayManager displayManager = DisplayManager.getInstance();
Display display = displayManager.getDefaultDisplay(this).get();
DisplayAttributes displayAttributes = display.getAttributes();
windowWidth = displayAttributes.width;
// 進度值初始化
text = new Text(this);
text.setMarginTop(800);// 距離頂端邊界的距離
text.setText("當前進度值"+ progress);// 設定文字
text.setTextSize(100);// 設定字號
myLayout.addComponent(text);// 新增進佈局中
// 驗證狀態初始化
text2 = new Text(this);
text2.setMarginTop(1000);
text2.setText("請滑動滑塊驗證");
text2.setTextSize(100);
myLayout.addComponent(text2);
//初始化畫筆的資訊
mPaint = new Paint();
mPaint.setColor(Color.BLACK);//定義顏色
mPaint.setAntiAlias(true);//定義虛實線
mPaint.setStrokeWidth(5f);//定義寬度
mPaint.setStyle(Paint.Style.STROKE_STYLE);//定義繪圖方式

 

2、背景圖片繪製

        用手機螢幕的寬度除以背景圖片的寬度，得到背景圖片的縮放比例，當該圖片顯示在手機中，按照此比例縮放可與螢幕同寬。該比例用於背景圖片適配不同型號的手機螢幕。

//背景圖片的縮放比例
float ratio = (float) windowWidth/(float) img.getImageInfo().size.width;
//背景圖片繪製
Component image = new Component(this);
Component.DrawTask drawTask = new Component.DrawTask() {
    @Override
    public void onDraw(Component component, Canvas canvas) {
        //按照比例進行縮放
        canvas.scale(ratio , ratio);
        //繪圖
        canvas.drawPixelMapHolder(pixelMapHolder, 0, 0, new Paint());
    }
};
image.addDrawTask(drawTask);
myLayout.addComponent(image);

 

3. 確定滑塊和原圖的位置

鴻蒙第三方元件——SwipeCaptcha滑動拼圖驗證元件

圖3  滑塊和原圖的位置示意

       puzzleWidth為滑塊或者原圖的寬度；top為隨機數值，表示滑塊或者原圖的上邊距離背景圖片上邊的距離；puzzel2left也為隨機數值，表示原圖左邊距離背景圖片左邊的距離。有了以上三個變數可以確定元件中滑塊和原圖的初始位置和大小（滑塊初始時位於螢幕的最左側）。下面介紹上述屬性是如何計算出來的。

//puzzleWidth 為螢幕寬度的1/6
puzzleWidth = windowWidth/6;

//top為圖片縮放後高度與摳圖高度之差再乘以隨機數
top = (float) Math.random()*(img.getImageInfo().size.height*ratio - puzzleWidth);

//原圖位置一定在滑塊位置右面
//螢幕寬度減去兩個拼圖寬度 *隨機數，後向右平移一個滑塊的長度
puzzel2left = ((windowWidth -puzzleWidth*2) * (float)Math.random()) + puzzleWidth;
 

4. 獲取滑塊

        本步驟需要根據原圖的位置，解碼出一個圖片作為滑塊。首先設定滑塊的形狀為矩形，依據上述的puzzel2left、puzzleWidth屬性，確定矩形所在區域，依據縮放比例，將矩形區域對映為原比例影像，並對此影像進行解碼，得到滑塊影像資料。

PixelMap puzzlePixelMap =
 getPuzzlePixelMap(this , ResourceTable.Media_longa , new Rect((int)(puzzel2left/ratio), (int) (top/ratio), (int) (puzzleWidth/ratio) , (int) (puzzleWidth/ratio)));
PixelMapHolder pixelMapHolder1 = new PixelMapHolder(puzzlePixelMap)；

5.繪製滑塊

        滑塊通過畫筆來繪製，其位置應該根據滑動進度條的進度來移動，並且要對不同手機螢幕的進行適配。同時，為了和使用者友好的互動，我們還需要為滑塊繪製一個邊框，告知使用者這個邊框所在就是滑塊（原圖也需要繪製邊框，原理相同）。繪製滑塊和邊框的程式碼如下：

//繪製滑塊
Component.DrawTask puzzelDrawTask = new Component.DrawTask() {
    @Override
    public void onDraw(Component component, Canvas canvas) {
        Paint paint = new Paint();
//移動小滑塊拼圖
        canvas.translate(slider.getProgress()*displayAttributes.width /100 , top);
//進行適當比例縮放
        canvas.scale(ratio , ratio);
        canvas.drawPixelMapHolder(pixelMapHolder1 , 0 , 0 , paint);

    }
};
//繪製滑塊邊框
Component puzzleFrame = new Component(this);
Component.DrawTask drawTask2 = new Component.DrawTask() {
    @Override
    public void onDraw(Component component, Canvas canvas) {
        //方框左側位置
        float left = slider.getProgress()*windowWidth /100;
        //繪製邊框的左邊
        canvas.drawLine(new Point(left , top),
                new Point(left, top + puzzleWidth), mPaint);
        //繪製邊框的上邊
        canvas.drawLine(new Point(left, top),
                new Point(left + puzzleWidth, top), mPaint);
        //繪製邊框的右邊
        canvas.drawLine(new Point(left + puzzleWidth, top),
                new Point(left + puzzleWidth, top + puzzleWidth), mPaint);
        //繪製邊框的下邊
        canvas.drawLine(new Point(left, top + puzzleWidth),
                new Point(left + puzzleWidth, top + puzzleWidth), mPaint);
    }
};

 

6. 進度條滑動更新

       為進度條設定監聽，拖動進度條會引起三處更新：（1）滑塊位置和滑塊邊框位置的更新；（2）進度值的更新；（3）驗證狀態的更新。在驗證狀態的更新中，需要對使用者拖動進度條結束時的驗證狀態進行判斷，滑塊和原圖的位置差距是否在誤差範圍內，如果在範圍內，則顯示驗證成功，如果不在誤差範圍內，則顯示驗證失敗，提示需要重新驗證。

//設定進度條監聽
slider.setValueChangedListener(new Slider.ValueChangedListener() {
    @Override
//拖動進度條引起的更新
public void onProgressUpdated(Slider slider, int i, boolean b) {
    //滑塊的位置更新
    puzzle.invalidate();
    //滑塊邊框位置的更新
    puzzleFrame.invalidate();
    //進度值更新
text.setText("當前進度值 : " + slider.getProgress());
    }
}

//當使用者開始滑動進度條時，驗證狀態變為“開始”字樣。
public void onTouchStart(Slider slider) {
    //開始拖動的方法
    text2.setText("開始");
}
 //判斷滑塊左側邊的位置和原圖的左側邊的位置是否在誤差內
public void onTouchEnd(Slider slider) {
        if(((slider.getProgress()*windowWidth /100)<(puzzel2left + puzzleWidth/10))&&((slider.getProgress()*windowWidth /100)>(puzzel2left - puzzleWidth/10)))
    {
        text2.setText("驗證成功");
    }else {
        text2.setText("驗證失敗，請重新驗證");
        slider.setProgressValue(10);
    }
}

專案貢獻人

趙柏屹 鄭森文 朱偉 陳美汝 張馨心

作者：朱偉ISRC
想了解更多內容，請訪問51CTO和華為合作共建的鴻蒙社群：https://harmonyos.51cto.com/

相關文章