Usage

Displaying the ValidShapes CAPTCHA (usage)

The rendering has to be done by JavaScript. Pure JS is enough to render our CAPTCHA.

			<html>
			<head>
				<title>ValidShapes sample</title>
				<script src="https://api.validshapes.com/js/vs.min.js">
				<link href="https://api.validshapes.com/css/vs.min.css" rel="stylesheet" type="text/css"/>
			</head>
			<body>
				
<script type="text/javascript"> var vsParams = { 'publicKey': 'your-public-key' }; VS.generate(document.getElementById('validshapes'), vsParams); </script>
</body> </html>

The C# lib can be installed by nuget packages. See here.

			
				<html lang="en">
				<head>
					<title>ValidShapes Test
					@Styles.Render("https://api.validshapes.com/css/vs.min.css")
					@Scripts.Render("https://api.validshapes.com/js/vs.min.js")
				</head>
				<body>
					@using (Html.BeginForm(new { ReturnUrl = "..." })) {
						@Html.Raw(ValidShapesHelper.Captcha(new ValidShapesModel("your-public-key")))
						<input type="submit" value="Submit" />
					}
				</body>
				</html>
			

Configuration

You will be able to add a lot of custom parameters to adapt the CAPTCHA like you want. To see all parameters, see the captcha service documentation

				var vsParams = { 
					'publicKey': 'your-public-key',
					'positionAccuracy': 3, //Position accuracy required to validate the CAPTCHA (0px means that a perfect match is required)
					'maxBackgroundWidth': 270, //Width of background picture
					'colorTheme':'coralRed' //Force the theme (default random)
				};
				VS.generate(document.getElementById('validshapes'), vsParams);
			

				@Html.Raw(ValidShapesHelper.Captcha(new ValidShapesModel("your-public-key") {
					PositionAccuracy = 3, //Position accuracy required to validate the CAPTCHA (0px means that a perfect match is required)
					MaxBackgroundWidth = 270, //Width of background picture
					ColorTheme = ColorTheme.coralRed //Force the theme (default random)
				}))
			

CAPTCHA Validation

Two steps are required :

  • Check if the server name returned by the CAPCHA exists (see serversName service)
  • Send to this previous server the request to verify the CAPTCHA (see validateShapes and validateAudio services)

To simplify your work, we have written a class to do the validation.
You are free to use it. An optional cache system can be used to avoid calling each time the ValidShapes service to retrieve all server names.

The PHP class to import can be downloaded here.

				require_once( 'class.validshapes-validator.php' );
				// Cache provider is optional but it is recommended
				class CacheProvider implements ICacheProvider {
					public function get($key) {
						//get_option($key);//Call a function to get a cached value from the key passed in parameter
					}

					public function set($key, $value) {
						//update_option($key, $value);//Call a function to set a cached value from the key and value passed in parameters
					}
				}

				function handle_submit() {
					$privateKey = 'your-private-key';
					$state = ValidShapes_Validator::CheckIfValid($privateKey, $_POST, new CacheProvider());
					switch($state) {
						case VsState.Success:
							//CAPTCHA is verified
							break;
						case VsState.WrongPosition:
							//CAPTCHA has had a wrong position
							break;
						case VsState.WrongAudioSolution:
							//CAPTCHA has had a wrong audio solution
							break;
						case VsState.MissingParameters:
							//Some parameters were missing
							break;
						case VsState.ServerIdError:
							//Server name received by the form does not exist (hacker?)
							break;
						default:
							//Unexpected case
							break;
					}
				}
			

The C# lib can be installed by nuget packages. See here.

				//
				// POST: /.../Submit

				[HttpPost]
				public ActionResult Submit(...)
				{
					...
					var state = ValidShapesHelper.CheckIfValid(privateKey: "your-private-key", form: Request.Form);
					if (state == VsState.Success)
					{
						...
					}
					...
				}