« March 2010 | Main | September 2010 »

July 29, 2010

Steps to implement UMN web template in Contao CMS


University of Minnesota has created a web template that features UMN header and footer . This template is becoming a requirement for all UMN domain websites by the end of 2010. The template code that is provided is includes the necessary css, javascript, and html files and is the easiest to implement if the website is created in Dreamweaver or another HTML editor. University Technology Training Center offers a class on implementing the UMN web template with Dreamweaver. If the website is not edited by simply a text editor, but rather with a web content management system, then implementing the UMN template can be more challenging. This article shows how to implement the UMN web template with Contao CMS (formerly known as TYPOlight).

Steps to implement UMN templates in Contao CMS

  1. Install Contao according to documentation: http://www.contao.org/documentation.html . Do not install the demonstration site.
  2. Download UMN web templates from http://www.webdepot.umn.edu/templates.php
  3. Upload Web template files to /contao_root/tl_files/umn_template
  4. Import UMN template CSS files into Contao:

    1. With the browser enter Contao admin interface (http://yourdomain/contao)
    2. Login
    3. Create a new theme under themes. Provide a theme name and theme author's name. For Folders select umn_template, for templates folder templates/umn_template folder (you have to create /templates/umn_template folder in Contao Templates area before hand).
    4. For the theme that you created, click on CSS icon, and then CSS import
    5. Import all css files that come with the UMN template
    6. Change the print style sheet to only apply to print and not all.
    7. Edit the CSS files to direct them to correct asset location (When css files get imported, they are re-created in the root folder of your site, but assets (images etc) are still in /contao_root/tl_files/umn_template .
    8. You may benefit from installing CSSeditor extension (note, does not work in Contao v2.9RC1 yet)
    9. Edit directives where it is pointing to images
  5. Create front end modules for the header:

    1. Create a new Custom HTML module and call it UMN header
    2. Copy everything between <!-- * BEGIN TEMPLATE HEADER (MAROON BAR)* --> and <!--END UofM TEMPLATE HEADER--> from index_2.7.3.html.
    3. Remove the last </div> tag. This </div> would otherwise close the wrapper div.
    4. Change the path to the Search image to tl_files/umn_2.7.3/assets/img/search_button.gif
  6. Create front end module for the footer:

    1. Create a new Custom HTML module and call it UMN footer
    2. Copy everything between <!-- * BEGIN TEMPLATE FOOTER--> and <!--END UofM TEMPLATE FOOTER--> from index_2.7.3.html
  7. Create a custom Contao template to work with your layout:

    1. In Contao back end, click on Templates, then New Template
    2. Choose fe_page.tpl for the template and umn_template as a target folder.
  8. Add <div class="container_12" id="bg273"> to the fe_page.tpl page, under <div id="container"> statement (not sure if we need to add another closing div tag because of this. Seems to work fine without it)
  9. Create a page layout that includes the modules:

    1. Include the header and indicate header height (UMN Template header and campus links are 85 pixels wide)
    2. Include the footer and indicate footer height
    3. Choose the number of columns
    4. Select the style sheets.
    5. Change the order of style sheets to be: 1. reset, 2. Text, 3. Template, 4. Optional, 5, print.
    6. Select the custom layout that you created
    7. Add <script type="text/javascript" src="tl_files/umn_2.7.3/lib/js/searchfield.js"></script> in the head section of the fe_page.tpl file to enable the search javascript here. Please note that this javascript conflicts with some of the mootools javascript such as image slimbox and possibly others.

July 27, 2010

Explorations into UMN Shibboleth Auth - Part 3 Testing and Configuring Shibboleth SP


I have a Apache 2.2 webserver which is able to communicate over SSL. I have also installed the Shibboleth2 SP module. Now it is time to test that Shibboleth SP is working and configure it for UMN IdP.

Test that Shibboleth SP is working

I learned a great deal about configuring Shibboleth SP on the Shibboleth2 documentation website. In addition to learning about how to configure Shibboleth SP, I also used the TestShib Two website to make sure that Shibboleth was working. The TestShib Two service can be especially beneficial in troubleshooting since they allow access to the TestShib IdP log file to see what may have gone wrong.

It is important to note that the Shibboleth2 documentation and the TestShib Two web service provide information about Shibboleth IdP and SP often on the same page. This can be confusing. I learned after some digging, that I can completely ignore the IdP information on these website since I am only configuring the SP. The IdP is already set up and provided for me by the UMN Identity Management team.

In a nutshell, the general steps in configuring Shibboleth are:

  1. Create a certificate for Shibboleth SP on your webserver
  2. Copy your IdP metadate.xml file to Shibboleth SP config directory on your server
  3. Modify the shibboleth2.xml file to correspond with your IdP requirements and metadata.xml file name and location
  4. Configure Apache config file to include ServerName, UseCanonicalName On and Location directives to invoke Shibboleth

In my case I went through these steps for the TestShib Two service. In order to use TestShib, I first registered with OpenIdP.org. Once registered I was able to begin their wizard for configuring and testing Shibboleth SP. Step by step details were:

  1. Generate a self-signed x.509 certificate for Shibboleth SP: ~$ shib-keygen
  2. Fill out the "Register New Service Provider" form on TestShib Two website. Part of this is copying the content of the sp-cert.pem into the form. In case of Ubuntu the sp-cert.pem file and other Shibboleth configuration files are located in /etc/shibboleth directory. Information about the location of Shibboleth config files for other OSs can be found on Shibboleth Service Provider Installation at USC
  3. On TestShib Two website generate the shibboleth2.xml file
  4. Rename the existing shibboleth2.xml file in /etc/shibboleth and copy and paste the new (just generated) shibboleth2.xml file into /etc/shibboleth .
  5. The TestShib Two website asks you to restart the webserver and shibd and test the Shibboleth service, but there is one more step before testing could be done -- configure Apache configuration file to invoke Shibboleth. For Instructions on how to configure Apache, I found the NativeSP Getting Started guide very useful. In my case I made these changes to the default-ssl file that is located in /etc/apache2/sites-available . Direct link to NativeSPApacheConfigdescribes three items that are necessary:
    • Include a ServerName directive with appropriate name (your server Fully Qualified Domain Name)
    • Include the UseCanonicalName On in your config file
    • Enable the shibd module globally by adding the following before the closing tag of your virtual host file:
      <Location />
      AuthType shibbolet
      Require shibboleth
  6. Finally, restart Apache and shibd: ~$ sudo /etc/init.d/apache2 restart and ~$ sudo /etc/init.d/shibd restart
  7. Test the Shibboleth according to TestShib website instructions. That is go to http://yourserver/secure . If you are redirected to the TestShib website for authentication all is working well. Upon successfully authenticating you are redirected to http://yourserver/secure and will likely get a "Page not found error" unless you have created an index.html file there

Problems that I experienced

While, I was able to configure Shibboleth with the TestShib Two service, it did not go without problems. I ran into three issues:
  1. After copying and pasting the shibboleth2.xml file to my server and restarting the shibd and apache2, I was not able to see any of the sites that were served by my webserver. When I looked into the apache2 error log file (located in /var/log/apache2) I noticed it was full of shibboleth related errors. Interestingly both Apache and Shibd restarted without problems. The solution for this was to download the shibboleth2.xml file instead of just copying it from the browser window. I used Chrome for the downloading the file and then uploaded it to the correct location. Once I did that and restarted the two services again, the websites were served up fine. The TestShib Two website refers to this error as "If you get XML parsing errors when you try to start shibd, you've got dingbats in your file" :-).
  2. Once I had the webserver serving pages again, I noticed that when I tried to test Shibboleth SP by going to http://myserver/secure I was not being redirected to the TestShib Two for authentication. The cure for this was that I had not yet configured Apache default-ssl file to explicitly state to use Shibboleth. See item 5 in the previous list for directions in fixing this.
  3. Finally, I after configuring apache default-ssl file and accessing http://myserver/secure, I was redirected to TestShib Two website, but I was not presented with the login screen. Instead I was given an error that said something about not having strong enough authentication. After Googling the error message, I read that others had experience this same error when their server time was wrong. I then looked at the IdP log on TestShib Two website and noticed that my server time was off by several hours. To fix this I installed ntp: ~$ sudo apt-get install ntp. After restarting shibd (~$ /etc/init.d/shibd restart), I reached the TestShib Two authentication page, was able to authenticate and be redirected back to http://myserver/secure where I received a page not found error as expected.

Configuring Shibboleth SP for UMN IdP

... will be covered in the next post. Meanwhile here is a link to UMN Shibboleth authentication wiki page.

July 26, 2010

Explorations into UMN Shibboleth Auth - Part 2 Installing Shibboleth SP on Ubuntu OS

Overview of Tasks

In order to use Shibboleth SP the web server needs to be able to communicate over SSL (https connection). My tasks then for installing Shibboleth SP are:
  1. Create a self-serv certificate for SSL
  2. Enable SSL for Apache web server on Ubuntu
  3. Install Shibboleth for Apache web server
  4. Enable Shibboleth SP on Apache web server
  5. Test Shibboleth to make sure it is working
  6. Configure Shibboleth to use UMN Shibboleth Identity Provider (IdP)

These directions apply to Apache version 2.2 and Ubuntu OS version 9.10 (Karmic Koala). More detailed descriptions of these tasks will follow.

Tasks 1 and 2: Create a self-serv certificate for SSL and enable SSL on Apache.

I learned good information about creating a certificate in this article in Ubuntu Documentation, but eventually opted to go a much simpler route for creating the certificate and enabling it on Apache. The documentation for the method I chose is available in Ubuntu OS in /usr/share/doc/apache2.2-common/README.Debian.gz file. The steps I performed were:
  1. Installed ssl-cert package: ~$ sudo apt-get install ssl-cert -- This creates a self-serv certification for your server automatically.
  2. Enabled default-ssl virtual host: ~$ sudo a2ensite default-ssl
  3. Enabled Apache's SSL module: ~$ sudo a2enmod ssl
  4. Restarted Apache: ~$ sudo /etc/init.d/apache2 restart

Tasks 3 and 4: Install and enable Shibboleth SP on Apache 2.2

  1. Installed Shibboleth module for Ubuntu 9.10: ~$ sudo apt-get install libapache2-mod-shib2
  2. Enabled Apache Shibboleth module: ~$ sudo a2enmod shib
  3. Restarted Apache ~$ sudo /etc/init.d/apache2 restart

Tasks 5 and 6: Test Shibboleth SP and configure it for UMN IdP... - see next posts

Explorations into UMN Shibboleth Auth - Part 1: Overview

Background and Goals

UMN is transitioning from Central Authentication Hub (CAH) into using Shibboleth for authentication of protected web pages and applications. Here are brief notes about my attempts to implement Shibboleth on Ubuntu 9.10. The goal of these explorations is to eventually be able to accomplish the following:

  1. Protect a directory on a webserver with Shibboleth
  2. Restrict the content to only a subset of authenticated users
  3. Create a form and protect it with Shibboleth authentication
  4. Automatically populate some publicly available information (name, email etc) after a successful authentication
  5. Integrate Shibboleth with Contao CMS member login
  6. Create a new member on Contao after a successful authentication with Shibboleth.
  7. Automatically populate some publicly available information with a form in Contao after a successful authentication with Shibboleth.

When reading documentation about Shibboleth, there are two acronyms that are being used -- Shibboleth Service Provider (SP) and Shibboleth Identity Provider (IdP). Often the Shibboleth documentation talks about both of these on the same page even though they are completely different animals. The Shibboleth SP is the client that is using the IdP for authentication. I learned that I can safely ignore information about configuring and IdP since that is already provided to me by the UMN Identity Management team. The information that I need to read is under Shibboleth SP.

Up next: Installing Shibboleth SP on Ubuntu OS