Construye un flujo de usuario personalizado de WordPress — Parte 2: Registro de nuevos usuarios

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En el primer tutorial de esta serie sobre la personalización de la experiencia de inicio de sesión en WordPress, creamos un plugin que te permite reemplazar tu pantalla de inicio de sesión de WordPress con una página personalizada. Hoy, vamos a ir un paso más allá y vamos a reemplazar el flujo de registro de nuevo usuario de la misma manera.

Las razones para personalizar la página de inicio de sesión que describimos en la Parte 1 (hacer coincidir la página de registro con el tema que use tu sitio para ocultar WordPress y hacer que la experiencia del usuario sea perfecta) se aplican también al registro de un nuevo usuario, pero también hay algunas razones más concretas por las que es posible que desees crear tu propia página de registro:

En primer lugar, en el registro, es posible que desees sustituir los campos que pides a tus nuevos miembros, añadiendo campos adicionales o tal vez eliminando algunos. Por ejemplo, en este tutorial, eliminaremos el campo de nombre de usuario y en su lugar usaremos la dirección de correo electrónico del nuevo usuario como inicio de sesión.
En segundo lugar, existe spam de registro. Cuando abrí la posibilidad de registro a todo el mundo por primera vez en mi sitio, tan solo hizo falta que transcurriesen unas horas para que apareciera el primer registro de spam, y uno más justo tras él. Añadir un campo reCAPTCHA en una página de registro personalizada es una buena manera de controlar esto mientras al mismo tiempo mantenemos una experiencia de usuario coherente.
Por último, es posible que desees realizar algunas acciones personalizadas en el registro, por ejemplo, añadir el nuevo usuario a tu lista de correo. Después de haber construido tu propio flujo de registro, esto será más fácil que nunca.

Así que, equipados con este conjunto de razones, comencemos.

En este tutorial, aprenderás a reemplazar la pantalla de registro de WordPress con una página personalizada y a implementar el registro con tu propio código, sin violar los principios de diseño de WordPress.

La funcionalidad se construirá sobre el plugin que ya construimos en la Parte 1 de esta serie de tutoriales, así que si aún no lo has leído, es una buena idea que empieces echando un vistazo a dicho tutorial. Puede escribir el código tú mismo mientras sigues el tutorial o descargar el código de ejemplo del proyecto Github del tutorial.

Añadir una página de registro personalizada para nuevos usuarios

La página predeterminada de WordPress para el registro de nuevos usuarios en wp-login.php?action-register tiene este aspecto:

No está mal, pero a menos que estés ejecutando WordPress.org, lo más probable es que no sea coherente con el diseño de tu blog o sitio web.

Nota: Si no puedes acceder a la página de registro en tu sitio WordPress, es porque por defecto WordPress no permite que se registren nuevos usuarios. Para cambiar esto, dirígete a la página Ajustes > Generales en el escritorio de administración y marca la casilla de verificación que acompaña a la etiquete "Cualquiera puede registrarse". A continuación, guarda la configuración y vuelve a la página de registro.

Check this checkbox to enable new user registration in WordPress

En la primera parte de la serie, creamos una página personalizada para mostrar el formulario de inicio de sesión y un código corto que se usó para colocar el formulario de inicio de sesión en esa página. Ahora, haremos lo mismo para el registro: primero, crearemos un shortcode para mostrar el formulario de registro y también una página en la que se colocará este shortcode.

También es posible colocar el shortcode en una página diferente o tener los formularios de inicio de sesión y registro en una misma página.

Paso 1: Crear el Shortcode

Construyendo sobre el plugin ya creado en la Parte 1 de la serie, comencemos añadiendo un shortcode para la página de registro.

Al final del constructor de la clase del plugin (Personalize_Login_Plugin), añade la siguiente definición de shortcode:

1	add_shortcode( 'custom-register-form', array( $this, 'render_register_form' ) );

A continuación, crea la función responsable de representar el formulario de registro de nuevo usuario:

/**
 * A shortcode for rendering the new user registration form.
 *
 * @param  array   $attributes  Shortcode attributes.
 * @param  string  $content     The text content for shortcode. Not used.
 *
 * @return string  The shortcode output
 */
