reCAPTCHA

[defvol]

Para validar la creación de una cuenta usaremos reCAPTCHA.

El trabajo está en el branch: https://github.com/mexico-abierto/app/tree/recaptcha

[defvol]

@cristiandouce estoy teniendo problemas para importar el paquete recaptcha. Parece ser que truena si lo importo en lib/signup/signup.js (el main del componente signup), y no si lo importo en lib/signup/index.js, sin embargo el paquete lo usaré en signup.js

¿cómo importan node_modules a los componentes?

diff --git a/lib/signup/index.js b/lib/signup/index.js
index 9a95689..146155b 100644
--- a/lib/signup/index.js
+++ b/lib/signup/index.js
@@ -7,6 +7,7 @@ var express = require('express')
   , path = require('path')
   , t = require('t-component')
   , signup = require('./lib/signup')
+  , Recaptcha = require('recaptcha').Recaptcha
   ;

 /**
diff --git a/lib/signup/signup.js b/lib/signup/signup.js
index b1567ba..eddf482 100644
--- a/lib/signup/signup.js
+++ b/lib/signup/signup.js
@@ -16,6 +16,8 @@ var t = require('t');
 var o = require('query');

 page('/signup', function(ctx, next) {
+  var recaptcha = new Recaptcha(config.recaptchaPublicKey, config.recaptchaPrivateKey);
+
   // Build form view with options
   var form = SignupForm({});

[defvol]

el único ejemplo que veo similar en los docs es el regexps https://github.com/DemocracyOS/app/wiki/How-to-Component-at-DemocracyOS y no importa módulos...

[defvol]

ahora intento algo como:

diff --git a/lib/signup/index.js b/lib/signup/index.js
index 9a95689..90c028e 100644
--- a/lib/signup/index.js
+++ b/lib/signup/index.js
@@ -7,6 +7,8 @@ var express = require('express')
   , path = require('path')
   , t = require('t-component')
   , signup = require('./lib/signup')
+  , config = require('lib/config')
+  , Recaptcha = require('recaptcha').Recaptcha
   ;

 /**
@@ -78,3 +80,9 @@ app.post('/resend-validation-email', function(req, res, next) {
     return res.json(200);
   })
 });
+
+app.get('/gimmeRecaptcha', function(req, res, next) {
+  var r = new Recaptcha(config.recaptchaPublicKey, config.recaptchaPrivateKey);
+  res.send(r.toHTML());
+});
+

[defvol]

w00t!

$ curl http://localhost:3000/signup/gimmeRecaptcha
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LdC1e4SAAAAABt3peCznBdMtY3FoHDobVeUIrYx"></script><noscript><iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdC1e4SAAAAABt3peCznBdMtY3FoHDobVeUIrYx" height="300" width="500" frameborder="0"></iframe><br><textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input type="hidden" name="recaptcha_response_field" value="manual_challenge"></noscript>% 

[defvol]

mi duda ahora es como hacer que la parte del cliente imprima el captcha generado en el servidor

[defvol]

intenté en index.js

app.set('recaptcha', reCaptchaHtml);

y en signup.js

var app = require('./index');
// ...
page('/signup', function(ctx, next) {
//...
  form.buildRecaptcha(app.get('recaptcha'));

y el inspector dice que app es undefined

[defvol]

mejor inserto el recaptcha desde el template

[cristiandouce]

Por favor lean esta sección donde ayuda a entender cuál es el error.

How to Component at DemocracyOS

El file index.js es reservado para server side. No se puede hacer require de ./index en el clien.

page.js es un component client side. Ahi el dilema.

[defvol]

entendido,

ya descarté ese hack

[defvol]

ahorita necesito pasarle el public key del recaptcha al render de signup.js, pero no veo donde

[cristiandouce]

Ahí actualicé el comment con el link a la wiki. How to Component at DemocracyOS

[cristiandouce]

Para pasar el publicKey te recomiendo agregarlo al config/development.json y o al config/production.json. Para un deploy de heroku hacer el par de la key en lib/config/env.js que le diga de qué variable de entorno sacarla.

Luego, agregar a la key client de configuración, cuáles son las keys que se copiaran para el modulo config de client side.

El módulo lib/config puede requerirse tanto de client como de server side.

Acá el tuto: How to add configuration settings

[defvol]

gracias, ya había leído esa parte del wiki, pero el problema que tengo es que el componente signup es server y client component al mismo tiempo, y el ejemplo que viene ahí es más sencillo de lo que tengo que hacer

[defvol]

las env vars ya las tengo setteadas

[defvol]

mi duda es, como paso vars locales a los templates? en el componente signup no se invoca render

[cristiandouce]

Todos los templates ya tienen como locals 3 elementos:

• citizen: la representación client del usuario
• config: para las configuraciones
• t: para traducciones

Directamente en el template podés sacar config['publicKey'] o como sea que nombraran la variable.

[cristiandouce]

Por otro lado, el modulo render que se utiliza para compilar los templates, toma como primer parámetro el template a buildear, y como segundo parámetro las locals que se mezclaran con las default.

[defvol]

a buenísimo, no sabía que los templates traen config... ya lo pruebo

[defvol]

ya están los nuevos commits en el branch, incluyen la integración de config vars en el client-side y el iframe con el recaptcha

https://github.com/mexico-abierto/app/commits/recaptcha

ahora tenemos que validar que los campos "hidden" del recaptcha los recibe el app.post

[cristiandouce]

no entiendo si los recibe o no?

[cristiandouce]

Bueno, después de jugar un poco con re-captcha logré armar esto:

Y como pueden observar, me entrega los siguientes campos en el form:

La forma de hacer un form custom, se ve acá: https://developers.google.com/recaptcha/docs/customization?hl=es-#Custom_Theming

Este es el link de un demo de un ejemplo de form custom como se lo explica en el link anterior: http://www.google.com/recaptcha/demo/custom

De esta manera van a poder manipular los elementos/mensajes y el CSS a deseo.

[cristiandouce]

@rodowi ya estaría todo en el branch como para que puedan continuar desde aquí. Si necesitan más ayuda, simplemente avisen!

[piamancini]

Rod, los banco a morir en todo, pero me da una pena ese captcha ahi con lo linda que está la página... #listolodije! un beso!

P. piamancini.com t: @piamancini s: piamancini democracyos.org democraciaenred.org

On Wed, Feb 19, 2014 at 3:56 PM, Cristian Douce notifications@github.comwrote:

@rodowi https://github.com/rodowi ya estaría todo en el branch como para que puedan continuar desde aquí. Si necesitan más ayuda, simplemente avisen!

Reply to this email directly or view it on GitHubhttps://github.com/mexico-abierto/app/issues/40#issuecomment-35534270 .

[gvilarino]

:+1: @piamancini :)

[cristiandouce]

Igual, no dudo que @rodowi y el team puedan meterle mano al theme y hacer que se vea mucho mejor! :dancer:

[defvol]

[cristiandouce]

Excelente!!!

Pregunta (solo porque soy un obsesivo): ¿Puede ser que la imagen del captcha no esté centrada o se extienda de más hacia la derecha del formulario?

[defvol]

nosotros también somos obsesivos :)

se extiende de más, el tamaño de la imagen es 300x57 desde que llega, y es complicado el override porque el script de recaptcha agrega width=300 inline.

decidimos quitarnos de problema y asumir que por ser de fondo transparente no se notaría :)

[cristiandouce]

Sino, extiendan el formulario a 300px como min-width :dancers:

[cristiandouce]

Si la montaña no viene a ti... ve a buscarla por los palos!

[defvol]

listo! https://github.com/mexico-abierto/app/commit/5fb69a458e0042a4aaa02b33b04540d3c72d6e5a