Nov 222014
 
Artículo PHP

Un sitio web que ofrece un servicio, puede necesitar implementar algún tipo de procedimiento de registro y validación de usuarios. De este modo, a los usuarios que se dan han dado de alta en el servicio, al validarse con su identificador de usuario y contraseña, se les da acceso a funcionalidades no disponibles para los usuarios anónimos.

En otro artículo de esta serie hemos explicado una posible implementación de esta funcionalidad mediante una serie de scripts PHP. En este artículo consideraremos el caso particular de una instalación de WordPress.

Especificaciones de la funcionalidad de registro y validación de usuarios

1. Alta de usuario – Formulario de registro – Verificación de email

El formulario de registro debe incluir al menos tres campos: “email”, “contraseña” y “repetir contraseña”.

Al procesar el formulario, se debe realizar una validación que detecte los errores más habituales: la dirección de email no es válida, el valor de “contraseña” y “repetir contraseña” no coinciden, la dirección de email ya existe, etc.

Si pasa la validación, se da de alta un usuario insertando un registro en una tabla de usuarios. La tabla incluye campos para el email y contraseña, fecha de alta, etc. También incluye un campo “verificado” que inicialmente se pone a cero (false)

Simultáneamente, se envía un email de verificación a la dirección de email introducida. El usuario debe hacer click en el enlace que contiene el email de verificación. Cuando el servidor recibe el acceso correspondiente al enlace de verificación, cambia el valor del campo “verificado” a uno (true).

2. Validación de usuario – Formulario de Inicio de Sesión

El formulario de login debe incluir dos campos “email” y “contraseña”. Opcionalmente, debe incluir también un CAPTCHA.

3. Cerrar sesión

Debe haber una página que saca al usuario de sesión. Normalmente, esta página redirigirá a la página de inicio del sitio.

4. Formulario olvidó su contraseña

El formulario olvidó su contraseña debe contener un campo “email”. Al procesar el formulario, se envía un email a la dirección de email introducida, con un enlace que da acceso a una página con un formulario en el que se puede introducir una nueva contraseña.

5. Compatibilidad con Wordpress Multisite

La funcionalidad de registro de usuarios debe ser compatible con una instalación WordPress Multisite

Plugins existentes en el directorio de WordPress

En WordPress, es difícil pensar en alguna funcionalidad para la que no se haya desarrollado ya un plugin, por lo que el primer paso es buscar en el directorio de plugins de WordPress el que más se ajuste a la funcionalidad que queremos. Nosotros nos hemos decidido por el plugin “Front-End Only Users“. Este plugin contiene casi toda la funcionalidad que deseamos implementar, y es compatible con una instalación WordPress Multisite, como la que utilizamos en OpenAlfa. Por otra parte, resulta sencillo adaptarlo a nuestras necesidades, con unas pequeñas modificaciones al código.

La instalación del plugin se realiza siguiendo el procedimiento habitual para instalar plugins en WordPress, y no ofrece ninguna dificultad.

Formulario de registro

Una vez instalado, Creamos una página “Registrarse” con el siguiente contenido:

[register redirect_page="/"]

Al acceder a la misma, podemos ver un formulario de registro de usuarios.

register-form

Formulario de inicio de sesión

También creamos una página “Iniciar sesión” con el correspondiente shortcode:

[login redirect_page="/"]

También creamos una página “Logout”:

[logout redirect_page="/"]

La página “Logout” no es visible, dado que cuando se llega a ella, cierra la sesión e inmediatamente redirige a la página de inicio del sitio.

Y por último creamos una página “Editar perfil” conteniendo el shortcode:

[edit-profile]

Tablas de la base de datos

Examinando la base de datos, podemos ver que el plugin ha creado nuevas tablas:

mysql> show tables;
...
| wp_EWD_FEUP_Fields         |
| wp_EWD_FEUP_Levels         |
| wp_EWD_FEUP_User_Fields    |
| wp_EWD_FEUP_Users          |
...
| wp_6_EWD_FEUP_Fields        |
| wp_6_EWD_FEUP_Levels        |
| wp_6_EWD_FEUP_User_Fields   |
| wp_6_EWD_FEUP_Users         |
...

