Authentication and Authorization in MODx

Exclusive offer: get 50% off this eBook here
MODx Web Development

MODx Web Development — Save 50%

Building dynamic websites with the PHP application framework and CMS

$23.99    $12.00
by Antano Solar John | July 2009 | Content Management Open Source

Authentication is the process of verifying that users are who they claim to be. Authorization is the process of granting access to the authenticated users—based on their role—to perform operations such as view, edit, or delete on resources. In this article by Antano Solar John, you will learn how MODx facilitates authentication and authorization. You will build your site to include user registrations, logins, user types, and set rules on who can do what.

As you read this article, it is important that you keep in mind that MODx has two user types.

  • Web Users—users who use the web site
  • Manager Users—users who are allowed to log in to the Manager interface

It is vital to keep this distinction in mind to be able to understand the complexities explained in this article. You will also learn how MODx allows grouping of documents, users, and permissions.

Create web users

Let us start by creating a web user. Web users are users who can access restricted document groups in the web site frontend; they do not have Manager access. Web users can identify themselves at login by using login forms. They are allowed to log in from the user page, but they cannot log in using the Manager interface. To create a web user, perform the following steps:

  1. Click on the Web Users menu item in the Security menu.
  2. Click on New Web User.
  3. Fill in the fields with the following information:

    Field Name

    Value

    Username

    samira

    Password

    samira123

    Email Address

    xyz@configurelater.com

 

 

MODx Web Development Building dynamic websites with the PHP application framework and CMS
Published: March 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
  1. Click on the Save button.
  2. Now you will see a page like the following, which lists all the web users on your site.

Other user properties

There are other fields that you can fill in, such as the name, address, and so on, in the General tab. There is also a Photo tab, where you can upload a picture for a user.

In the User tab, you have the following fields:

  • Login Home Page: Here you can specify the document that the user is shown immediately after login.
  • Allowed IP Address: It is possible to allow certain users to log in only from specific machines. This can be set for the particular user by specifying the IP numbers of the machines in this field separated by a comma.
  • Allowed Days: It is possible to allow certain users to log in only on certain days of the week. This can be set for the particular user by selecting which days the user is allowed to log in.

When you click on any user on the web users' page, a page opens that allows you to edit the existing information and also shows simple statistics, such as when the user last logged in. It is also possible to block or unblock the particular user from this page. You can also set Blocked Until or Blocked After to block a user for a certain period and to schedule such a block. When a user is blocked, MODx does not allow that user to log in.

Add the login snippet

Now that we have created a user, let us add a login form that allows the user to log in to the site.

