Authentication and Authorization in MODx

MODx Web Development


March 2009

$23.99

Building dynamic websites with the PHP application framework and CMS

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

 

 

  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

 

  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.

Books to Consider

comments powered by Disqus