RVerify.js

# 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 (opens new window) or jsdelivr (opens new window).

RVerify.js is available via npm (opens new window).

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: An image needs to be set at least.

# Changelog

# 0.1.3

• 🍀 Fixed verification image size to 152px
• 🐞 Fixed the problem of mobile browser gestures affecting slider dragging

# 0.1.2

• 🍀 Optimize rotation image algorithm logic

# 0.1.1

• 🍀 Optimize slider/slider bar styles
• 🍀 Optimize the error tip in development mode

# 0.1.0

• 🍹 RVerify.js released

# 0.1.0-beta.2

• 🌟 Support the mobile for using #1 (opens new window)
• 🍀 Optimize parts of style and logic

# Contributors

This project exists thanks to all the people who contribute.

# License

RVerify © 2020-present, Feng L.H. Released under the MIT License (opens new window).