This process is very simple. All that you have to do is call the WebLogin snippet in the template where you want the login page to be shown. We are going to change the template HTML with the following HTML for the Learning MODx default template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<base href="[(site_url)]"></base>
<title>Learning MODx</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner">
<h1>Learning MODx</h1>
</div>
<div id="wrapper">
<div id="container">
<div id="content">
<div id="col-1">
<h1>[*pagetitle*]</h1>
<br/>
[*#content*]
</div>
<div id="col-2" >
<div > [!WebLogin!] </div>
</div>
</div>
</div>
<div class="clearing"> </div>
</div> <!-- end of wrapper div -->
<div id="footer">It is fun and exciting to build websites with MODx</div>
</body>
</html>

Notice that the only addition is the call to the [!WebLogin!] snippet besides the change in the HTML layout, which now has two divs id=col-1 and id=col-2 within the div with id=content to make the content area into two panes.

Also, since we have made changes to the layout, we will have to change the style.css file to specify the width of col-1 and col-2. The new style.css should be changed to:

* { padding:2; margin:0; border:1; }
body { margin:0 20px; background:#8CEC81; }
#banner { background: #2BB81B; border-top:5px solid #8CEC81; border-bottom:5px solid #8CEC81; }
#banner h1 { padding:10px; }
#wrapper { background: #8CEC81; }
#container { width: 100%; background: #2BB81B; float: left; }
#content { background: #ffffff; height:600px; padding:0 10px 10px 10px; clear:both; }
#footer { background: #2BB81B; border-top:5px solid #8CEC81; border-bottom:5px solid #8CEC81; }
.clearing { clear:both; height:0; }
#content #col-1 {float:left;width:500px; margin:0px;padding:0px;}
#content #col-2 {float:right; width:300px; margin:0px; padding:30px 0 10px 25px;
border-left:3px solid #99cc66; height:500px;}
#content #col-2 div {padding-bottom:20px;}

The following are the steps to change the template to use a login snippet and to style it as described above:

  1. Click on the Manage Resources menu item of the Resources menu.
  2. Click on the Learning MODx default template.
  3. Replace it with the preceding HTML.
  4. Click on Save.
  5. Open the style.css file that you created earlier from the learningMODx folder.
  6. Replace it with the preceding and save the file.

Now preview the Home Page; it should look similar to this:

Authentication and Authorization in MODx

Log in as samira. The screen will now look something like the following:

Authentication and Authorization in MODx

Notice that the QuickEdit bar is dependent on whom you log in as from the Manager interface and not on whom you log in as from the Web interface. You can check this out by clicking on the Logout link in the Manager page and refreshing the Home Page. The QuickEdit bar does not appear.

Authentication and Authorization in MODx

Documents can be assigned to document groups and permissions can be defined on document groups. In our site, we want only our friends to post a blog, though anyone can write a comment. So we will create a user group called Friends and assign all the friends that we will allow to blog to this group.

Perform the following steps to create the Friends user group:

  1. Click on the Web Permissions menu item on the Security menu.
  2. Click on the Web User groups tab if it is not the default selected tab.
  3. In the Create a new user group box, type Friends.
  4. Click on Submit.

Document group for friends

Now that we have a user group called Friends, we need to specify which, otherwise not accessible, documents are accessible by this group. We can group all those documents into a document group. The following are the steps to create a document group:

  1. Click on the Web Permissions menu item on the Security menu.
  2. Click on the Document groups tab if it is not the default selected tab.
  3. In the Create a new document group box, type onlyforfriends.
  4. Click on Submit.

Restricting access for a document

All the documents so far have been created as All Document Groups (Public).This means that anybody can access the documents. When we assign a document to some other group, then only the users belonging to that particular group can access it. Now let us change the document group of Post a Blog to onlyforfriends as follows:

  1. Click on the Post a Blog! document from the document tree.
  2. Click on the Edit button.
  3. Click on the Page Settings tab.
  4. Click on the onlyforfriends checkbox under the Access Permissions heading at the bottom of the page.
  5. Click on the Save button.

User group: Document group

If you have logged in as samira from the web site, log off and preview the Post a Blog! page. You will still see the blog page. This is because when we assign a document to a document group, it is still accessible to everyone. Only when a user group is linked to a document group do the permissions become exclusive to that group. Now let us link the Friends user group to the onlyforfriends document group.

  1. Click on the Web Permissions menu item of the Security menu.
  2. Click on the User/Document group links.
  3. Select the onlyforfriends group from the drop-down box next to the Friends user group and click Add.

 

User: User group

Now preview the Post a Blog! page again and you will see something like this:

Authentication and Authorization in MODx

Forget about the inappropriate message for now; we will deal with it at the end of the article. What you must understand now is that MODx has denied access to this page, and has redirected the user to the permission denied page that was initially set in the site configuration.

Try logging in as samira from the Home Page and visiting the Post a Blog! page again. You are still unauthorized to view the page. samira can only access the Post a Blog! page if samira is a member of the Friends user group. This is because we mapped the Friends user group to the onlyforfriends document group and Post a Blog! belongs to the onlyforfriends document group. So let us go ahead and add samira to the Friends user group.

  1. Click on the Web Users menu item of the Security menu.
  2. Click on the username samira.
  3. Click on the General tab if it was not selected already.
  4. Select the Friends checkbox in the Web access permissions section.
  5. Click on Save.

Now having logged in as samira from the Home Page, visit the Post a Blog! page. You should be able to see the regular blog page.

Post moderation

It will be helpful if we can delegate the role of moderating blogs to someone else. The user must only be able to manipulate the documents from the Manager interface and not perform any other activity. There are two points to note here:

  • Able to manipulate documents from the Manager interface—must be a Manager user type
  • Not able to perform any other activity—create a custom role only for manipulating documents

Creating a role

Let us create a role called Blog Moderators who can only edit documents.

  1. Click on the Roles menu item of the Security menu.

Field Name

Field Value

Role name

Blog Moderators

Description

Role type that allows only administration of documents

 

MODx Web Development Building dynamic websites with the PHP application framework and CMS
Published: March 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
  1. Have the following checkboxes clicked in Content management:
    • Edit a document
    • Delete documents
  2. Click on the Save button.

Creating a Manager user

Let us create a Manager user called blogmoderator1 who will moderate all the blogs:

  1. Click on the Manager Users menu item in the Security menu.
  2. Click on New User and fill in the following information:

Field Name

Field Value

Username

blogmoderator1

Password

blogmoderator1

Email

asd@configurelater.com

Role

Blog Moderators

 

  1. Click on the Save button.

Checking the new role

Now that you have created a new role, and have assigned a user to that role, let us try to log in as that user. First, log out from the Manager interface and log in again with the username blogmoderator1 and password blogmoderator1. You will see a screen like the following:

As you can see, you have been able to log in to the Manager interface successfully. And you will also notice that you are allowed to do only the activities that were enabled for this user.

User registration

We have already seen how new users can be created. Besides creating users from the Manager interface, users can also be allowed to register from a Web interface. Users who registered from the Web interface can also be assigned to a default user group.

Showing a signup form

To show a signup form, we will use a snippet that comes bundled with MODx.

  1. Create a new document and fill in the following information:

Field Name

Value

Title

Signup Form

Uses Template

Learning MODx default template

Document Content

[!websignup!]

 

  1. Click on the Save button.

Notice that the content of the document is only [!websignup!], which is a call to the snippet websignup that displays a user registration form.

Now preview the page and it will look like the following:

Authentication and Authorization in MODx

Joining a default group

To assign the registering users to the Friends user group, change the Document Content field on the sign up form to the following:

[!WebSignup? &groups=`Registered Users`!]

Notice that this functionality allows websignup to be called multiple times, with different parameters to have separate login forms for different kinds of users. You can even have different forms by setting a template parameter for the rendered forms.

Link the signup form in the log in snippet

Now that we have created a User Registration page, we need to add a link to the signup page. Add the following code at the end of the document Home Page:

<br/><a href="[~57~]">Register</a>

We are just creating a link to the signup page in our Home Page.

Now the Home Page will appear like the following:

Authentication and Authorization in MODx

Snippets and authorization

So far, we have seen authentication and authorization with respect to:

  • Web users and documents
  • Managers and roles

Authorization on a document level restricts access or grants permission to a user for the entire document. Authorization within snippets can make this more granular by restricting only certain content within a document that is being rendered by the snippet. Snippets accept parameters, and certain snippets provide parameters to be configured so that they are accessible only by a certain user type. In this section, we will modify the NewsPublisher snippet to allow posts from only the authenticated users.

NewsPublisher and authentication

Edit the contents of the Post a Blog! page and change the document's content to the following:

[!NewsPublisher? &folder=`47` &makefolder=`1` &canpost=`Friends`!]

Now, only the registered users will be able to submit the posts. You can check this out by logging out and visiting a blog page. It will look like the following:

Authentication and Authorization in MODx

Summary

There are two categories of MODx users:

  • Manager
  • Web

We learned that:

  • Users are grouped into User groups
  • Documents can be assigned to Document groups
  • Linking Document groups to Web User groups will control viewing of the documents
  • Linking Document groups to Manager User groups will control Manager Access to the documents
  • Roles define what the manager can do with the accessible documents

We have modified the site to have a signup form and a login form. We have also enabled blogs to be posted only by friends.

About the Author :


Antano Solar John

Antano Solar is a techie to the core—a tech evangelist who is passionate about using technology to revolutionize the learning experience! Antano has contributed to the open source community in terms of documentation, code, and support, with a variety of platforms based on languages such as PHP, Perl, Lisp, Python, and Ruby.

He loves to share his tech excitement with fellow techies and non-techies, and does so through publishing papers, books, and delivering seminars at colleges, universities such as the IIT, and corporate tech events.

He has published a paper on enhancing wireless networks in an IEEE Journal. His paper on an engine helping machines understand objectives by meta-modeling, using Neurolinguistic Programming principles and Deep Structure, is considered a landmark.

An avid hacker, Antano has won two Yahoo hack-day awards. He recently won the award for developing a Hybrid Search Engine from scratch in 24 hours that uses Machine Intelligence and Social Intelligence to identify, search, and present the information in the required format.

Professionally, until recently, Antano was a Consultant and a Trainer providing IT solutions and sessions on VoIP, Networks and Software Plaforms, and Languages. He is currently the Chief Technology Officer at NuVeda Learning. In his current role, he is responsible for the development and deployment of Learning Management Systems that are used by large MNCs globally. He also plays the role of a Chief Architect in the research and development of technologies related to the understanding and measuring of Learning. He is excited by the challenges of using complex technologies such as Artificial Intelligence and Natural Language Processing.

Occasionally, when Antano needs to take a "Tech" break, he likes to train and tell stories!

Books From Packt

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Plone 3 Theming
Plone 3 Theming

Spring 2.5 Aspect Oriented Programming
Spring 2.5 Aspect Oriented Programming

Selling Online with Drupal e-Commerce
Selling Online with Drupal e-Commerce

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

WordPress MU 2.7: Beginner's Guide
WordPress MU 2.7: Beginner's Guide

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
q
E
H
b
j
Z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software