public function render_register_form( $attributes, $content = null ) {
    // Parse shortcode attributes
    $default_attributes = array( 'show_title' => false );
    $attributes = shortcode_atts( $default_attributes, $attributes );

    if ( is_user_logged_in() ) {
        return __( 'You are already signed in.', 'personalize-login' );
    } elseif ( ! get_option( 'users_can_register' ) ) {
        return __( 'Registering new users is currently not allowed.', 'personalize-login' );
    } else {
        return $this->get_template_html( 'register_form', $attributes );
    }
}

Si ya has leído la Parte 1 de la serie, observarás muchas similitudes entre esta función y la función de representación del formulario de inicio de sesión de ese tutorial.

En primer lugar, en las líneas 10-12, verás que el shortcode toma un atributo show_title, utilizado para definir si un título debe representarse con el shortcode o no.

En segundo lugar, el formulario de registro no se muestra a los usuarios que ya han iniciado sesión (líneas 14-15). El mensaje devuelto en lugar del formulario es bastante simple, por lo que dependiendo de tus necesidades, es posible que desees reemplazar este fragmento de código por algo más elaborado, por ejemplo, un enlace de vuelta al escritorio.

Un nuevo elemento es la comprobación de la opción de WordPress users_can_register en la línea 16. Esta opción está controlada por el campo Ajustes generales de WordPress Cualquiera puede registrarse mencionado anteriormente. Para asegurarnos de respetar la configuración que el usuario haya definido en WordPress, no debemos mostrar el formulario de registro si la configuración está establecida en false. En su lugar, como se ve en la línea 17, la función devolverá una notificación sobre indicando que el registro está cerrando.

La representación real del formulario de registro se realiza en la línea 19 utilizando una plantilla PHP, register_form.php, ubicada en el directorio templates que creamos en el tutorial anterior. Consulta la Parte 1 para obtener una explicación más detallada sobre cómo funciona esto, así como el código para la función utilizada, get_template_html.

Ahora, vamos a añadir la plantilla del formulario de registro.

Paso 2: Crear el formulario de registro

En el directorio templates, añade un nuevo archivo PHP y llámalo register_form.php. A continuación, sigue añadiendo un formulario de registro con los campos que desees que rellene el nuevo usuario.

Aquí tienes la versión que creé para este tutorial; un formulario de registro bastante estándar con campos para el correo electrónico, el nombre y el apellido del usuario. El formulario no contiene un campo independiente para un nombre de usuario, ya que la dirección de correo electrónico se duplicará como uno.

Al igual que el registro del nuevo usuario predeterminado de WordPress, nuestra versión generará la contraseña y la enviará por correo electrónico al nuevo usuario. Esto sirve como una simple comprobación de correo electrónico (el usuario no podrá iniciar sesión sin introducir una dirección de correo electrónico válida) y aplica cierto nivel de seguridad a la contraseña.

Por supuesto, este enfoque tiene su propio riesgo de seguridad en forma de contraseñas de correo electrónico, por lo que es buena idea preguntarle (o incluso requerirle) al usuario que cambie la contraseña una vez haya iniciado sesión.

<div id="register-form" class="widecolumn">
    <?php if ( $attributes['show_title'] ) : ?>
        <h3><?php _e( 'Register', 'personalize-login' ); ?></h3>
    <?php endif; ?>

    <form id="signupform" action="<?php echo wp_registration_url(); ?>" method="post">
        <p class="form-row">
            <label for="email"><?php _e( 'Email', 'personalize-login' ); ?> <strong>*</strong></label>
            <input type="text" name="email" id="email">
        </p>

        <p class="form-row">
            <label for="first_name"><?php _e( 'First name', 'personalize-login' ); ?></label>
            <input type="text" name="first_name" id="first-name">
        </p>

        <p class="form-row">
            <label for="last_name"><?php _e( 'Last name', 'personalize-login' ); ?></label>
            <input type="text" name="last_name" id="last-name">
        </p>

        <p class="form-row">
            <?php _e( 'Note: Your password will be generated automatically and sent to your email address.', 'personalize-login' ); ?>
        </p>

        <p class="signup-submit">
            <input type="submit" name="submit" class="register-button"
                   value="<?php _e( 'Register', 'personalize-login' ); ?>"/>
        </p>
    </form>
