zpfz / rverify.js

✅❎ A lightweight image rotation verification plugin.

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

RVerify © 2020-present, Feng L.H. Released under the MIT License.

rverify.js's Issues

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?

Image undefined until verification fails

After verification fails once, the image appears properly.

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.

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!

关于无法顶层显示的问题

这部分代码，会生成一个div，不带任何样式，再包裹动态生成的model，这样子不会在顶层显示，我elemnt-plus的dialog组件，不是9999的zindex，它都不能顶层显示。
我试过直接添加model，不创建这个外层div，发现还是不行，，还会生成这个div，，，，。
后来我给最外层的div加了position:relative和z-index9999，就可以了，这样子正常显示符合预期。。。。。。
建议这里的改改，大佬，同时readme.md加个中文显示，容易被国内的搜索到

能都将svg换成本地图片呢？

大佬您好！我想的是，svg换成本地图片，这样子的话，可以管理端控制客户端的图片，能够人工删除添加图片库，防止被找到规律；还有大佬能加个ts版本的吗，vue3+ts+setup的。感谢大佬！

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?