Como vemos, el plugin está preparado para WordPress Multisite, y crea un conjunto de cuatro tablas para cada uno de los sitios existentes. En nuestro caso, estamos realizando la prueba en el site identificado con el número 6. Examinando el contenido de la tabla wp_6_EWD_FEUP_Users:

mysql> select * from wp_6_EWD_FEUP_Users\G
*************************** 1. row ***************************
                 User_ID: 1
                Username: openalfa@openalfa.com
           User_Password: 63982e54a7aeb0d89910475ba6dbd3ca6dd4e5a1
                Level_ID: 0
    User_Email_Confirmed: NULL
     User_Admin_Approved: No
       User_Date_Created: 2014-11-22 16:29:44
         User_Last_Login: 2014-11-23 08:32:11
User_Password_Reset_Code: NULL
User_Password_Reset_Date: 0000-00-00 00:00:00
1 row in set (0.00 sec)

Como vemos, la tabla contiene un registro con el usuario de prueba “openalfa@openalfa.com” que hemos creado utilizando el formulario de alta de usuario.

Añadir el nombre del usuario en el header

A continuación, queremos modificar la cabecera de las páginas del sitio, para que en la parte derecha del mismo aparezca lo siguiente:

  • Si no hay usuario en sesión, deben aparecer los enlaces a las páginas de login y de alta de usuario.header-login-register
  • Si hay usuario en sesión, debe aparecer un enlace a la página con el perfil del usuario, y un enlace para cerrar sesiónheader-user-in-session

El plugin “Front-End Only Users” no nos da esta posibilidad directamente, aunque en el foro de soporte del plugin se sugiere la posibilidad de editar el código PHP del tema para realizar este tipo de modificación.

En nuestro caso, dado que el tema que estamos utilizando en nuestro blog nos permite añadir widgets en el header, hemos decidido implementar esta funcionalidad creando un nuevo shortcode “user-name” en el plugin, para no tener que editar directamente el tema.

Para ello, creamos el script Insert_User_Name_or_Login_Register_Link.php en el directorio wp-content/plugins/front-end-only-users/Shortcodes/:

<?php
function Insert_User_Name($atts) {

    $User = new FEUP_User();
    if( $User -> Is_Logged_In() ):
        $UserCookie = CheckLoginCookie();
    $html = "<a href=\"/edit-profile\">" . $UserCookie['Username'] . "</a> " .
            "<a style=\"display: inline;\" href=\"/logout\">logout</a>";
    else:
        $html = "<a href=\"/login\">Iniciar sesión</a> / <a href=\"/register\">Registrarse</a>";
    endif;

    return $html;
}
add_shortcode("user-name", "Insert_User_Name");

La función Insert_User_Name() genera el código HTML correpondiente al shortcode “user-name”.

A continuación, localizamos, en el script principal “Main.php” del plugin, las sentencias “include” en las que se incluyen los shortcodes, y añadimos el shortcode recién creado:

...
include "Shortcodes/Insert_User_Data.php";
include "Shortcodes/Insert_User_Name_or_Login_Register_Link.php";
include "Shortcodes/Insert_User_List.php";
...

Y con esto ya podemos probarlo. En el área de widgets correspondiente a la parte derecha del header de página, añadimos un widget “Text” que contiene el shortcode “user-name”, y comprobamos el resultado.

Validación del email del usuario

El plugin también permite realizar la validación del email introducido al darse de alta. Para ello, realizamos la configuración en el formulario de administración del plugin.

En la pestaña “Options”, seleccionamos “Email Confirmation”=”Yes”. A continuación, en la pestaña “Emails”, configuramos el contenido del mensaje que será enviado al usuario:

email-confirm-config

Editamos como deseemos los campos “Send-From”, “Email Subject” y “Message Body”. El mensaje introducido en el campo “Message Body” debe incluir el shortcode “[confirmation-link]”, que será sustituído por un enlace de confirmación único al enviar el mensaje.

 Publicado por en 5:28 pm

 Deja un comentario

(requerido)

(requerido)