</div>

En las líneas 2-4, la plantilla representa un título para el formulario si se ha establecido el atributo show_title.

Luego, en la línea 6, echa un vistazo al parámetro action: El formulario se envía a la URL de registro predeterminada de WordPress que podemos recuperar usando la función wp_registration_url. Hablaremos más sobre esto pronto, pero ya mencionaré ahora que esto no significa que vayamos a dejar que WordPress maneje el registro...

El resto de la plantilla es un formulario HTML bastante estándar con campos para correo el electrónico, nombre y apellido.

Antes de que lleguemos a ver el shortcode en acción, todavía necesitamos crear la página de registro y colocar el shortcode en ella.

Paso 3: Crear la página de registro de nuevos usuarios

Para mostrar el formulario de registro, debes añadir el siguiente código en una página de WordPress:

1	[custom-register-form]

Podría hacerse en cualquier página, pero por ahora, vamos a crear una nueva página para el formulario de registro.

En la parte anterior, creamos una función, plugin_activated, para crear las páginas del plugin cuando se activase el plugin. Dentro de la función, añadimos una matriz para almacenar todas las páginas que el plugin debe crear.

Ahora, añadiremos la información sobre la nueva página a la matriz. Después de haberla añadido, la definición de la matriz debe tener este aspecto, con la nueva página (con el slug member-register) definida en último lugar:

// Information needed for creating the plugin's pages
$page_definitions = array(
    'member-login' => array(
        'title' => __( 'Sign In', 'personalize-login' ),
        'content' => '[custom-login-form]'
    ),
    'member-account' => array(
        'title' => __( 'Your Account', 'personalize-login' ),
        'content' => '[account-info]'
    ),
    'member-register' => array(
        'title' => __( 'Register', 'personalize-login' ),
        'content' => '[custom-register-form]'
    ),
);

El gancho de activación sólo se ejecuta cuando se activa un plugin, así que continúa adelante y desactiva y después activa el plugin en la página Plugins. Ahora, cuando navegues a la URL https://<YOURSITE>/member-register, deberías ver algo como esto (usando el actual tema predeterminado de WordPress, Twenty Fifteen):

Paso 4: Redirige al usuario a nuestra nueva página de registro

Antes de pasar a la ejecución de la acción de registro, vamos a asegurarnos de que el usuario siempre se redirige a esta nueva página de registro en lugar de la nueva página de usuario predeterminada en wp-login.php?action-register.

Para hacer esto, vamos a utilizar el gancho de acción login_form_{acción} que, como se recordará de la Parte 1, se activa antes de cada acción en wp-login.php. Como se ve en el enlace anterior, la acción en este caso es register, y por lo tanto, vamos a enganchar nuestra función a login_form_register.

En el constructor del plugin, añade la siguiente línea:

1	add_action( 'login_form_register', array( $this, 'redirect_to_custom_register' ) );

A continuación, crea la función de devolución de llamada:

/**
 * Redirects the user to the custom registration page instead
 * of wp-login.php?action=register.
 */
public function redirect_to_custom_register() {
    if ( 'GET' == $_SERVER['REQUEST_METHOD'] ) {
        if ( is_user_logged_in() ) {
            $this->redirect_logged_in_user();
        } else {
            wp_redirect( home_url( 'member-register' ) );
        }
        exit;
    }
}

A medida que conectamos la función a la acción login_form_register, sabemos que el usuario está intentando publicarlo o acceder al formulario de registro de nuevo usuario.

Es por eso que lo primero que hacemos en esta función (en la línea 6) es comprobar el método de solicitud que se usó para acceder a la página: la redirección solo se realiza en solicitudes GET, ya que la solicitud POST se reservará para ejecutar la acción de registro. Más sobre esto pronto.

