444002 - Add recaptcha to user registration

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect)

Description

[Michael Morgan [:morgamic]]

http://recaptcha.net/

Need to add this to prevent auto-creation of spam accounts.

Comment 1

[Reed Loden [:reed]]

http://cakeforge.org/snippet/detail.php?type=package&id=40

http://www.exuber.net/2008/05/06/cakephp-captcha-and-user-registration/

Comment 2

[Fred Wenzel [:wenzel]]

Thanks for the links, Reed. Very helpful.

Comment 3

[Fred Wenzel [:wenzel]]

Hm, will I need to completely custom-theme recaptcha in order to allow localizers to translate the text into their languages? It seems like it, as recaptcha only supports a very limited amount of languages by default.

Comment 4

[Brian Krausz]

I believe so, that's how FB does it: https://www.facebook.com/r.php?r=200, and that's what it says on http://recaptcha.net/apidocs/captcha/client.html ("If the language of your site isn't supported, you can always use custom theming to put reCAPTCHA in your language.")

If we're going to be translating all of the phrases into other languages, we may want to offer to contribute the translations back into the project (I'm curious as to why FB doesn't do this...).

Fun fact: if you listen to the audio captcha, one of the people saying numbers is me :).

Comment 5

[Fred Wenzel [:wenzel]]

