Custom captcha

Yii 1.1 General Discussion
1

How to make custom captcha?

My idea:




<div class="row">

<img id="yw0" src="/user/registration/captcha/v/4f92e2edbf563" alt="">

<label for="RegistrationForm_verifyCode">Captcha</label>		

<input name="RegistrationForm[verifyCode]" id="RegistrationForm_verifyCode" type="text">				

<a id="yw0_button" href="/user/registration/captcha/refresh/1">New catcha</a><br>

<p class="hint">Letter or...</p>

</div>
2

What do you mean by ‘custom’?

Where do you want it to differ from the standard one?

3

The standard is:


<div class="row">

<img id="yw0" src="/user/registration/captcha/v/4f92e2edbf563" alt="">

<a id="yw0_button" href="/user/registration/captcha/refresh/1">New catcha</a>

<label for="RegistrationForm_verifyCode">Captcha</label>                

<input name="RegistrationForm[verifyCode]" id="RegistrationForm_verifyCode" type="text">                                

<p class="hint">Letter or...</p>

</div>
4

The following code fragments are from the view file of ‘site/contact’ page of the initial app that we create with yiic command.

(‘protected/views/site/contact.php’)




<div class="row">

	<?php echo $form->labelEx($model,'verifyCode'); ?>

	<div>

	<?php $this->widget('CCaptcha'); ?>

	<?php echo $form->textField($model,'verifyCode'); ?>

	</div>

	<div class="hint">Please enter the letters as they are shown in the image above.

	<br/>Letters are not case-sensitive.</div>

	<?php echo $form->error($model,'verifyCode'); ?>

</div>

And, as you see, these lines will produce the html output like:




<div class="row">

<label for="RegistrationForm_verifyCode">Captcha</label>

<img id="yw0" src="/user/registration/captcha/v/4f92e2edbf563" alt="">

<a id="yw0_button" href="/user/registration/captcha/refresh/1">New catcha</a>

<input name="RegistrationForm[verifyCode]" id="RegistrationForm_verifyCode" type="text">

<p class="hint">Letter or...</p>

</div>

In short:




<?php $this->widget('CCaptcha'); ?>

becomes




<img id="yw0" src="/user/registration/captcha/v/4f92e2edbf563" alt="">

<a id="yw0_button" href="/user/registration/captcha/refresh/1">New catcha</a>

You can change the position and contents of ‘label’, ‘input’ or ‘hint’: you just have to edit your view file.

But it’s not very easy to place one of them between the captcha image and its refresh button.

(Of course we would be able to do it with a lot of customized code, but it won’t pay IMO)

5

Btw @softark I like how you switch captchas between Japanese and Latin scripts when the visitor hits "refresh captcha*"! Was is easy to implement?

*: or whatever the link’s label means :wink:

6

It’s okay, but how to change the refresh button?

This generate:


<img id="yw0" src="/user/registration/captcha/v/4f92e2edbf563" alt="">

<a id="yw0_button" href="/user/registration/captcha/refresh/1">New catcha</a>

And i wish this:


<img id="yw0" src="/user/registration/captcha/v/4f92e2edbf563" alt="">

//some code

<a id="yw0_button" href="/user/registration/captcha/refresh/1">New catcha</a>
7

@bennouna

Oh, thank you for your visit.

I’m very sorry that my site is just meant for Japanese people …

Er, well, it’s an extension of CCaptcha.

It was originally a fairly small extension, just with some additional flag, font, image rendering method and random string generator for Japanese. It was not very hard to implement.

But with the introduction of the client side verification, it has become a very ugly thing.

CCaptcha and CCaptchaAction has undergone a significant change because of the hash code used in the client side validation.

And, to my shame, I had to copy and paste almost all the lines from the original source to that of my extension. Still, I think it is easy to make this kind of extension based on CCaptcha and CCaptchaAction.

OT

You know, I’m using Hirakana characters for it. They are the most basic characters for Japanese so that even a 5 years old child can read and write. It’s really easy to read for Japanese people.

And because my string generator shows strong favor to ‘HA’, ‘HI’, ‘HU’, ‘HE’, ‘HO’ over other characters, the generated string tends to become a funny phrase evoking a feeling of, say, exhausted laughter. I hoped that reloading the captcha image can be a good time killer.

So it’s a very user friendly captcha(although it’s just for Japanese people), and hopefully very harsh for spam robots.

8

Well, as I said, it’s not very easy to add some code between <img> and refresh button.

Please read the source code of CCaptcha … it’s located in /framework/web/widgets/captcha.

You may notice that the refresh button is dynamically inserted just after the captcha image by a javascript.

(The code is in CCaptcha::registerClientScript() funciton)

So, you have to extend CCaptcha to make an extension of your own to satisfy your needs.

Please see the guide if you want to make an extension.

Creating Extensions

9

Thank you a lot Softark for your explanation. I’m going soon to implement an Arabic captcha as well, and that will most probably help me. I may though use PEAR’s random string generator and ArPhp’s Arabic text generator. I’ve also used in the past the Artichow php graphical library, which I find pretty powerful.