A continuación, la función continúa comprobando si el usuario ya ha iniciado sesión (línea 7).

Los usuarios que hayan iniciado sesión son redirigidos a la página de su cuenta (o al escritorio de administración si son administradores) mediante la función redirect_logged_in_user que creamos en la Parte 1. Los visitantes son redirigidos a nuestra nueva página, member-register.

Ahora, con la página y el formulario en su sitio, vamos a pasar a lo que sucede cuando el usuario envía el formulario.

Registrar un nuevo usuario

Cuando el usuario envía el formulario de registro de nuevo usuario, su contenido se publica en wp-login.php?action-register, la misma URL que usamos al redirigir al usuario a la página de registro anterior.

Para hacer las personalizaciones que mencionamos anteriormente (lo más importante, utilizando la dirección de correo electrónico como nombre de usuario) tendremos que reemplazar esta funcionalidad con nuestro propio código. Para ello, primero crearemos una función para registrar un nuevo usuario mediante programación y, a continuación, llamaremos a esta función en un controlador de acciones.

Paso 1: Crear el usuario

Comencemos creando una función que puede usarse para registrar un nuevo usuario utilizando los datos recopilados del formulario anterior: dirección de correo electrónico, nombre y apellido. La dirección de correo electrónico será el único identificador único, y el resto es sólo algo que está bien tener.

En la clase de plugin, añade la siguiente función privada:

/**
 * Validates and then completes the new user signup process if all went well.
 *
 * @param string $email         The new user's email address
 * @param string $first_name    The new user's first name
 * @param string $last_name     The new user's last name
 *
 * @return int|WP_Error         The id of the user that was created, or error if failed.
 */
private function register_user( $email, $first_name, $last_name ) {
    $errors = new WP_Error();

    // Email address is used as both username and email. It is also the only
    // parameter we need to validate
    if ( ! is_email( $email ) ) {
        $errors->add( 'email', $this->get_error_message( 'email' ) );
        return $errors;
    }

    if ( username_exists( $email ) || email_exists( $email ) ) {
        $errors->add( 'email_exists', $this->get_error_message( 'email_exists') );
        return $errors;
    }

    // Generate the password so that the subscriber will have to check email...
    $password = wp_generate_password( 12, false );

    $user_data = array(
        'user_login'    => $email,
        'user_email'    => $email,
        'user_pass'     => $password,
        'first_name'    => $first_name,
        'last_name'     => $last_name,
        'nickname'      => $first_name,
    );

    $user_id = wp_insert_user( $user_data );
    wp_new_user_notification( $user_id, $password );

    return $user_id;
}

Como mencioné anteriormente, la dirección de correo electrónico es el único identificador único, y también el único parámetro requerido. Es por eso que comenzamos la función validando su valor. Primero en la línea 15, validamos la dirección de correo electrónico y luego, en la línea 20 verificamos que la dirección de correo electrónico no esté aún en uso. Si se produce un error en cualquiera de las validaciones, se devuelve un objeto Wp_Error. Volveremos a mostrar pronto estos errores.

Si todo va bien y no se encuentran errores, la función continúa generando una contraseña en la línea 26.

En las líneas 28-37, encontrarás el núcleo de esta función, la creación del nuevo usuario. El usuario se añade usando la función de WordPress wp_insert_user. (línea 37). Como único parámetro, la función toma una matriz asociativa con información sobre el usuario que se está creando. Como verás en las líneas 28-35, usamos $email para los campos de nombre de usuario (user_login) y correo electrónico (email). Para obtener una lista completa de los campos que se pueden incluir en la matriz de atributos, echa un vistazo al Códice de WordPress.

Después de crear el usuario, en la línea 38, la función llama a wp_new_user_notification para enviar la contraseña generada al nuevo usuario y para notificar al administrador del sitio del nuevo usuario.

Paso 2: Llamar al código de registro cuando un usuario envíe el formulario

Ahora que hemos escrito el código para registrar al usuario, podemos invocarlo cuando el formulario de registro sea enviado.