(In reply to comment #4)
> If we're going to be translating all of the phrases into other languages, we
> may want to offer to contribute the translations back into the project (I'm
> curious as to why FB doesn't do this...).

Absolutely.

Comment 6

[Michael Morgan [:morgamic]]

(In reply to comment #4)
> Fun fact: if you listen to the audio captcha, one of the people saying numbers
> is me :).

Hot. 

Comment 7

[Brian Krausz]

Email from reCAPTCHA folks...they seem very open to any help we're willing/able to give.

========================

We'd definitely appreciate the translations. I'd be great if you could have folks translate strings in this format:

var RecaptchaStr_en = {

visual_challenge : "Get a visual challenge",
audio_challenge : "Get an audio challenge",
refresh_btn : "Get a new challenge",
instructions_visual : "Type the two words:",

instructions_audio : "Type the eight numbers:",
help_btn : "Help",
cant_hear_this : "Can't hear the sound?",
incorrect_try_again : "Incorrect. Try again."
};


One thing that can be tricky about translating is that "Type the two words" is in a pretty small space, so it's important to keep that string short. Also, we'd be happy to host translations of our help page (recaptcha.net/popuphelp). However, we realize this is longer than the other stuff, so if that's too much work for people that is fine.

Also, it might help to have community review of our strings for other languages. We've had a few strings that people have commented about but we haven't had the resources to follow up to determine the best practice for the language in question:

var RecaptchaStr_de = {
visual_challenge : "Visuelle Aufgabe generieren",
audio_challenge : "Audio-Aufgabe generieren",
refresh_btn : "Neue Aufgabe generieren",
instructions_visual : "Gib die 2 W\u00f6rter ein:",

instructions_audio : "Gib die 8 Ziffern ein:",
help_btn : "Hilfe",
cant_hear_this : "Kannst du nichts h\u00f6ren?",
incorrect_try_again: "Falsch. Nochmals versuchen!"
};

var RecaptchaStr_es = {
visual_challenge : "Obt\u00e9n un reto visual",
audio_challenge : "Obt\u00e9n un reto audible",
refresh_btn : "Obt\u00e9n un nuevo reto",
instructions_visual : "Escribe las 2 palabras:",

instructions_audio : "Escribe los 8 n\u00fameros:",
help_btn : "Ayuda",
cant_hear_this : "\u00bfNo puedes o\u00edrel audio?",
incorrect_try_again: "Incorrecto. Otro intento."

};
var RecaptchaStr_fr = {
visual_challenge : "D\u00e9fi visuel",
audio_challenge : "D\u00e9fi audio",
refresh_btn : "Nouveau d\u00e9fi",
instructions_visual : "Entrez les deux mots:",

instructions_audio : "Entrez les huit chiffres:",
help_btn : "Aide",
cant_hear_this : "Vous n'entendez pas de son?",
incorrect_try_again: "Incorrect."
};
var RecaptchaStr_nl = {

visual_challenge : "Test me via een afbeelding",
audio_challenge : "Test me via een geluidsfragment",
refresh_btn : "Nieuwe uitdaging",
instructions_visual : "Type de twee woorden:",

instructions_audio : "Type de acht cijfers:",
help_btn : "Help",
cant_hear_this : "Kun je het geluid niet horen?",
incorrect_try_again: "Foute invoer."
};
var RecaptchaStr_pt = {

visual_challenge : "Obter um desafio visual",
audio_challenge : "Obter um desafio sonoro",
refresh_btn : "Obter um novo desafio",
instructions_visual : "Escreva as 2 palavras:",

instructions_audio : "Escreva os 8 numeros:",
help_btn : "Ajuda",
cant_hear_this : "N\u00e3o consegue ouvir o som?",
incorrect_try_again: "Incorrecto. Tenta outra vez."

};
var RecaptchaStr_ru = {
visual_challenge : "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443",

audio_challenge : "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0437\u0432\u0443\u043a\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443",
refresh_btn : "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443",

instructions_visual : "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u0432\u0430 \u0441\u043b\u043e\u0432\u0430:",
instructions_audio : "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u043e\u0441\u0435\u043c\u044c \u0447\u0438\u0441\u0435\u043b:",

help_btn : "\u041f\u043e\u043c\u043e\u0449\u044c",
cant_hear_this : "\u041d\u0435 \u0441\u043b\u044b\u0448\u0438\u0442\u0435 \u0437\u0432\u0443\u043a\u0430?",
incorrect_try_again: "\u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e."

};
var RecaptchaStr_tr = {
visual_challenge : "G\u00f6rsel deneme",
audio_challenge : "\u0130\u015Fitsel deneme",
refresh_btn : "Yeni deneme",
instructions_visual : "\u0130ki kelimeyi yaz\u0131n:",

instructions_audio : "Sekiz numaray\u0131 yaz\u0131n:",
help_btn : "Yard\u0131m (\u0130ngilizce)",
cant_hear_this : "Duyamad\u0131n\u0131z m\u0131?",
incorrect_try_again: "Yanl\u0131\u015f. Bir daha deneyin."

};

Comment 8

[Fred Wenzel [:wenzel]]

Attachment: Captcha suggestion, screenshot

This is a screenshot of how it looks now. Comments? How about the wording? (You see it's different from their default wording, but it turned out if we want better user experience, we need to be a little more wordy than their default).

The last line ("what's this? learn more") I was thinking could point to www.captcha.net in a new window, as it explains why and how this is done. Good/bad idea?

Comment 9

[Fred Wenzel [:wenzel]]

Short update: We are currently trying to figure out the best way to handle this for non-English speakers, if it is acceptable for them having to type Roman characters or not. Also, the audio captchas have English words only, which will likely be a problem for non-English as well.

Comment 10

[Brian Krausz]

From Luis von Ahn, who created reCAPTCHA and basically invented CAPTCHAs.  Seems like reCAPTCHA is the best soltuion, they've put a lot of thought into this.  In addition Gen said that Japanese users all have querty keyboards, so I think we're fine with respect to the text CAPTCHA.

Anyone have any other concerns regarding this?  It seems we're good to go forward with this...

============

Hey Brian,

Just use reCAPTCHA. No need to make your own! reCAPTCHA is used in
many countries (including China and Japan). We have good statistics
that tell us that the human pass rate in China and Japan for the
visual CAPTCHA are *almost* as high as in English speaking countries
(96.1% in the USA versus about 93.5% in China). You are correct that
audio is a the biggest problem. reCAPTCHA currently has 5 languages in
audio, and we plan to release about 10 more soon. We'd be happy to
help with this.

--Luis

Comment 11

[Fred Wenzel [:wenzel]]

That's good enough for me -- I didn't know they had localized numbers already. Will check if they work as expected with the implementation I am putting together.

Also, if I could get some feedback on comment 8, that'd be great.

Comment 12

[Wil Clouser [:clouserw]]

> 
> Just use reCAPTCHA. No need to make your own! reCAPTCHA is used in
> many countries (including China and Japan). We have good statistics
> that tell us that the human pass rate in China and Japan for the
> visual CAPTCHA are *almost* as high as in English speaking countries
> (96.1% in the USA versus about 93.5% in China). You are correct that
> audio is a the biggest problem. reCAPTCHA currently has 5 languages in
> audio, and we plan to release about 10 more soon. We'd be happy to
> help with this.
> 

So...what happens when one of the 23 other languages on AMO needs to use an audio captcha?

Comment 13

[Fred Wenzel [:wenzel]]

(In reply to comment #12)
> So...what happens when one of the 23 other languages on AMO needs to use an
> audio captcha?

The same that happens with untranslated strings now: Fallback.

The question is if we can live with unwillingly "discriminating against" (e.g.) Greeks who are visually impaired and do not understand spoken English numerals, or not.

Comment 14

[Brian Krausz]

(In reply to comment #13)
> The question is if we can live with unwillingly "discriminating against" (e.g.)
> Greeks who are visually impaired and do not understand spoken English numerals,
> or not.

The thing is reCAPTCHA seems like the best option...they've put a lot of thought into accessibility and such, and seem ahead of the curve compared to other systems.  We're bound to miss someone somewhere who can't register, just because of the number of permutations of accessibility problems and languages.  In that case, I would hope that those people would email us (perhaps have a "trouble registering" email address on the Contact Us page that doesn't seem to exist), and we can manually register them (I believe that is Yahoo's final fallback).  

Comment 15

[Brian Krausz]

(In reply to comment #8)
> Created an attachment (id=328960) [details]
> Captcha suggestion, screenshot
> 
> This is a screenshot of how it looks now. Comments? How about the wording? (You
> see it's different from their default wording, but it turned out if we want
> better user experience, we need to be a little more wordy than their default).
> 
> The last line ("what's this? learn more") I was thinking could point to
> www.captcha.net in a new window, as it explains why and how this is done.
> Good/bad idea?
> 

I like the wording much better than the default.  A few comments:

Should "Hard to read?" be something a little more grammatical?  It seems a little strangely worded, though that may be me.

"What's this? Learn more" can be shortened to just "What's this?".  I think it would look better under recaptcha_label in small text.

Recaptcha popups link to http://recaptcha.net/popuphelp/.  We could either copy this and change it to suit our needs, to translate it word-for-word and give it to them to host (they said they would be more than happy to do this).  The first option is probably better as things like the second bullet are slightly incorrect for our implementation.

Comment 16

[Fred Wenzel [:wenzel]]

Thanks for the comments!

(In reply to comment #15)
> Should "Hard to read?" be something a little more grammatical?  It seems a
> little strangely worded, though that may be me.

Hm, yeah, English not being my first language, I don't claim perfect grammar :) Maybe it would be better to say "If it is hard to read, you can try..."?

> "What's this? Learn more" can be shortened to just "What's this?".  I think it
> would look better under recaptcha_label in small text.

Good call. For the label text, how about "Are you human?" or is that too sloppy. "Security question" would be more serious, I guess.

> 
> Recaptcha popups link to http://recaptcha.net/popuphelp/.  We could either copy
> this and change it to suit our needs, to translate it word-for-word and give it
> to them to host (they said they would be more than happy to do this).  The
> first option is probably better as things like the second bullet are slightly
> incorrect for our implementation.
> 

Comment 17

[Fred Wenzel [:wenzel]]

Attachment: Second screenshot

This is how it looks now. The help link is on the left and pops up the recaptcha popup when you click it (in the right language, if they support it).

Additional comments? Let me know.

Comment 18

[Brian Krausz]

Cool, this seems good to me (though I'm just a lowly intern...second opinion?)

We'll have to get the help text out to localizers and send it back to reCAPTCHA to put live.

Comment 19

[Stephen Donner [:stephend] Not actively reading bugmail]

Doesn't trigger any of my common layout OCDs, so looks good to me :-)

Comment 20

[Fred Wenzel [:wenzel]]

Attachment: Recaptcha for user registration, v1

Brian, do you mind reviewing my patch?

What you'll need to test it is a private and public key from recaptcha.net. If you develop on localhost, it won't enforce the hostname, otherwise you'll have to get a key pair from there for the right hostname. Put both of these into your config.php file and set RECAPTCHA_ENABLED to true (see config.php.default, very bottom).

Then you should be able to register a new user on your dev instance iff you enter the right captcha.

Comment 21

[Brian Krausz]

Comment on attachment 329704 [details] [diff] [review]
Recaptcha for user registration, v1

1) If recaptcha is disabled the title still shows up on the registration page.

2) Can the audio captcha have more descriptive text (or change the top text).  Right now it says "Please enter both words below, separated by a space."

3) Putting our lang in the lang field isn't going to work...right now they have the following lang codes:
en, nl, fr, de, pt, ru, es, tr.  en-US will direct to an error page when clicking "what's this".  This may be a recaptcha bug, since it should default to en on invalid links.  Either way we're going to need to use the characters before the "-" in the language.  I'll email recaptcha and see if they can fix this on their end.

Comment 22

[Fred Wenzel [:wenzel]]

(patch follows shortly)

1) fixed

2) I used "Please enter the numbers you are hearing below." now for that.

3) I shortened the language code now, but you are right, it's not good that it errors out for languages Recaptcha doesn't know.

CCing Basil: How do you think we should provide help for what a Captcha is and why we're using it? Could AMO's documentation find a place on SUMO?

Comment 23

[Fred Wenzel [:wenzel]]

Attachment: Recaptcha for user registration, v2

Patch with the above changes.

I now default to English for the help link if it's a language that Recaptcha won't support; that'll work for now, but that's definitely not the greatest user experience, so we should think about what we want to do there in the long run.

Comment 24

[Brian Krausz]

Thanks, will review today.  I emailed the recaptcha folk about having 404 pages redirect to a new page, here is their response:

=====
Hi,

Thanks, we'll look into doing that.

-b
=====

We'll see what happens with that.  They also said that they're open to us localizing the help page, and they will host it.  We should get that text over to localizers and have them translate it.

Comment 25

[Wil Clouser [:clouserw]]

I don't want to step on Brian's toes but I'm taking off soon and I wanted to mention that I don't see you forcing no-cache anywhere in the code.  

Comment 26

[Brian Krausz]

Not a problem, I got caught up in a lot of stuff today, pushing back review to tomorrow :).  Thanks for catching that, I would've missed it.

Comment 27

[Fred Wenzel [:wenzel]]

(In reply to comment #25)
> I don't want to step on Brian's toes but I'm taking off soon and I wanted to
> mention that I don't see you forcing no-cache anywhere in the code.  

I don't see how my new code differs from the old registration process that it now needs a forced no-cache (considering the whole captcha thing is pulled in via javascript anyway) but I can add it, sure :)

Comment 28

[Fred Wenzel [:wenzel]]

Actually, I just looked and I noticed the registration page always had the cache disabled:

 84     /**
 85      * Register a new user
 86      */
 87     function register() {
 88         $this->disableCache();

So we should be golden.

Comment 29

[Brian Krausz]

Comment on attachment 329848 [details] [diff] [review]
Recaptcha for user registration, v2

Looks good to me :).

Comment 30

[Fred Wenzel [:wenzel]]

Committed: code in r17125, l10n (incl. merge to other languages and German l10n) in r17126. At last, the recaptcha library is in r17127.

I'll notify localizers of the new strings shortly.

Comment 31

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Screenshot of input that was validated

So; I don't know if that is an existing Recaptcha bug or not, but the above input validated and I was able to activate my account afterwards.

Comment 32

[Fred Wenzel [:wenzel]]

Attachment: Misspelled, accepted captcha

Stephend: Seems to be an accuracy threshold to make life easier for the users, maybe? The attached screenshot shows another one that went through, with no space and 1 misspelled letter each.

Others were rejected, when I went too crazy on the misspellings, like duplicated letters etc.

Comment 33

[Stephen Donner [:stephend] Not actively reading bugmail]

I've been playing around with their own samples on http://recaptcha.net/learnmore.html, and we're on par with its validation -- as long as we accept that their validation criteria can at times be quite forgiving, this can be verified.

Comment 34

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED.