鴻蒙第三方組件*SwipeCaptcha滑動(dòng)拼圖驗(yàn)證組件

作者：朱偉ISRC 2021-03-12 16:35:33

文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com

[[387304]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

基于安卓平臺(tái)的滑動(dòng)拼圖驗(yàn)證組件SwipeCaptcha( https://github.com/mcxtzhang/SwipeCaptcha)，實(shí)現(xiàn)了其核心功能的鴻蒙化遷移和重構(gòu)，代碼已經(jīng)開(kāi)源到(https://gitee.com/isrc_ohos/SwipeCaptcha)，歡迎各位下載使用并提出寶貴意見(jiàn)!

背景

在頁(yè)面登錄或者注冊(cè)的時(shí)候，為了確保不是機(jī)器人操作，會(huì)讓用戶手動(dòng)驗(yàn)證。驗(yàn)證方式分為滑動(dòng)拼圖驗(yàn)證和滑動(dòng)驗(yàn)證兩種。本文的SwipeCaptcha組件可以實(shí)現(xiàn)滑動(dòng)拼圖的驗(yàn)證方式，操作簡(jiǎn)單，安全性強(qiáng)，被眾多APP使用。

組件效果展示

鴻蒙系統(tǒng)的SwipeCaptcha組件在使用時(shí)，有兩個(gè)較為重要的圖片：滑塊和原圖。這兩張圖片被放置與同一水平線上，用戶拖動(dòng)滑塊至原圖處，誤差在一定范圍內(nèi)，即可驗(yàn)證成功。每次調(diào)用SwipeCaptcha組件，滑塊和原圖的位置都會(huì)發(fā)生隨機(jī)變化，登錄時(shí)被暴力破解的難度增加，安全性較高。

在SwipeCaptcha組件的驗(yàn)證界面，還有當(dāng)前進(jìn)度值和驗(yàn)證狀態(tài)的描述。當(dāng)前進(jìn)度值表示滑塊在水平方向的滑動(dòng)進(jìn)度，進(jìn)度為100時(shí)，表示滑塊滑至最右端。進(jìn)度值下方展示的是當(dāng)前的驗(yàn)證狀態(tài)，可分為：“開(kāi)始”、“驗(yàn)證失敗，請(qǐng)重新驗(yàn)證三種狀態(tài)”、“驗(yàn)證成功”。下面依次展示SwipeCaptcha組件拼圖驗(yàn)證失敗和成功的效果圖。

1、驗(yàn)證失敗效果

用戶未將滑塊拖至原圖處，導(dǎo)致滑塊與原圖的位置誤差較大，驗(yàn)證失敗。

圖1 驗(yàn)證失敗效果

2、驗(yàn)證成功效果

用戶拖動(dòng)滑塊至原圖處，誤差在一定范圍內(nèi)，驗(yàn)證成功。

圖2 驗(yàn)證成功效果

Sample解析

Sample主要包含以下四個(gè)部分：1)拼圖背景導(dǎo)入手機(jī)。2)裁剪滑塊。3)繪制滑塊。4)驗(yàn)證拼圖是否成功。下面將通過(guò)具體步驟對(duì)上述四個(gè)部分進(jìn)行詳解。 1、數(shù)據(jù)初始化

本步驟包含三個(gè)部分的數(shù)據(jù)設(shè)置：(1)獲取手機(jī)屏幕寬度信息;(2)設(shè)置進(jìn)度值和驗(yàn)證狀態(tài)的初始提示文字，如“當(dāng)前進(jìn)度值”、“請(qǐng)滑動(dòng)滑塊驗(yàn)證”;(3)初始化畫(huà)筆信息，定義畫(huà)筆屬性;

//獲取手機(jī)屏幕寬度displayAttributes.width 
DisplayManager displayManager = DisplayManager.getInstance(); 
Display display = displayManager.getDefaultDisplay(this).get(); 
DisplayAttributes displayAttributes = display.getAttributes(); 
windowWidth = displayAttributes.width; 
// 進(jìn)度值初始化 
text = new Text(this); 
text.setMarginTop(800);// 距離頂端邊界的距離 
text.setText("當(dāng)前進(jìn)度值"+ progress);// 設(shè)定文字 
text.setTextSize(100);// 設(shè)定字號(hào) 
myLayout.addComponent(text);// 添加進(jìn)布局中 
// 驗(yàn)證狀態(tài)初始化 
text2 = new Text(this); 
text2.setMarginTop(1000); 
text2.setText("請(qǐng)滑動(dòng)滑塊驗(yàn)證"); 
text2.setTextSize(100); 
myLayout.addComponent(text2); 
//初始化畫(huà)筆的信息 
mPaint = new Paint(); 
mPaint.setColor(Color.BLACK);//定義顏色 
mPaint.setAntiAlias(true);//定義虛實(shí)線 
mPaint.setStrokeWidth(5f);//定義寬度 
mPaint.setStyle(Paint.Style.STROKE_STYLE);//定義繪圖方式

2、背景圖片繪制

用手機(jī)屏幕的寬度除以背景圖片的寬度，得到背景圖片的縮放比例，當(dāng)該圖片顯示在手機(jī)中，按照此比例縮放可與屏幕同寬。該比例用于背景圖片適配不同型號(hào)的手機(jī)屏幕。

