Members
Last updated: Jul 26, 2024

Introduction

The main purpose of the members functionality is to be able to create a 'members-only' section on your website. The term 'members' may or may not apply to your situation. But in short it's an account which you can use to restrict certain areas of your website to registered users.

Please do not mistake a member for a user in the CMS. Members do not have CMS access. Just as users don't have access to the restricted parts of your website.

Configuring members

When you go to the members section in the CMS for the first time, you'll notice that there aren't any members yet. By default only 4 values are needed to create a member:

  • username
  • email address
  • password
  • password again

This is the bare minimum a member should contain. However you probably also want to know the name of the member, it's address or maybe favourite color for example. Click 'configure members' to see the list of elements which are required for a member. Then click 'Add element'. Now choose the appropriate element for the information you need (for example a text field for the 'firstname' value).

If you have added all necessary elements in the configuration you can go back the the members main page. Now click 'Add member' and you'll see that all the elements you provided in the configuration are displayed here. Add your new member and the member will be able to login to your restricted area on your website...

Logging in

To be able to have your members login to your restricted area you need a login form. The most basic form is something like this:

<form method='post' action='/__memberLogin'>
   Username: <input type='text' name='username'>
   Password: <input type='text' name='password'>
   Remember me: <input type='checkbox' name='remember'>
   <input type='submit' value='Login'>
</form

You can style it however you like, but these fields are mandatory and the form action and method are important as well.

There are 2 ways you can proceed after this. You can have the login method redirect you to a success or false page, or you can have the method only return a JSON string so you can use it with AJAX for example.

Redirect to a success or false page:

If you want your members to be redirected to a success or failed login page after pressing the Login button, you should add 2 hidden fields to the form:

<input type='hidden' name='redirect' value='/my-success-page'>
<input type='hidden' name='return_url' value='/failed-login-page'>

This will trigger a redirect to these pages after a login attempt..

Return a JSON string

If you don't want to have your members being redirected to a success or failed page, because you use for example an AJAX form, you should make sure that your form does NOT contain hidden fields by the names: redirect and/or return_url. This will trigger a JSON only output. This output is very basic. It will produce {"status":200} on success and {"status":403} when the credentials are wrong. You can then with javascript for example take appropriate actions.

Check member session

When a member accesses a page which is restricted, you want to make sure that the member is actually logged in. You can use the following code on each page which is restricted to make sure only logged in members can access the page.

<?php
$loginSession = $webigniter->checkMemberSession();

if($loginSession['status'] !== 200)
{
    header('Location: /');
    die();
}

print_r($loginSession['member']);

/* Print_r output:
Array
(
    [id] => 12345
    [email] => john@doe.com
    [username] => johndoe
    [active] => 1
    [firstname] => John
    [lastname] => Doe
)
*/
?>

The Webigniter method checkMemberSession() checks if the member has a valid login session. It will respond with a 200 status if it's valid. So you can create an IF statement to determine how to handle invalid sessions.

The array $loginSession['member'] holds all the information about the user, all elements (except passwords) are present in this array..

Creating / updating members

Creating or updating members can be done through the CMS UI, but in some cases you might want to do this on your site, for example when you have a 'register' form on your website or when you want your members to update their data on your website.

If you want to add or update a member using your own pages, you can use the memberSave method from the Webigniter connector class.

Both updating and creating require the same method, the only difference is that when you update a member, you specify the ID of the member you wish to update. If you want to create a member, just leave out the ID and a new member will be added.

When you have a media element connected to the members (for an avatar for example), you need to create an array with 2 keys: filename and file, filename represents the name of the file which will be placed in the media library, file should be a base64 encoded representation of the file contents.

The following example shows how to update a regular element and a media element.

$memberData = [
   'id' => 214864,
   'firstname' => 'John',
   'email' => 'newmail@johnny.com',
   'avatar' => [
      'filename' => 'avatar-214864.png',
      'file' => base64_encode(file_get_contents('C:\path\to\file\image.png'))
   ]
];

$webigniter->memberSave($memberData); // This will update the firstname, email address and avatar file of member id 214864

/* -------------------------------------------- */

$memberData = [
   'username' => 'john123',
   'email' => 'newmail@johnny.com',
   'password' => 'mysecretpass',
   'password_again' => 'mysecretpass',
   'firstname' => 'John',
   'avatar' => [
      'filename' => 'avatar-214864.png',
      'file' => base64_encode(file_get_contents('C:\path\to\file\image.png'))
   ]
];

$webigniter->memberSave($memberData); // This will insert a new member

All data is validated before update or creation, when there are validation errors, they are added to the flashdata array errors. So if for example you forget to specify a mandatory field, this is how you can display error messages...

<?php
if($webigniter->getFlashData('errors')) {
   foreach($webigniter->getFlashData('errors') as $error) {
      echo $error."<br>";
   }
}
?>
Logging out

When you want to provide your members with a logout link just create a link to /__memberLogout. This will destroy the session and potential cookies.

<a href="/__memberLogout?redirect=<?=urlencode('/home');?>">Log out</a>

You can optionally specify an URL parameter redirect to have the member redirected to a certain page after logging out. Be aware that this MUST be an URL encoded string as provided in the above example.

Password forget

A crucial element of handling member logins is the ability for a member to recover their password.

The member function makes it very easy for you to integrate this functionality into your own pages.

From the user's perspective, a password recovery consists of two steps:

- Enter their username to receive an email with recovery instructions.
- Click on the link in the email and create a new password.

Important: Setup your SMTP settings in the CMS under 'Tools' -> 'Settings' -> 'Mail settings'. If not setup correctly, members won't receive a recovery email!

The CMS

First, you need to make some settings in the CMS. Navigate to the Members page, click 'configure members,' and select the 'settings' tab. This is where you can configure the email that will be sent to a member when they request a password reset. You can set your own subject and email body; don't forget to include the recovery link in the body. Without it, members cannot reset their password. The last item is the 'password recovery page.' This is the page where you will place the 'reset password form.' Read the next chapter of this documentation to see how you can easily create that page.

Your pages

You need to create two different pages.

First, you need a page where a member can enter their email address to receive an email with recovery instructions.

The bare minimum code required to make this work is as follows:

<form action="__memberForgotPass" method="post">
    <input type="text" name="username">
    <input type="submit">
</form>

In short, this is a form that posts to __memberForgotPass (which will be handled by Webigniter). The form must have a field named username. When the user submits this form, Webigniter will try to find a member with this username and send them an email containing recovery instructions (as set in the previous chapter). When completed, the user is returned to the form, where you can optionally let the user know that an email has been sent.

The second page you need is the page where your members can set up a new password.

The bare minimum for that page is as follows:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $memberData = [
        'recovery_hash' => $_POST['recovery_hash'],
        'password' => $_POST['password'],
        'password_again' => $_POST['password_again'],
    ];

    $webigniter->memberSave($memberData);
}
?>

<form method="post">
    <input type="hidden" name="recovery_hash" value="<?=$_GET['hash'];?>">
    Password<input type="password" name="password"><br>
    Password again<input type="password" name="password_again"><br>
    <input type="submit">
</form>

In addition to the form, this page also has a piece of PHP code to attempt to change the member's password. All the fields in the form are mandatory. You can, however, move the PHP code to a location that fits your needs better; that's up to you.

Optionally, you can get $webigniter->getFlashData('errors') to see if there were any errors updating the password.

If the password has been changed successfully, the member can log in right away with their new password. At this point, the recovery link will be invalidated.