SwipeCaptchaJS_ohos

Этот проект представляет собой версию реализации JS API для системы HarmonyOS на основе проекта SwipeCaptcha_ohos. Оригинальная версия на Java API доступна по ссылке (https://gitee.com/isrc_ohos/swipe-captcha_ohos2.0) с использованием меток проекта и адреса Gitee.

Описание проекта

• Название проекта: Слайдинговая капча

• Серия: Адаптация и портирование компонентов третьих сторон для HarmonyOS

• Язык программирования: JavaScript

• Функциональность: Проект включает три компонента проверки, а именно: простой слайдинговый компонент simpleSwipe, слайдинговый пазл компонент swipePuzzle и вращаемый пазл компонент rotatePuzzle. Все эти компоненты выполняют отрисовку и проверку на стороне клиента.

• Состояние портирования: 100%, все функции успешно перенесены.

• Различие при вызове: Переработка

• Версия SDK: sdk7 (совместимо с sdk4), DevEco Studio 3.0 Beta2

• Автор проекта: Жу Хаодун

• Электронная почта: isrc_hm@iscas.ac.cn

• Адрес документации оригинального проекта: https://gitee.com/isrc_ohos/swipe-captcha_ohos2.0

Инструкция по использованию

1. Реализация компонентов находится в директории entry/src/main/js/default/common/components/. Для использования этих компонентов достаточно скопировать их в свой проект.

2. В файле hml добавьте swipePuzzle и привяжите необходимые параметры.

   <!-- captchaTest.hml -->
   <!-- Укажите имя и расположение пользовательского компонента -->
   <element name="swipe" src="../../common/components/swipePuzzle/swipePuzzle.hml">
   </element>
   
   <!-- Внедрите компонент в страницу -->
   <div class="container" style="background: linear-gradient(#877ad0c6,#909b66a5);">
       <swipe img-list="{{swipeImgList}}" comp-attrs="{{swipePuzzleTestAttrs}}" @handle-result="onResReceived">
       </swipe>
   </div>

   img-list указывает на URL изображений, comp-attrs — на параметры компонента, событие handle-result передает результат проверки родителю.

3. Определите параметры компонентов и обработчики событий в файлах JS. Это включает три основных шага:

   • Укажите источник изображения

     Для верификации с помощью свайп-пазла swipePuzzle и вращаемого пазла rotatePuzzle требуется указать массив источников изображений. Здесь мы используем URL локальных ресурсных изображений, чтобы инициализировать img-list массивом строк.

   • Укажите параметры компонента

     Для различных компонентов объект параметров имеет следующие свойства:

     Параметр	Описание
     width	Ширина компонента
     blockSize	Ширина блока

     • Простое свайп-верификатор simpleSwipe

       Параметр	Описание
       width	Ширина компонента
       blockSize	Ширина блока

       Параметр	Описание
       width	Ширина изображения (значение параметра должно соответствовать соотношению сторон изображения)
       height	Высота изображения (значение параметра должно соответствовать соотношению сторон изображения)
       blockSize	Размер блока (также изменяет размер пустого поля)

       • Верификатор rotatePuzzle

         Параметр	Описание
         width	Ширина изображения (значение параметра должно соответствовать соотношению сторон изображения)
         height	Высота изображения (значение параметра должно соответствовать соотношению сторон изображения)
         radius	Радиус области вращения

   • Укажите обработчики событий

     После привязки обработчиков событий, можно получить результат верификации компонента через e.detail.result в родительском компоненте. Конкретный код на JS представлен ниже:

// captchaTest.js
import prompt from '@system.prompt';
export default {
    data: {
        // список изображений для верификации с помощью скролл-пазла
        swipeImgList: [
            '/common/images/test1.jpg',
            '/common/images/test2.jpg',
            '/common/images/test3.jpg',
            '/common/images/test4.jpg',
            '/common/images/test5.jpg',
            '/common/images/test6.jpg',
            '/common/images/test7.jpg',
            '/common/images/test8.jpg'
        ],
        // параметры для верификации с помощью скролл-пазла
        swipePuzzleTestAttrs: {
            width: 300,
            height: 225,
            blockSize: 50
        }
    },
    // обработчик событий, здесь определяются действия после завершения верификации
    onResReceived(e) {
        prompt.showToast({ message: 'Родительский компонент получил результат:' + e.detail.result });
    }
}

Версия и итерация- v0.1.0-alpha

Информация о правах и лицензиях

• SwipeCaptchaJS_ohos распространяется под Apache License версии 2.0.