//背景圖片的縮放比例 
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) { 
        //按照比例進(jìn)行縮放 
        canvas.scale(ratio , ratio); 
        //繪圖 
        canvas.drawPixelMapHolder(pixelMapHolder, 0, 0, new Paint()); 
    } 
}; 
image.addDrawTask(drawTask); 
myLayout.addComponent(image);

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

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

puzzleWidth為滑塊或者原圖的寬度;top為隨機(jī)數(shù)值，表示滑塊或者原圖的上邊距離背景圖片上邊的距離;puzzel2left也為隨機(jī)數(shù)值，表示原圖左邊距離背景圖片左邊的距離。有了以上三個(gè)變量可以確定組件中滑塊和原圖的初始位置和大小(滑塊初始時(shí)位于屏幕的最左側(cè))。下面介紹上述屬性是如何計(jì)算出來(lái)的。

//puzzleWidth 為屏幕寬度的1/6 
puzzleWidth = windowWidth/6; 
 
//top為圖片縮放后高度與摳圖高度之差再乘以隨機(jī)數(shù) 
top = (float) Math.random()*(img.getImageInfo().size.height*ratio - puzzleWidth); 
 
//原圖位置一定在滑塊位置右面 
//屏幕寬度減去兩個(gè)拼圖寬度 *隨機(jī)數(shù)，后向右平移一個(gè)滑塊的長(zhǎng)度 
puzzel2left = ((windowWidth -puzzleWidth*2) * (float)Math.random()) + puzzleWidth;

4. 獲取滑塊

本步驟需要根據(jù)原圖的位置，解碼出一個(gè)圖片作為滑塊。首先設(shè)置滑塊的形狀為矩形，依據(jù)上述的puzzel2left、puzzleWidth屬性，確定矩形所在區(qū)域，依據(jù)縮放比例，將矩形區(qū)域映射為原比例圖像，并對(duì)此圖像進(jìn)行解碼，得到滑塊圖像數(shù)據(jù)。

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.繪制滑塊

滑塊通過(guò)畫(huà)筆來(lái)繪制，其位置應(yīng)該根據(jù)滑動(dòng)進(jìn)度條的進(jìn)度來(lái)移動(dòng)，并且要對(duì)不同手機(jī)屏幕的進(jìn)行適配。同時(shí)，為了和用戶友好的交互，我們還需要為滑塊繪制一個(gè)邊框，告知用戶這個(gè)邊框所在就是滑塊(原圖也需要繪制邊框，原理相同)。繪制滑塊和邊框的代碼如下：

//繪制滑塊 
Component.DrawTask puzzelDrawTask = new Component.DrawTask() { 
    @Override 
    public void onDraw(Component component, Canvas canvas) { 
        Paint paint = new Paint(); 
//移動(dòng)小滑塊拼圖 
        canvas.translate(slider.getProgress()*displayAttributes.width /100 , top); 
//進(jìn)行適當(dāng)比例縮放 
        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) { 
        //方框左側(cè)位置 
        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. 進(jìn)度條滑動(dòng)更新

為進(jìn)度條設(shè)置監(jiān)聽(tīng)，拖動(dòng)進(jìn)度條會(huì)引起三處更新：(1)滑塊位置和滑塊邊框位置的更新;(2)進(jìn)度值的更新;(3)驗(yàn)證狀態(tài)的更新。在驗(yàn)證狀態(tài)的更新中，需要對(duì)用戶拖動(dòng)進(jìn)度條結(jié)束時(shí)的驗(yàn)證狀態(tài)進(jìn)行判斷，滑塊和原圖的位置差距是否在誤差范圍內(nèi)，如果在范圍內(nèi)，則顯示驗(yàn)證成功，如果不在誤差范圍內(nèi)，則顯示驗(yàn)證失敗，提示需要重新驗(yàn)證。

//設(shè)置進(jìn)度條監(jiān)聽(tīng) 
slider.setValueChangedListener(new Slider.ValueChangedListener() { 
    @Override 
//拖動(dòng)進(jìn)度條引起的更新 
public void onProgressUpdated(Slider slider, int i, boolean b) { 
    //滑塊的位置更新 
    puzzle.invalidate(); 
    //滑塊邊框位置的更新 
    puzzleFrame.invalidate(); 
    //進(jìn)度值更新 
text.setText("當(dāng)前進(jìn)度值 : " + slider.getProgress()); 
    } 
} 
 
//當(dāng)用戶開(kāi)始滑動(dòng)進(jìn)度條時(shí)，驗(yàn)證狀態(tài)變?yōu)?ldquo;開(kāi)始”字樣。 
public void onTouchStart(Slider slider) { 
    //開(kāi)始拖動(dòng)的方法 
    text2.setText("開(kāi)始"); 
} 
 //判斷滑塊左側(cè)邊的位置和原圖的左側(cè)邊的位置是否在誤差內(nèi) 
public void onTouchEnd(Slider slider) { 
        if(((slider.getProgress()*windowWidth /100)<(puzzel2left + puzzleWidth/10))&&((slider.getProgress()*windowWidth /100)>(puzzel2left - puzzleWidth/10))) 
    { 
        text2.setText("驗(yàn)證成功"); 
    }else { 
        text2.setText("驗(yàn)證失敗，請(qǐng)重新驗(yàn)證"); 
        slider.setProgressValue(10); 
    } 
}