✅❎ A lightweight image rotation verification plugin.

Last update: Dec 6, 2022

Overview

RVerify.js

✅ ❎ A lightweight image rotation verification plugin.

Installation

Add RVerify.js and RVerify.css to your project.

<script src="RVerify.js"></script>
<link rel="stylesheet" href="RVerify.css"/>

You can get the corresponding CDN link from unpkg or jsdelivr.

RVerify.js is available via npm.

npm install --save rverify

Basic usage

Simply call action() to activate the verification modal.

RVerify.action(function(res){
  console.log(res);
});

res will return 3 different codes:

0: Verify failed.
1: Verify successful.
2: No action.(Return the code when the modal is closed before it successfully verified.)

Configuration

You can configure some parameters through RVerify.configure({}).

mask

Type: Number
Default: 0.5

Set the mask transparency.

RVerify.configure({
  mask: 0.5
})

maskClosable

Type: Boolean
Default: false

Set whether click the mask can be closed.

RVerify.configure({
  maskClosable: true
})

closeIcon

Type: String
Default: (SVG CODE)

Set the modal close icon.

RVerify.configure({
  closeIcon: '(Please copy the SVG code)'
})

NOTE: It's recommended to set the SVG icon width and height to 20px.

sliderIcon

Type: String
Default: (SVG CODE)

Set the modal slider icon.

RVerify.configure({
  sliderIcon: '(Please copy the SVG code)'
})

NOTE: It's recommended to set the SVG icon width and height to 20px.

extraIcon

Type: String
Default: (SVG CODE)

Set the modal extra icon.

RVerify.configure({
  extraIcon: '(Please copy the SVG code)'
})

NOTE: It's recommended to set the SVG icon width and height to 15px.

tolerance

Type: Number
Default: 10

Set the verification tolerance range.(Range: 5°~45°)

RVerify.configure({
  tolerance: 10
})

NOTE: In order to ensure a friendly verification effect, its value ranges from 5° to 45°.

duration

Type: Number
Default: 500

Set the modal delay closing time.(Unit: ms)

RVerify.configure({
  duration: 1000
})

title

Type: String
Default: 身份验证

Set the modal title.

RVerify.configure({
  title: 'Authentication'
})

text

Type: String
Default: 拖动滑块，使图片角度为正

Set the modal text.

RVerify.configure({
  text: 'Drag the slider to make the image angle positive.'
})

extra

Type: String
Default: null

Set extra features at the bottom of the modal.

RVerify.configure({
  extra: 'View on Npm'
})

extraColor

Type: String
Default: #4E6EF2

Set extra features text color at the bottom of the modal.

RVerify.configure({
  extraColor: '#1ca280'
})

extraLink

Type: String
Default: https://github.com/zpfz

Set extra features link at the bottom of the modal.

RVerify.configure({
  extraLink: 'https://www.npmjs.com/package/rverify'
})

zIndex

Type: Number
Default: 9999

Set the modal z-index.

RVerify.configure({
  zIndex: 1000
})

album

Type: Array
Default: []

Set the modal randomly displayed image album.

RVerify.configure({
  album: [
    'https://rverify.vercel.app/assets/1.jpg',
    'https://rverify.vercel.app/assets/2.jpg',
    'https://rverify.vercel.app/assets/3.jpg',
    'https://rverify.vercel.app/assets/4.jpg',
    'https://rverify.vercel.app/assets/5.jpg',
    'https://rverify.vercel.app/assets/6.jpg',
    'https://rverify.vercel.app/assets/7.jpg',
    'https://rverify.vercel.app/assets/8.jpg',
    'https://rverify.vercel.app/assets/9.jpg',
    'https://rverify.vercel.app/assets/10.jpg'
  ]
})

NOTE: A 152*152 px image needs to be set at least.

Contributors

This project exists thanks to all the people who contribute.

License

Comments

Multiple instances support

We have two forms and we want to use this as a captcha replacement on both of them. How can we create one instance of RVerify for each form that can be validated separately?

opened by nomentsoa-andrianjatovo 2
Check without opening the modal

Say the user already did rotate the image correctly and now he wants to click on the submit button. How can we check the status of the RVerify before sending the form without reopening the modal which RVerify.action() basically does? Something like RVerify.check() or RVerify.status() would be great.

opened by nomentsoa-andrianjatovo 1

Darkmode

Hello. I can see that we have 2 CSS to change color to match dark mode.


.rv-wrap {
    position: relative;
    width: 18.5rem;
    background-color: #fff;
    border-radius: 10px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}


.rv-wrap .rv-content .rv-control .rv-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #f1f1f1;
    border-radius: 100px;
}

But how can I change that when I call RVerify?

opened by beshoo 1

Sometimes RVerify.js does not hide after solving

Dear support. Thank you for this wonderful project. Today while am testing RVerify.js, I have this case when I solved the RVerify correctly, but it does not hide the RVerify.js modal. and I can not close it anymore even though the close button is disabled the slider, everything is disabled.

Please Advice. Is there an API to call so I can assure the RVerify closed!

opened by beshoo 1
Change image angle

When a verification fails, the angle should be changed. This helps prevents spamming from guessing the angle incrementally by brute force. This PR fixes that so that the angle changes on failure.

opened by WampyCakes 0
Is it possible to configure a custom rotation angle
大佬您好！我看了文档，请问一下这个功能有考虑加入到项目中吗？我觉得这个功能很强大，可以让项目更加健壮

RVerify.js支持配置自定义的旋转角度，

在RVerify.action((res) => {})中新增一个显示用户旋转了多少度的值，这样再加上角度容差，这样这个项目就可以用于前后分离了

希望大佬看看😝😝😝
opened by FioraLove 1