Anteriormente, cuando añadimos la redirección a nuestra página de registro personalizada mediante la acción login_form_register, mencioné que también usaríamos la misma acción para controlar las solicitudes POST.

Como suele ser el caso en la programación, esta no es la única manera de manejar el registro de nuevo usuario, pero tiene un beneficio bastante importante: de esta manera, nos aseguraremos de que nadie pueda acceder accidentalmente al código de registro predeterminado en WordPress.

Para mayor claridad, vamos a añadir una función independiente y la vicularemos a la misma acción (técnicamente, no hay ninguna razón por la que no puedas añadir este código a la función de redirección que creamos anteriormente).

En el constructor de la clase del plugin, añade una nueva definición de acción:

1	add_action( 'login_form_register', array( $this, 'do_register_user' ) );

A continuación, crea la función:

/**
 * Handles the registration of a new user.
 *
 * Used through the action hook "login_form_register" activated on wp-login.php
 * when accessed through the registration action.
 */
public function do_register_user() {
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] ) {
        $redirect_url = home_url( 'member-register' );

        if ( ! get_option( 'users_can_register' ) ) {
            // Registration closed, display error
            $redirect_url = add_query_arg( 'register-errors', 'closed', $redirect_url );
        } else {
            $email = $_POST['email'];
            $first_name = sanitize_text_field( $_POST['first_name'] );
            $last_name = sanitize_text_field( $_POST['last_name'] );

            $result = $this->register_user( $email, $first_name, $last_name );

            if ( is_wp_error( $result ) ) {
                // Parse errors into a string and append as parameter to redirect
                $errors = join( ',', $result->get_error_codes() );
                $redirect_url = add_query_arg( 'register-errors', $errors, $redirect_url );
            } else {
                // Success, redirect to login page.
                $redirect_url = home_url( 'member-login' );
                $redirect_url = add_query_arg( 'registered', $email, $redirect_url );
            }
        }

        wp_redirect( $redirect_url );
        exit;
    }
}

La función comienza con una comprobación del método de solicitud en la línea 8: la función está vinculada a la acción de WordPress login_form_register, la misma que usamos para redirigir al usuario, y el método de solicitud es lo que diferencia los dos usos entre sí.

En la línea 11, verificamos que se permite registrar nuevos usuarios. Si no es así, se redirige al usuario a la página de registro con un código de error (closed) como parámetro de consulta (register-errors).

Por otro lado, si el registro está abierto, la función recopila los parámetros necesarios (líneas 15-17) de los datos de solicitud y los utiliza para llamar a la función que creamos anteriormente (línea 19) para crear el nuevo usuario.

Después de la llamada register_user, la función redirige al usuario al lugar correcto dependiendo de si el registro del nuevo usuario se realizó correctamente o no:

Después de una redirección exitosa, el usuario es redirigido a la página de inicio de sesión, con el parámetro $registered que indica que se acaba de crear un nuevo usuario.
En caso de error, la redirección dirige de nuevo al formulario de registro con los códigos de error de la función de registro de nuevo usuario que se combinan en un listado separados por comas y se incluyen en la solicitud (líneas 23-24).

Paso 3: Mostrar mensajes de error y éxito

Como hemos visto anteriormente, la función de registro redirige al usuario a la página de inicio de sesión si el registro se realizó correctamente y a la página de registro de nuevo en caso de que se diese algún error, con el estado pasado como parámetro de solicitud.

Ahora, vamos a añadir código para mostrar esos mensajes al usuario, empezando por los mensajes de error en la página de registro de nuevo usuario.

En render_register_form, añade el siguiente fragmento de código justo antes de representar la plantilla:

// Retrieve possible errors from request parameters
$attributes['errors'] = array();
if ( isset( $_REQUEST['register-errors'] ) ) {
    $error_codes = explode( ',', $_REQUEST['register-errors'] );

    foreach ( $error_codes as $error_code ) {
        $attributes['errors'] []= $this->get_error_message( $error_code );
    }
}

Este fragmento de código comprueba primero si se han pasado errores en el parámetro de solicitud register-errors (línea 2). En caso afirmativo, pasa por todos ellos, buscando los mensajes de error correspondientes utilizando la función get_error_message que creamos en la Parte 1 de esta serie de tutoriales.

