Dec 032014
 
Article PHP

A web site that delivers any type of service, might need to implement some kind of user signup / login functionality. In this way, registered users could be granted access to extra functionalities not available to anonymous users.

In a previous post we have already covered a possible implementation of this signup / login functionality on a generic web server, using a set of PHP scripts. This post focuses on the specific case of a standalone WordPress installation.

User signup / login functionality specifications

1. User registration – Signup Form – Email verification

The signup form used to register a new user must include at least three fields: “email”, “password” and “repeat password”.

In processing the form, there must exist a validation step that detects the most common errors: Invalid email address specified, the values of fields “password” and “repeat password” do not match, the email entered is already registered, etc. The validation should be executed on the client by means of javascript, although it is desirable to run it also on the server.

If the validation succeeds, the user is created adding a new record to a users table in the database. The users table must have email and password fields, as well as registration date, and optionally user name and other user data. There should also be a “email verified” field that is initialized to “false”, and a field “verification code” with a unique identifier that will be used in the email verification step.

Simultaneously, a verification email, containinig a verification link, is sent to the email address entered. The verification code is added as an argument of the verification email.

On reception of the email, the user must click on the verification link. This sends a request to the server, that proceeds to change the value of the “email verified” field to “true”.

2. User login – Login Form

The login form used to validate a user must include two fields “email” and “password”. Optionally, it can also include a CAPTCHA.

3. Logout functionality

Validated users must have a way to end the session. This is normally done by means of a “logout” link, that sends a request to the server to end the session and redirect the user to the home page.

4. Forgot your password Form

Users can request the password to be reset by means of a “forgot your password” form. The form must include at least a field “email”. The server processes this form sending an email to the email address entered, with a link to a page that contains a password reset form that can be used to enter a new password.

5. Compatibility with WordPress Multisite

The signup / login functionality must be compatible with WordPress Multisite. Every site in the WordPress Multisite installation should have a separate users table.

Existing WordPress Plugins

The first step in implementing some new functionality on a site powered by WordPress is to have a look in the plugins directory, as it is most likely that someone will have already developed a plugin that at least in part implements the desired functionality. We found there the “Front-End Only Users” plugin. This plugin matches very closely the signup / login functionality we were looking for. It is WordPress Multisite enabled, and it seems easy to tweak it to adapt its behaviour to our specifications, making some minor changes to the PHP code.

The installation of the plugin is done following the usual WorPress plugin installation procedure, and is quite straightforward.

Signup form

Once installed, we need to create a “Create Account” page, with the following content:

[register redirect_page="/"]

Accesing the register page from a browser, we can see that the “register” shortcode generates the user registration form:

register-form-en

 

Login Form

A “Login” page is created in the same way, using the “login” shortcode:

[login redirect_page="/"]

 

 

login-form-en

Again, a “Logout” page is created in the same way, using the “logout” shortcode:

[logout redirect_page="/"]

The “logout” shortcode in the “Logout” page does not generate any visible content. When the page is accessed, the server terminates the session and immediately redirects the user to the site’s home page.

Finally, the “Edit Profile” page is created, and the “edit-profile” shortcode is added to it:

[edit-profile]

Actually, this page only makes sense if we are going to add other fields to the registration form, and we want the user to be able to edit the values of those fields.

Database Tables

We can have a look at the tables in the database to find out the tables that have been created by the plugin:

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         |
...

As we can see, the plugin creates four tables for each of the sites in our Multisite installation. We have been testing the plugin in the site with the site identifier 6, and the corresponding tables created by the plugin are those starting with “wp_6_EWD_FEUP_”.

Now, we can examine the content of table 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)

We can see that there is a record in the table for the user “openalfa@openalfa.com” that we have just created using the register form.

Adding the username to the header

Now that the basic functionality of the plugin is in place, we want to modify the site’s pages, to display to the right of the header:

  • Links to the login/register pages, if there is no logged in user.
    header-login-register-en
  • If there is a logged in user, show the user name (email) as a link to the user’s profile, and a logout link:
    header-user-in-session-en

“Front-End Only Users” does not provide a direct way to make this change, but it is easy to implement with a small change in the PHP code of the plugin.

We will be creating a new shortcode “user-name” that will render the desired html code. Then, the shortcode will be added to a widget in the header, already available in the theme of our blog:

Create a script Insert_User_Name_or_Login_Register_Link.php under the directory 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\">Create Account</a>";
    endif;

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

Next, locate in the plugin’s “Main.php” script the “include” sentences that include the shortcodes, and add the include sentence for the new shortcode:

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

Finally, add a “Text” widget containing the “[user-name]” shortcode to the right header widget area available in our theme, and load the blog in the browser to test the result.

User email validation

The plugin also has the functionality to validate the email entered during the user registration. This is configured in the plugin admin form.

In the “Options” tab, set “Email Confirmation” to “Yes”. Then, in the “Emails” tab, configure the email that will be sent:

email-confirm-config

Edit as appropriate the “Send-From”, “Email Subject” and “Message Body”. The “Message Body” must include the shortcode “[confirmation-link]” that will be replaced with a unique confirmation link when the message is sent.

 Posted by at 3:37 pm

 Leave a Reply

(required)

(required)