Los mensajes de error se recopilan en un array de la matriz $attributes para imprimir en la plantilla.

Para poder mostrar los mensajes de error correctos, también necesitaremos añadir en la función get_error_message los nuevos mensajes de error. En la estructura del switch, añade estos mensajes de error (o los tuyos propios):

// Registration errors

case 'email':
    return __( 'The email address you entered is not valid.', 'personalize-login' );

case 'email_exists':
    return __( 'An account exists with this email address.', 'personalize-login' );

case 'closed':
    return __( 'Registering new users is currently not allowed.', 'personalize-login' );

Para mostrar los errores en la página de registro, añade el siguiente código en la plantilla register_form.php entre el título y el formulario:

<?php if ( count( $attributes['errors'] ) > 0 ) : ?>
    <?php foreach ( $attributes['errors'] as $error ) : ?>
        <p>
            <?php echo $error; ?>
        </p>
    <?php endforeach; ?>
<?php endif; ?>

A continuación, añadiremos el mensaje de éxito.

Cuando un nuevo usuario se haya registrado correctamente, es redirigido a la página Iniciar sesión, con un parámetro, registered={email address} anexado a la dirección URL.

En la función render_login_form, añade las dos siguientes líneas para comprobar si el parámetro está presente:

1	// Check if the user just registered
2	$attributes['registered'] = isset( $_REQUEST['registered'] );

Después, en la plantilla login_form.php, añade un mensaje que se mostrará si se establece la bandera registered:

<?php if ( $attributes['registered'] ) : ?>
    <p class="login-info">
        <?php
            printf(
                __( 'You have successfully registered to <strong>%s</strong>. We have emailed your password to the email address you entered.', 'personalize-login' ),
                get_bloginfo( 'name' )
            );
        ?>
    </p>
<?php endif; ?>

Eso es todo. Ahora has creado un nuevo flujo de registro de usuario completo con validación de parámetros e informes de errores.

Sigue adelante con la creación de una nueva cuenta de usuario para probar el flujo.

Si estás comprobando el plugin en un servidor local, a menos que hayas configurado los ajustes del correo electrónico, es posible que no recibas el correo electrónico que contiene la contraseña, es normal.

Lucha contra el spam de registro con ReCaptcha de Google

Mientras que el formulario de registro ya está completo, seguiremos personalizándolo un poco más añadiendo una comprobación reCAPTCHA (es la casilla de verificación "No soy un robot" que encontrarás en muchos de los sitios online más importantes) para evitar que los spammers de registro creen cuentas en tu sitio web.

Paso 1: Obtener tu clave de Captcha

Primero, visita el sitio de reCAPTCHA. Haz clic en el botón "Obtener reCAPTCHA" en la esquina superior derecha para acceder a la página de administración de reCAPTCHA.

Si no has iniciado sesión en tu cuenta de Google, se te pedirá que lo hagas. Si aún no tiene uno, tendrás que crear una para usar esta herramienta.

En la página de la cuenta de reCAPTCHA, encontrarás el siguiente formulario. Utilízalo para insertar información sobre tu sitio web.

Una vez hayas enviado el formulario haciendo clic en Registrarme, verás una página con instrucciones sobre cómo habilitar reCAPTCHA en tu sitio, así como dos claves utilizadas para usar la API: Clave de sitio web y Clave secreta.

Para almacenar las claves en nuestro plugin de WordPress, necesitaremos crear dos campos de configuración. Para que las cosas sean sencillas, las añadiremos a los Ajustes generales y no crearemos una página de configuración personalizada todavía.

Para añadir los campos de configuración, primero engancha una nueva acción. En el constructor del plugin, añade la siguiente nueva línea:

1	add_filter( 'admin_init' , array( $this, 'register_settings_fields' ) );

A continuación, crea la función para definir los campos de configuración y las dos funciones de devolución de llamada que representarán los campos de configuración:

/**
 * Registers the settings fields needed by the plugin.
 */
public function register_settings_fields() {
    // Create settings fields for the two keys used by reCAPTCHA
    register_setting( 'general', 'personalize-login-recaptcha-site-key' );
    register_setting( 'general', 'personalize-login-recaptcha-secret-key' );

    add_settings_field(
        'personalize-login-recaptcha-site-key',
        '<label for="personalize-login-recaptcha-site-key">' . __( 'reCAPTCHA site key' , 'personalize-login' ) . '</label>',
        array( $this, 'render_recaptcha_site_key_field' ),
        'general'
    );

    add_settings_field(
        'personalize-login-recaptcha-secret-key',
        '<label for="personalize-login-recaptcha-secret-key">' . __( 'reCAPTCHA secret key' , 'personalize-login' ) . '</label>',
        array( $this, 'render_recaptcha_secret_key_field' ),
        'general'
    );
}

public function render_recaptcha_site_key_field() {
    $value = get_option( 'personalize-login-recaptcha-site-key', '' );
    echo '<input type="text" id="personalize-login-recaptcha-site-key" name="personalize-login-recaptcha-site-key" value="' . esc_attr( $value ) . '" />';
}

public function render_recaptcha_secret_key_field() {
    $value = get_option( 'personalize-login-recaptcha-secret-key', '' );
    echo '<input type="text" id="personalize-login-recaptcha-secret-key" name="personalize-login-recaptcha-secret-key" value="' . esc_attr( $value ) . '" />';
}

Como este tutorial no trata sobre la API de Ajustes de WordPress, no pasaremos por la declaración de campos de configuración. Si no estás familiarizado sobre cómo funciona la adición de ajustes en WordPress, echa un vistazo a esta completa serie de tutoriales de Tom McFarlin.

Ahora, dirígete a la página Ajustes generales, copia las claves reCAPTCHA en los dos campos que acabas de crear y guarda los ajustes.

Paso 2: Mostrar el CAPTCHA

Con los preparativos realizados, ahora podemos añadir el campo reCAPTCHA y usarlo para verificar que nuestros usuarios son humanos.

En render_registration_form, primero recupera la clave del sitio de reCAPTCHA de los ajustes de WordPress y guárdala en la matriz $attributes para que esté disponible en la plantilla:

1	// Retrieve recaptcha key
2	$attributes['recaptcha_site_key'] = get_option( 'personalize-login-recaptcha-site-key', null );

A continuación, utilizando el parámetro, añade un marcador de posición para el campo reCAPTCHA en el formulario de registro, justo sobre el botón Enviar:

<?php if ( $attributes['recaptcha_site_key'] ) : ?>
    <div class="recaptcha-container">
        <div class="g-recaptcha" data-sitekey="<?php echo $attributes['recaptcha_site_key']; ?>"></div>
    </div>
<?php endif; ?>

El campo reCAPTCHA real se colocará dentro del anterior div usando JavaScript. Por lo tanto, para mostrar el campo, todavía tendremos que incluir el JavaScript en el pie de página.

WordPress tiene una acción concreta sólo para este uso. Agregue la siguiente línea en el constructor del plugin:

1	add_action( 'wp_print_footer_scripts', array( $this, 'add_captcha_js_to_footer' ) );

A continuación, crea la función add_captcha_js_to_footer que imprime la etiqueta de inclusión de JavaScript que carga la API reCAPTCHA desde Google:

/**
 * An action function used to include the reCAPTCHA JavaScript file
 * at the end of the page.
 */
public function add_captcha_js_to_footer() {
    echo "<script src='https://www.google.com/recaptcha/api.js'></script>";
}

Ahora, cuando vayas a la página de registro, deberías ver ya en su sitio el campo reCAPTCHA:

Paso 3: Comprueba el CAPTCHA

Si la comprobación basada en JavaScript "no es un robot" es correcta, el widget reCAPTCHA añadirá un nuevo parámetro al formulario, g-recaptcha-response. A continuación, en las validaciones del lado del servidor en la función do_register_user, podemos usar el parámetro para comprobar que el usuario ha superado la prueba.

En primer lugar, vamos a crear una función para comprobar el parámetro reCAPTCHA:

/**
 * Checks that the reCAPTCHA parameter sent with the registration
 * request is valid.
 *
 * @return bool True if the CAPTCHA is OK, otherwise false.
 */
private function verify_recaptcha() {
    // This field is set by the recaptcha widget if check is successful
    if ( isset ( $_POST['g-recaptcha-response'] ) ) {
        $captcha_response = $_POST['g-recaptcha-response'];
    } else {
        return false;
    }

    // Verify the captcha response from Google
    $response = wp_remote_post(
        'https://www.google.com/recaptcha/api/siteverify',
        array(
            'body' => array(
                'secret' => get_option( 'personalize-login-recaptcha-secret-key' ),
                'response' => $captcha_response
            )
        )
    );

    $success = false;
    if ( $response && is_array( $response ) ) {
        $decoded_response = json_decode( $response['body'] );
        $success = $decoded_response->success;
    }

    return $success;
}

En las líneas 9-13, la función recupera la respuesta de reCAPTCHA. Si no se encuentra, el usuario ni siquiera ha intentado completar la prueba antes de enviar el formulario.

Después, en las líneas 16-24, la función utiliza wp_remote_post para enviar una solicitud POST al servidor reCAPTCHA que verificará la respuesta recibida. La solicitud toma dos parámetros, incrustados en una matriz con el id body: la clave secreta de reCAPTCHA y la respuesta que estamos validando, leída del parámetro de solicitud g-recaptcha-response.

El servidor devuelve su respuesta como un objeto JSON codificado. Una vez que la respuesta sea descodificada, puede ser utilizarda para comprobar la respuesta como lo hacemos en la línea 29.

A continuación, vamos a usar la función en handle_register_request para que la comprobación de reCAPTCHA sea parte de la validación del parámetro. Para mayor claridad, aquí está todo el constructor if...else con el nuevo código anexado en el medio (líneas 4-6):

if ( ! get_option( 'users_can_register' ) ) {
    // Registration closed, display error
    $redirect_url = add_query_arg( 'register-errors', 'closed', $redirect_url );
} elseif ( ! $this->verify_recaptcha() ) {
    // Recaptcha check failed, display error
    $redirect_url = add_query_arg( 'register-errors', 'captcha', $redirect_url );
} else {
    $email = $_POST['email'];
    $first_name = sanitize_text_field( $_POST['first_name'] );
    $last_name = sanitize_text_field( $_POST['last_name'] );

    $result = $this->register_user( $email, $first_name, $last_name );

    if ( is_wp_error( $result ) ) {
        // Parse errors into a string and append as parameter to redirect
        $errors = join( ',', $result->get_error_codes() );
        $redirect_url = add_query_arg( 'register-errors', $errors, $redirect_url );
    } else {
        // Success, redirect to login page.
        $redirect_url = home_url( 'member-login' );
        $redirect_url = add_query_arg( 'registered', $email, $redirect_url );
    }
}

Si se produce un error en la comprobación de reCAPTCHA, el usuario es redirigido a la página de registro con el código de error captcha incluido en la dirección URL.

Para mostrar el error al usuario, añade un mensaje de error correspondiente en la función get_error_message. Tal vez algo como esto:

1	case 'captcha':
2	return __( 'The Google reCAPTCHA check failed. Are you a robot?', 'personalize-login' );

Y eso es todo. Has añadido una comprobación reCAPTCHA en tu nuevo flujo de registro de usuario.

¿Qué viene después?

Ahora has personalizado con éxito el nuevo flujo de registro de usuarios de tu sitio basado en WordPress. Si tienes más ideas sobre las cosas que te gustaría hacer de manera diferente en este paso, este es un buen momento para ampliar los cambios que hicimos en este tutorial. Añade nuevos campos, realiza más validaciones, añade el usuario a una lista de correo. Lo que quieras.

En el siguiente, y último, tutorial de esta serie, vamos a completar la personalización mediante la sustitución de la funcionalidad "Olvidaste tu contraseña" con nuestras propias páginas personalizadas.

Hasta entonces, disfruta creando código.